IconSection

Icon Section without gap

Title

Content

Title

Content

<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

Title

Content

Title

Content

<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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/IconSection/iconSection.json