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-component="element">
<div class="c-element c-iconsection__item" data-component="element">
<div class="c-element c-iconsection__item__icon" data-component="element">
<!-- icon.blade.php -->
</div>
<div class="c-element c-iconsection__item__content" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h4" data-component="typography">
Housing
</p><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--body" data-component="typography">
Find services and information related to housing and homes.
</p>
</div>
</div>
<div class="c-element c-iconsection__item" data-component="element">
<div class="c-element c-iconsection__item__icon" data-component="element">
<!-- icon.blade.php -->
</div>
<div class="c-element c-iconsection__item__content" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h4" data-component="typography">
Education
</p><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--body" data-component="typography">
Explore schools, programs, and support for students.
</p>
</div>
</div>
<div class="c-element c-iconsection__item" data-component="element">
<div class="c-element c-iconsection__item__icon" data-component="element">
<!-- icon.blade.php -->
</div>
<div class="c-element c-iconsection__item__content" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h4" data-component="typography">
Transport
</p><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--body" 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-component="element">
<div class="c-element c-iconsection__item" data-component="element">
<div class="c-element c-iconsection__item__icon" data-component="element">
<!-- icon.blade.php -->
</div>
<div class="c-element c-iconsection__item__content" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h4" data-component="typography">
Events
</p><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--body" data-component="typography">
Discover upcoming events and activities in the city.
</p>
</div>
</div>
<div class="c-element c-iconsection__item" data-component="element">
<div class="c-element c-iconsection__item__icon" data-component="element">
<!-- icon.blade.php -->
</div>
<div class="c-element c-iconsection__item__content" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h4" data-component="typography">
Support
</p><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--body" 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
|
Type
|
Description
|
|
gap
|
0
|
integer|float
|
-
|
Subcomponents
Child components for iconsection, including purpose and supported Blade parameters.
IconSection Item
Blade directive: @iconSection__item()
-
|
Parameter
|
Default
|
Type
|
Purpose
|
|
icon
|
null
|
?array
|
-
|
|
classList
|
[]
|
array
|
Additional CSS classes added to the wrapping element.
|
|
attributeList
|
[]
|
array
|
Additional HTML attributes added to the wrapping element.
|
@iconSection__item([
'icon' => null,
])
@endiconSection__item
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.
|
