Icon Section

The Icon Section component provides a reusable pattern for iconsection in the interface.

Basic icon section

A simple icon section with three items and supporting content.

Housing

Find services and information related to housing and homes.

Education

Explore schools, programs, and support for students.

Transport

Get updates and details about local public transport.

<div class="c-element c-iconsection c-iconsection--gap-0" data-uid="69f0d1598dfeb" data-component="element">
        <div class="c-element c-iconsection__item" data-uid="69f0d1598d8fb" data-component="element">
        <div class="c-element c-iconsection__item__icon" data-uid="69f0d1598d85d" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d1598d7d9" data-component="icon">
                    </span>
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="69f0d1598d8c8" data-component="element">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h4" data-uid="69f0d1598d389" data-component="typography">
    Housing
</p>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--body" data-uid="69f0d1598d3f0" data-component="typography">
    Find services and information related to housing and homes.
</p>
    </div>
    </div>

        <div class="c-element c-iconsection__item" data-uid="69f0d1598da94" data-component="element">
        <div class="c-element c-iconsection__item__icon" data-uid="69f0d1598da2c" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--school c-icon--material c-icon--material-school material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="school" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d1598d9e8" data-component="icon">
                    </span>
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="69f0d1598da6b" data-component="element">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h4" data-uid="69f0d1598d934" data-component="typography">
    Education
</p>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--body" data-uid="69f0d1598d968" data-component="typography">
    Explore schools, programs, and support for students.
</p>
    </div>
    </div>

        <div class="c-element c-iconsection__item" data-uid="69f0d1598dce8" data-component="element">
        <div class="c-element c-iconsection__item__icon" data-uid="69f0d1598dc0e" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--directions-bus c-icon--material c-icon--material-directions_bus material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="directions_bus" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d1598db61" data-component="icon">
                    </span>
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="69f0d1598dca1" data-component="element">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h4" data-uid="69f0d1598dac3" data-component="typography">
    Transport
</p>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--body" data-uid="69f0d1598daf1" data-component="typography">
    Get updates and details about local public transport.
</p>
    </div>
    </div>
    </div>

@iconSection()
    @iconSection__item([
        'icon' => [
            'icon' => 'home'
        ]
    ])
        @typography([
            'variant' => 'h4'
        ])
            Housing
        @endtypography
        @typography([
            'variant' => 'body',
            'element' => 'p'
        ])
            Find services and information related to housing and homes.
        @endtypography
    @endiconSection__item

    @iconSection__item([
        'icon' => [
            'icon' => 'school'
        ]
    ])
        @typography([
            'variant' => 'h4'
        ])
            Education
        @endtypography
        @typography([
            'variant' => 'body',
            'element' => 'p'
        ])
            Explore schools, programs, and support for students.
        @endtypography
    @endiconSection__item

    @iconSection__item([
        'icon' => [
            'icon' => 'directions_bus'
        ]
    ])
        @typography([
            'variant' => 'h4'
        ])
            Transport
        @endtypography
        @typography([
            'variant' => 'body',
            'element' => 'p'
        ])
            Get updates and details about local public transport.
        @endtypography
    @endiconSection__item
@endiconSection

Icon section with spacing

Use the gap setting to control spacing between icon section items.

Events

Discover upcoming events and activities in the city.

Support

Contact support and get help with common questions.

<div class="c-element c-iconsection c-iconsection--gap-6" data-uid="69f0d1598e9aa" data-component="element">
        <div class="c-element c-iconsection__item" data-uid="69f0d1598e6e0" data-component="element">
        <div class="c-element c-iconsection__item__icon" data-uid="69f0d1598e637" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--event c-icon--material c-icon--material-event material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="event" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d1598e5de" data-component="icon">
                    </span>
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="69f0d1598e69e" data-component="element">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h4" data-uid="69f0d1598e4b0" data-component="typography">
    Events
</p>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--body" data-uid="69f0d1598e515" data-component="typography">
    Discover upcoming events and activities in the city.
</p>
    </div>
    </div>

        <div class="c-element c-iconsection__item" data-uid="69f0d1598e921" data-component="element">
        <div class="c-element c-iconsection__item__icon" data-uid="69f0d1598e881" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--support-agent c-icon--material c-icon--material-support_agent material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="support_agent" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d1598e82d" data-component="icon">
                    </span>
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="69f0d1598e8e1" data-component="element">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h4" data-uid="69f0d1598e72a" data-component="typography">
    Support
</p>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--body" data-uid="69f0d1598e77d" data-component="typography">
    Contact support and get help with common questions.
</p>
    </div>
    </div>
    </div>

@iconSection([
    'gap' => 6
])
    @iconSection__item([
        'icon' => [
            'icon' => 'event'
        ]
    ])
        @typography([
            'variant' => 'h4'
        ])
            Events
        @endtypography
        @typography([
            'variant' => 'body',
            'element' => 'p'
        ])
            Discover upcoming events and activities in the city.
        @endtypography
    @endiconSection__item

    @iconSection__item([
        'icon' => [
            'icon' => 'support_agent'
        ]
    ])
        @typography([
            'variant' => 'h4'
        ])
            Support
        @endtypography
        @typography([
            'variant' => 'body',
            'element' => 'p'
        ])
            Contact support and get help with common questions.
        @endtypography
    @endiconSection__item
@endiconSection

API

Parameter	Default	Description
gap	0	The gap between the items in the icon section. Number between 0-12

CSS API

Variable	Default	Type	Values	Description
--c-iconsection--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-iconsection--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-iconsection--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-iconsection--border-radius	var(--border-radius)	range	-	Border Radius
--c-iconsection--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-iconsection--border-width	var(--border-width)	range	-	Size
--c-iconsection--color--surface	var(--color--surface)	color	-	Surface
--c-iconsection--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-iconsection--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-iconsection--font-size-300	var(--font-size-300)	range	-	Two steps above base in the type scale. Equivalent to h5.

Similar components

Collection Option Pagination