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 -->
<span class="c-icon c-icon--home c-icon--material c-icon--material-home c-icon--svg-material c-icon--size-inherit" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined"
aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d="M240 760H360V520H600V760H720V400L480 220L240 400ZM160 840V360L480 120L800 360V840H520V600H440V840ZM480 490Z"></path></svg></span>
</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 -->
<span class="c-icon c-icon--school c-icon--material c-icon--material-school c-icon--svg-material c-icon--size-inherit" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined"
aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d="M480 840 200 688V448L40 360L480 120L920 360V680H840V404L760 448V688ZM480 508 754 360 480 212 206 360ZM480 749 680 641V490L480 600L280 490V641ZM480 508ZM480 598ZM480 598Z">
</path></svg></span>
</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 -->
<span class="c-icon c-icon--directions-bus c-icon--material c-icon--material-directions_bus c-icon--svg-material c-icon--size-inherit" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M240 840Q223 840 211.5 828.5Q200 817 200 800V718Q182 698 171.0 673.5Q160 649 160 620V240Q160 157 237.0 118.5Q314 80 480 80Q652 80 726.0 117.0Q800 154 800 240V620Q800 649 789.0 673.5Q778 698 760 718V800Q760 817 748.5 828.5Q737 840 720 840H680Q663 840 651.5 828.5Q640 817 640 800V760H320V800Q320 817 308.5 828.5Q297 840 280 840ZM482 200Q592 200 641.5 200.0Q691 200 706 200H258Q276 200 325.5 200.0Q375 200 482 200ZM640 480H320Q287 480 263.5 480.0Q240 480 240 480H720Q720 480 696.5 480.0Q673 480 640 480ZM240 400H720V280H240ZM340.0 640.0Q365 640 382.5 622.5Q400 605 400.0 580.0Q400 555 382.5 537.5Q365 520 340.0 520.0Q315 520 297.5 537.5Q280 555 280.0 580.0Q280 605 297.5 622.5Q315 640 340.0 640.0ZM620.0 640.0Q645 640 662.5 622.5Q680 605 680.0 580.0Q680 555 662.5 537.5Q645 520 620.0 520.0Q595 520 577.5 537.5Q560 555 560.0 580.0Q560 605 577.5 622.5Q595 640 620.0 640.0ZM258 200H706Q691 183 641.5 171.5Q592 160 482 160Q375 160 325.5 172.5Q276 185 258 200ZM320 680H640Q673 680 696.5 656.5Q720 633 720 600V480H240V600Q240 633 263.5 656.5Q287 680 320 680Z">
</path></svg></span>
</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 -->
<span class="c-icon c-icon--event c-icon--material c-icon--material-event c-icon--svg-material c-icon--size-inherit" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined"
aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M580.0 720.0Q538 720 509.0 691.0Q480 662 480.0 620.0Q480 578 509.0 549.0Q538 520 580.0 520.0Q622 520 651.0 549.0Q680 578 680.0 620.0Q680 662 651.0 691.0Q622 720 580.0 720.0ZM200 880Q167 880 143.5 856.5Q120 833 120 800V240Q120 207 143.5 183.5Q167 160 200 160H240V80H320V160H640V80H720V160H760Q793 160 816.5 183.5Q840 207 840 240V800Q840 833 816.5 856.5Q793 880 760 880ZM200 800H760Q760 800 760.0 800.0Q760 800 760 800V400H200V800Q200 800 200.0 800.0Q200 800 200 800ZM200 320H760V240Q760 240 760.0 240.0Q760 240 760 240H200Q200 240 200.0 240.0Q200 240 200 240ZM200 320V240Q200 240 200.0 240.0Q200 240 200 240Q200 240 200.0 240.0Q200 240 200 240V320Z">
</path></svg></span>
</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 -->
<span class="c-icon c-icon--support-agent c-icon--material c-icon--material-support_agent c-icon--svg-material c-icon--size-inherit" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M440 840V760H760Q760 760 760.0 760.0Q760 760 760 760V476Q760 359 678.5 277.5Q597 196 480 196Q363 196 281.5 277.5Q200 359 200 476V720H160Q127 720 103.5 696.5Q80 673 80 640V560Q80 539 90.5 520.5Q101 502 120 491L123 438Q131 370 162.5 312.0Q194 254 241.5 211.0Q289 168 350.5 144.0Q412 120 480 120Q548 120 609.0 144.0Q670 168 718.0 210.5Q766 253 797.0 311.0Q828 369 837 437L840 489Q859 498 869.5 516.0Q880 534 880 554V646Q880 666 869.5 684.0Q859 702 840 711V760Q840 793 816.5 816.5Q793 840 760 840ZM360.0 560.0Q343 560 331.5 548.5Q320 537 320.0 520.0Q320 503 331.5 491.5Q343 480 360.0 480.0Q377 480 388.5 491.5Q400 503 400.0 520.0Q400 537 388.5 548.5Q377 560 360.0 560.0ZM600.0 560.0Q583 560 571.5 548.5Q560 537 560.0 520.0Q560 503 571.5 491.5Q583 480 600.0 480.0Q617 480 628.5 491.5Q640 503 640.0 520.0Q640 537 628.5 548.5Q617 560 600.0 560.0ZM241 498Q234 392 305.0 316.0Q376 240 482 240Q571 240 638.5 296.5Q706 353 720 441Q629 440 552.5 392.0Q476 344 435 262Q419 342 367.5 404.5Q316 467 241 498Z">
</path></svg></span>
</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.
|
