Home
Components
Collection
Collection
The Collection component provides a reusable pattern for collection in the interface.
Plain text collection
Just a plain and simple collection. The first item is linked in each list. First collection utilizes the slot, and the second utlizes the array list input method.
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-component="collection">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-component="collection__item">
<div class="c-collection__content">
Linked item
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
Unlinked item
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
Unlinked item
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-component="collection">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid">
<div class="o-grid-4">
@collection()
@collection__item(['link' => "https://link.link"])
Linked item
@endcollection__item
@collection__item()
Unlinked item
@endcollection__item
@collection__item()
Unlinked item
@endcollection__item
@endcollection
</div>
<div class="o-grid-4">
@collection(
[
'list' => [
['content' => 'Linked item', 'link' => "https://getmunicipio.com"],
'Unlinked item',
['content' => 'Unlinked item', 'link' => false],
],
]
)
@endcollection
</div>
</div>
Multiline text collection
Sometimes you just want more in life than single rows.
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-component="collection">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-component="typography">
This is a multiline
</h2><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
We also have defined link.
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-component="typography">
This is a multiline
</h3><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Nothing more than that.
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-component="collection">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--account-circle c-icon--material c-icon--material-account_circle c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden=
"true" 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=
"M234 684Q285 645 348.0 622.5Q411 600 480.0 600.0Q549 600 612.0 622.5Q675 645 726 684Q761 643 780.5 591.0Q800 539 800 480Q800 347 706.5 253.5Q613 160 480.0 160.0Q347 160 253.5 253.5Q160 347 160 480Q160 539 179.5 591.0Q199 643 234 684ZM480.0 520.0Q421 520 380.5 479.5Q340 439 340.0 380.0Q340 321 380.5 280.5Q421 240 480.0 240.0Q539 240 579.5 280.5Q620 321 620.0 380.0Q620 439 579.5 479.5Q539 520 480.0 520.0ZM480 880Q397 880 324.0 848.5Q251 817 197.0 763.0Q143 709 111.5 636.0Q80 563 80 480Q80 397 111.5 324.0Q143 251 197.0 197.0Q251 143 324.0 111.5Q397 80 480 80Q563 80 636.0 111.5Q709 143 763.0 197.0Q817 251 848.5 324.0Q880 397 880 480Q880 563 848.5 636.0Q817 709 763.0 763.0Q709 817 636.0 848.5Q563 880 480 880ZM666 740Q627 711 580.0 695.5Q533 680 480.0 680.0Q427 680 380.0 695.5Q333 711 294 740Q333 769 380.0 784.5Q427 800 480.0 800.0Q533 800 580.0 784.5Q627 769 666 740ZM480.0 440.0Q506 440 523.0 423.0Q540 406 540.0 380.0Q540 354 523.0 337.0Q506 320 480.0 320.0Q454 320 437.0 337.0Q420 354 420.0 380.0Q420 406 437.0 423.0Q454 440 480.0 440.0ZM480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0Q480 380 480.0 380.0ZM480 740Q480 740 480.0 740.0Q480 740 480.0 740.0Q480 740 480.0 740.0Q480 740 480 740Q480 740 480.0 740.0Q480 740 480.0 740.0Q480 740 480.0 740.0Q480 740 480 740Z">
</path></svg></span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
This is a multiline with an icon
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
We also have defined link.
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--assignment c-icon--material c-icon--material-assignment c-icon--svg-material c-icon--size-md" 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=
"M200 840Q167 840 143.5 816.5Q120 793 120 760V200Q120 167 143.5 143.5Q167 120 200 120H368Q381 84 411.5 62.0Q442 40 480 40Q518 40 548.5 62.0Q579 84 592 120H760Q793 120 816.5 143.5Q840 167 840 200V760Q840 793 816.5 816.5Q793 840 760 840ZM200 760H760Q760 760 760.0 760.0Q760 760 760 760V200Q760 200 760.0 200.0Q760 200 760 200H200Q200 200 200.0 200.0Q200 200 200 200V760Q200 760 200.0 760.0Q200 760 200 760ZM280 680H560V600H280ZM280 520H680V440H280ZM280 360H680V280H280ZM480.0 170.0Q493 170 501.5 161.5Q510 153 510.0 140.0Q510 127 501.5 118.5Q493 110 480.0 110.0Q467 110 458.5 118.5Q450 127 450.0 140.0Q450 153 458.5 161.5Q467 170 480.0 170.0ZM200 760Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200Q200 200 200.0 200.0Q200 200 200 200V760Q200 760 200.0 760.0Q200 760 200 760Z">
</path></svg></span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
This is a multiline with an icon
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid">
<div class="o-grid-4">
@collection([])
@collection__item(['link' => 'https://link.link'])
@typography(['element' => 'h4'])
This is a multiline
@endtypography
@typography([])
We also have defined link.
@endtypography
@endcollection__item
@collection__item()
@typography(['element' => 'h4'])
This is a multiline
@endtypography
@typography([])
Nothing more than that.
@endtypography
@endcollection__item
@endcollection
</div>
<div class="o-grid-4">
@collection([])
@collection__item([
'icon' => 'account_circle',
'link' => 'https://link.link'
])
@typography(['element' => 'h4'])
This is a multiline with an icon
@endtypography
@typography([])
We also have defined link.
@endtypography
@endcollection__item
@collection__item()
@slot('prefix')
<div class="c-collection__icon">
@icon(['icon' => 'assignment', 'size' => 'md'])
@endicon
</div>
@endslot
@typography(['element' => 'h4'])
This is a multiline with an icon
@endtypography
@typography([])
Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
@endtypography
@endcollection__item
@endcollection
</div>
</div>
Collection with secondary
This is a collection utilizing actions / secondary area.
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--home c-icon--material c-icon--material-home c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden="true" 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-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
This is a multiline
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
We also have defined a icon and a action link.
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--home c-icon--material c-icon--material-home c-icon--svg-material c-icon--size-md" 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-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
I'm an imposter!
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
I use my slots to mimic the above collection item.
</p>
</div>
<div class="c-collection__secondary">
<a class="c-link" href="https://link.link" target="_top" data-component="link"><!-- icon.blade.php -->
<span class="c-icon c-icon--star c-icon--material c-icon--material-star c-icon--svg-material c-icon--size-md" 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="M354 673 480 597 606 674 573 530 684 434 538 421 480 285 422 420 276 433 387 530ZM233 840 298 559 80 370 368 345 480 80 592 345 880 370 662 559 727 840 480 691ZM480 490Z">
</path></svg></span></a>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="http://getmunicipio.com" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--home c-icon--material c-icon--material-home c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden="true" 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-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
This is a multiline
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This has the same configuration as above. But applied a link to the item. Actions then dissapear.
</p>
</div></a>
</div>
</div>
</div>
<div class="o-grid">
<div class="o-grid-4">
@collection()
@collection__item([
'icon' => 'home',
'action' => [
'icon' => 'star',
'link' => 'http://link.link'
]
])
@typography(['element' => 'h4'])
This is a multiline
@endtypography
@typography([])
We also have defined a icon and a action link.
@endtypography
@endcollection__item
@collection__item()
@slot('prefix')
<div class="c-collection__icon">
@icon(['icon' => 'home', 'size' => 'md'])
@endicon
</div>
@endslot
@typography(['element' => 'h4'])
I'm an imposter!
@endtypography
@typography([])
I use my slots to mimic the above collection item.
@endtypography
@slot('secondary')
@link(['href' => 'https://link.link'])
@icon(['icon' => 'star', 'size' => 'md'])
@endicon
@endlink
@endslot
@endcollection__item
@collection__item([
'icon' => 'home',
'action' => [
'icon' => 'star',
'link' => 'http://link.link'
],
'link' => 'http://getmunicipio.com'
])
@typography(['element' => 'h4'])
This is a multiline
@endtypography
@typography([])
This has the same configuration as above. But applied a link to the item. Actions then dissapear.
@endtypography
@endcollection__item
@endcollection
</div>
</div>
Collection with modifiers
Thie is a collections with all modifiers.
Collection modifier
This utilizes the "bordered" and will therefore display differently.
Collection modifier
This utilizes the "compact" and will therefore display differently.
Collection modifier
This utilizes the "sharp" and will therefore display differently.
Collection modifier
This utilizes the "sharpBottom" and will therefore display differently.
Collection modifier
This utilizes the "sharpTop" and will therefore display differently.
Collection modifier
This utilizes the "unbox" and will therefore display differently.
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Collection modifier
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This utilizes the "bordered" and will therefore display differently.
</p>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered c-collection--compact" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Collection modifier
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This utilizes the "compact" and will therefore display differently.
</p>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered c-collection--sharp" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Collection modifier
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This utilizes the "sharp" and will therefore display differently.
</p>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered c-collection--sharp-bot" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Collection modifier
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This utilizes the "sharpBottom" and will therefore display differently.
</p>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered c-collection--sharp-top" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Collection modifier
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This utilizes the "sharpTop" and will therefore display differently.
</p>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered c-collection--unbox" data-component="collection">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Collection modifier
</h4><!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
This utilizes the "unbox" and will therefore display differently.
</p>
</div>
</div><!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Linked item
</p>
</div></a> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div><!-- collection__item.blade.php -->
<div class="c-collection__item" data-component="collection__item">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-component="typography">
Unlinked item
</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid">
@foreach(['bordered', 'compact', 'sharp', 'sharpBottom', 'sharpTop', 'unbox'] as $modifier)
<div class="o-grid-4">
@collection(
[
'bordered' => true,
$modifier => true,
'list' => [
['title' => 'Collection modifier', 'content' => 'This utilizes the "' . $modifier . '" and will therefore display differently.'],
['content' => 'Linked item', 'link' => "https://getmunicipio.com"],
'Unlinked item',
['content' => 'Unlinked item', 'link' => false],
],
]
)
@endcollection
</div>
@endforeach
</div>
Collection in card
Shows a bordered collection wrapped in a panel card.
<div class="c-card c-card--panel c-card--ratio-16-9" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__header" data-component="card__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography module-title u-margin--0 c-typography__variant--h6" data-component="typography">
Read more about this topic
</h2>
</div><!-- collection.blade.php -->
<div class="c-collection c-collection--bordered c-collection--sharp-top" data-component="collection">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden="true"
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="M647 520H160V440H647L423 216L480 160L800 480L480 800L423 744Z"></path></svg></span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-component="typography">
Item label
</h2>
</div></a> <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden="true"
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="M647 520H160V440H647L423 216L480 160L800 480L480 800L423 744Z"></path></svg></span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-component="typography">
Item label
</h2>
</div></a> <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden="true"
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="M647 520H160V440H647L423 216L480 160L800 480L480 800L423 744Z"></path></svg></span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-component="typography">
Item label
</h2>
</div></a> <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-component="collection__item">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward c-icon--svg-material c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-hidden="true"
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="M647 520H160V440H647L423 216L480 160L800 480L480 800L423 744Z"></path></svg></span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-component="typography">
Item label
</h2>
</div></a>
</div>
</div>
</div>
@card([
'classList' => ['c-card--panel']
])
@card__header()
@typography([
'element' => 'h2',
'variant' => 'h6',
'classList' => [
'module-title',
'u-margin--0'
]
])
Read more about this topic
@endtypography
@endcard__header
@collection([
'bordered' => true,
'sharpTop' => true
])
@for ($i = 0; $i < 4; $i++)
@collection__item([
'icon' => 'arrow_forward',
'link' => '#',
'attributeList' => [
'id' => 'item-52147-0',
'aria-labelledby' => 'item-52147-0-title'
]
])
@typography([
'element' => 'h2',
'variant' => 'h4',
'attributeList' => [
'id' => 'item-52147-0-title'
]
])
Item label
@endtypography
@endcollection__item
@endfor
@endcollection
@endcard
API
Parameter
Default
Type
Description
componentElement
div
string
-
list
false
array|boolean
-
bordered
false
boolean
-
compact
false
boolean
-
sharp
false
boolean
-
sharpBottom
false
boolean
-
sharpTop
false
boolean
-
unbox
false
boolean
-
Subcomponents
Child components for collection, including purpose and supported Blade parameters.
Collection Item
Blade directive: @collection__item()
-
Parameter
Default
Type
Purpose
componentElement
div
string
-
prefix
string
-
icon
false
array|string|boolean|null
-
iconLast
false
array|boolean
-
action
false
array|boolean
-
secondary
string
-
link
string
-
bordered
false
boolean
-
classList
[]
array
Additional CSS classes added to the wrapping element.
attributeList
[]
array
Additional HTML attributes added to the wrapping element.
@collection__item([
'componentElement' => 'div',
'prefix' => '',
'icon' => false,
'iconLast' => false,
'action' => false,
'secondary' => '',
'link' => '',
'bordered' => false,
])
@endcollection__item
CSS API
Variable
Default
Type
Values
Description
--c-collection--border-radius
var(--border-radius)
range
-
Border Radius
--c-collection--border-width
var(--border-width)
range
-
Size
--c-collection--space
var(--space)
range
-
Base spacing unit. Used for padding and margin inside components.
--c-collection--base
var(--base)
range
-
Main unit that drives radius and spacing scales.
--c-collection--color--primary
var(--color--primary)
color
-
Primary
--c-collection--corner-shape
var(--corner-shape)
select
square, round, squircle, circular, bevel, scoop
Corner Shape
--c-collection--color--background-border
var(--color--background-border)
color
-
Manual companion token for borders on background surfaces.
--c-collection--color--primary-contrast
var(--color--primary-contrast)
color
-
Primary Contrast
--c-collection--color--surface-contrast
var(--color--surface-contrast)
color
-
Used for text and icons on surface backgrounds with less contrast.
--c-collection--color--surface-border
var(--color--surface-border)
color
-
Manual companion token for borders on surface elements.
--c-collection--font-size-100
var(--font-size-100)
range
-
Base font size.
