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="6a44f14ab84d7" data-component="element">
  <div class="c-element c-iconsection__item" data-uid="6a44f14ab7f33" data-component="element">
    <div class="c-element c-iconsection__item__icon" data-uid="6a44f14ab7e1c" data-component="element">
      <!-- icon.blade.php -->
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="6a44f14ab7ed9" data-component="element">
      <!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--h4" data-uid="6a44f14ab7a31" data-component="typography">
        Housing
      </p><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--body" data-uid="6a44f14ab7a9b" data-component="typography">
        Find services and information related to housing and homes.
      </p>
    </div>
  </div>
  <div class="c-element c-iconsection__item" data-uid="6a44f14ab816d" data-component="element">
    <div class="c-element c-iconsection__item__icon" data-uid="6a44f14ab80cb" data-component="element">
      <!-- icon.blade.php -->
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="6a44f14ab8130" data-component="element">
      <!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--h4" data-uid="6a44f14ab7f83" data-component="typography">
        Education
      </p><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--body" data-uid="6a44f14ab7fc9" data-component="typography">
        Explore schools, programs, and support for students.
      </p>
    </div>
  </div>
  <div class="c-element c-iconsection__item" data-uid="6a44f14ab83cc" data-component="element">
    <div class="c-element c-iconsection__item__icon" data-uid="6a44f14ab832f" data-component="element">
      <!-- icon.blade.php -->
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="6a44f14ab8390" data-component="element">
      <!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--h4" data-uid="6a44f14ab81d1" data-component="typography">
        Transport
      </p><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--body" data-uid="6a44f14ab8212" 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="6a44f14ab8a88" data-component="element">
  <div class="c-element c-iconsection__item" data-uid="6a44f14ab87fd" data-component="element">
    <div class="c-element c-iconsection__item__icon" data-uid="6a44f14ab875c" data-component="element">
      <!-- icon.blade.php -->
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="6a44f14ab87c0" data-component="element">
      <!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--h4" data-uid="6a44f14ab85e3" data-component="typography">
        Events
      </p><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--body" data-uid="6a44f14ab8634" data-component="typography">
        Discover upcoming events and activities in the city.
      </p>
    </div>
  </div>
  <div class="c-element c-iconsection__item" data-uid="6a44f14ab8a0b" data-component="element">
    <div class="c-element c-iconsection__item__icon" data-uid="6a44f14ab8970" data-component="element">
      <!-- icon.blade.php -->
    </div>
    <div class="c-element c-iconsection__item__content" data-uid="6a44f14ab89cf" data-component="element">
      <!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--h4" data-uid="6a44f14ab8841" data-component="typography">
        Support
      </p><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--body" data-uid="6a44f14ab8882" 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

Subcomponents

Child components for iconsection, including purpose and supported Blade parameters.

IconSection Item

Blade directive: @iconSection__item()

An array with the same specification as the icon component

Parameter	Default	Type	Purpose
icon	null	array	An array with the same specification as the icon component
classList	[]	array	Additional CSS classes added to the wrapping element.
attributeList	[]	array	Additional HTML attributes added to the wrapping element.

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