IconSection
Icon Section without gap
<div class="c-element c-iconsection c-iconsection--gap-0" data-uid="68b86ceaaa7d0">
<div class="c-element c-iconsection__item" data-uid="68b86ceaaa1d1">
<div class="c-element c-iconsection__item__icon" data-uid="68b86ceaaa156">
<!-- icon.blade.php -->
<span class="c-icon c-icon--location-on c-icon--material c-icon--material-location_on material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="location_on" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86ceaaa0eb">
</span>
</div>
<div class="c-element c-iconsection__item__content" data-uid="68b86ceaaa1a7">
<h2>Title</h2>
<p>Content</p>
</div>
</div>
<div class="c-element c-iconsection__item" data-uid="68b86ceaaa2c8">
<div class="c-element c-iconsection__item__icon" data-uid="68b86ceaaa26d">
<!-- icon.blade.php -->
<span class="c-icon c-icon--wc c-icon--material c-icon--material-wc material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="wc" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86ceaaa23c">
</span>
</div>
<div class="c-element c-iconsection__item__content" data-uid="68b86ceaaa2a4">
<h2>Title</h2>
<p>Content</p>
</div>
</div>
</div>
@iconSection([])
@iconSection__item([
'icon' => [
'icon' => 'location_on',
'size' => 'md'
]
])
<h2>Title</h2>
<p>Content</p>
@endiconSection__item
@iconSection__item([
'icon' => [
'icon' => 'wc',
'size' => 'md'
]
])
<h2>Title</h2>
<p>Content</p>
@endiconSection__item
@endiconSection
Icon Section with gap
<div class="c-element c-iconsection c-iconsection--gap-4" data-uid="68b86ceaaac77">
<div class="c-element c-iconsection__item" data-uid="68b86ceaaab32">
<div class="c-element c-iconsection__item__icon" data-uid="68b86ceaaaac6">
<!-- icon.blade.php -->
<span class="c-icon c-icon--location-on c-icon--material c-icon--material-location_on material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="location_on" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86ceaaaa91">
</span>
</div>
<div class="c-element c-iconsection__item__content" data-uid="68b86ceaaab0c">
<h2>Title</h2>
<p>Content</p>
</div>
</div>
<div class="c-element c-iconsection__item" data-uid="68b86ceaaac28">
<div class="c-element c-iconsection__item__icon" data-uid="68b86ceaaabcb">
<!-- icon.blade.php -->
<span class="c-icon c-icon--wc c-icon--material c-icon--material-wc material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="wc" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86ceaaab9a">
</span>
</div>
<div class="c-element c-iconsection__item__content" data-uid="68b86ceaaac03">
<h2>Title</h2>
<p>Content</p>
</div>
</div>
</div>
@iconSection([
'gap' => 4
])
@iconSection__item([
'icon' => [
'icon' => 'location_on',
'size' => 'md'
]
])
<h2>Title</h2>
<p>Content</p>
@endiconSection__item
@iconSection__item([
'icon' => [
'icon' => 'wc',
'size' => 'md'
]
])
<h2>Title</h2>
<p>Content</p>
@endiconSection__item
@endiconSection
Blade component parameters
Key | Default value | Type | Available values | Description |
gap | 0 | integer | - | The gap between the items in the icon section. Number between 0-12 |
id | string | - | The DOM id of the component. | |
classList | [] | array | - | Array containing wrapping classes array |
attributeList | [] | array | - | Array containing keys and values rendered as attributes |
containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |