Collection
Plain text collection
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d34573c3b">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6605d34573b5f">
<div class="c-collection__content">
Linked item
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573bb0">
<div class="c-collection__content">
Unlinked item
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573bdd">
<div class="c-collection__content">
Unlinked item
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d34573c72">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="6605d34573cf6">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573cc6">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573d6f">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573d44">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573dc4">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573d9c">
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://helsingborg.se"],
'Unlinked item',
['content' => 'Unlinked item', 'link' => false],
],
]
)
@endcollection
</div>
</div>
Multiline text collection
This is a multiline
We also have defined link.
This is a multiline
Nothing more than that.
This is a multiline with an icon
We also have defined link.
This is a multiline with an icon
Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d34573f3f">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6605d34573e91">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="6605d34573e3c">
This is a multiline
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573e67">
We also have defined link.
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573f18">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="6605d34573ec1">
This is a multiline
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573ef0">
Nothing more than that.
</p>
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d345740f2">
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6605d34573fc0">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34573f68">
This is a multiline with an icon
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573f8f">
We also have defined link.
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345740ce">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--assignment c-icon--material c-icon--material-assignment material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="assignment" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6605d34574028">
assignment
</span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574086">
This is a multiline with an icon
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345740aa">
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 multiline
We also have defined a icon and a action link.
This is a multiline
This has the same configuration as above. But applied a link to the item. Actions then dissapear.
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d345743a1">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345741a3">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d3457414a">
This is a multiline
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457416d">
We also have defined a icon and a action link.
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345742f8">
<div class="c-collection__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="home" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6605d345741d9">
home
</span>
</div>
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d3457420c">
I'm an imposter!
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574232">
I use my slots to mimic the above collection item.
</p>
</div>
<div class="c-collection__secondary">
<a class="c-link" id="" href="https://link.link" target="_top" data-uid="6605d345742bd">
<!-- icon.blade.php -->
<span class="c-icon c-icon--star c-icon--material c-icon--material-star material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="star" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6605d34574265">
star
</span>
</a>
</div>
</div>
<!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="http://helsingborg.se" data-uid="6605d34574371">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574324">
This is a multiline
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457434a">
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://helsingborg.se'
])
@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
Collection modifier
This utilizes the "bordered" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "compact" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "sharp" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "sharpBottom" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "sharpTop" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "unbox" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
<div class="o-grid">
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--bordered" data-uid="6605d34574405">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d3457447c">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574430">
Collection modifier
</h4>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574457">
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://helsingborg.se" data-uid="6605d345744cb">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345744a6">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574518">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345744f4">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574561">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457453f">
Unlinked item
</p>
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--compact" data-uid="6605d3457458e">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345745fd">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d345745b4">
Collection modifier
</h4>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345745da">
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://helsingborg.se" data-uid="6605d34574651">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574623">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574695">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574676">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345746dc">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345746b6">
Unlinked item
</p>
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--sharp" data-uid="6605d34574703">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574765">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574726">
Collection modifier
</h4>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574746">
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://helsingborg.se" data-uid="6605d345747a7">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574788">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345747e9">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345747ca">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574829">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457480a">
Unlinked item
</p>
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--sharp-bot" data-uid="6605d3457484f">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345748b1">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574871">
Collection modifier
</h4>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574892">
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://helsingborg.se" data-uid="6605d345748f3">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345748d3">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574936">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574916">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574976">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574958">
Unlinked item
</p>
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--sharp-top" data-uid="6605d3457499c">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345749ff">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d345749be">
Collection modifier
</h4>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345749de">
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://helsingborg.se" data-uid="6605d34574a42">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574a22">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574a84">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574a65">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574ae3">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574ac0">
Unlinked item
</p>
</div>
</div>
</div> </div>
<div class="o-grid-4">
<!-- collection.blade.php -->
<div class="c-collection c-collection--unbox" data-uid="6605d34574b0e">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574b7c">
<div class="c-collection__content">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574b34">
Collection modifier
</h4>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574b59">
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://helsingborg.se" data-uid="6605d34574bc6">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574ba2">
Linked item
</p>
</div>
</a>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574c10">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574bee">
Unlinked item
</p>
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574c63">
<div class="c-collection__content">
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574c37">
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(
[
$modifier => true,
'list' => [
['title' => 'Collection modifier', 'content' => 'This utilizes the "' . $modifier . '" and will therefore display differently.'],
['content' => 'Linked item', 'link' => "https://helsingborg.se"],
'Unlinked item',
['content' => 'Unlinked item', 'link' => false],
],
]
)
@endcollection
</div>
@endforeach
</div>
Blade component parameters
Key | Default value | Type | Available values | Description |
componentElement | div | string | - | The element type of list. |
list | false | boolean | - | A array input list, contains 'content' and 'link' array keys. |
bordered | false | boolean | - | Adds borders. |
compact | false | boolean | - | If the list should be displayed in a compressed format. |
sharp | false | boolean | - | Every single edge as sharp as hell, be careful! |
sharpBottom | false | boolean | - | Makes the bottom really sharp. Yep. |
sharpTop | false | boolean | - | Makes the top really sharp. Yep. |
unbox | false | boolean | - | Removes the border. |
id | string | - | The DOM id of the component. | |
classList | [] | array | - | Array containing wrapping classes array |
attributeList | [] | array | - | Array containing keys and values rendered as attributes |
containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |