List
Ordered or unordered lists. Note: Due to reserverd keywords, this internally is called "listing" and not "list".
Listing
- This is a list label for item 1
- This is a list label for item 2
- This is a list label for item 3 with a link
-
Hey, Look I have kiddos!
- I am sub label
- I am another sub label 1
- I am another sub label 2
-
Here you go, a list in a list in a list
- I am another sub sub label 1
- I am another sub sub label 2
- I am another sub sub label 3
- I am another sub sub label 4
- I am another sub sub label 5
- The list can go on and on and on and on....
<!-- listing.blade.php -->
<ol class="c-listing" data-uid="673ed1e752d9f">
<li class="c-listing__item c-listing__item-0">
<span class="c-listing__label">
This is a list label for item 1
</span>
</li>
<li class="c-listing__item c-listing__item-1">
<span class="c-listing__label">
This is a list label for item 2
</span>
</li>
<li class="c-listing__item c-listing__item-2">
<a class="c-listing__link" href="https://url-to-item.io" aria-label="This is a list label for item 3 with a link">
<span class="c-listing__label">
This is a list label for item 3 with a link
</span>
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed1e752ed9">
</span>
</a>
</li>
<li class="c-listing__item c-listing__item-3">
<a class="c-listing__link" href="https://helsingborg.se" aria-label="Hey, Look I have kiddos!">
<span class="c-listing__label">
Hey, Look I have kiddos!
</span>
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed1e752f3c">
</span>
</a>
<!-- listing.blade.php -->
<ul class="c-listing c-listing c-listing__sub" data-uid="673ed1e752f8c">
<li class="c-listing__item c-listing__item-0">
<a class="c-listing__link" href="http://styleguide.helsingborg.se/" aria-label="I am sub label">
<span class="c-listing__label">
I am sub label
</span>
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed1e752fd7">
</span>
</a>
</li>
<li class="c-listing__item c-listing__item-1">
<span class="c-listing__label">
I am another sub label 1
</span>
</li>
<li class="c-listing__item c-listing__item-2">
<span class="c-listing__label">
I am another sub label 2
</span>
</li>
<li class="c-listing__item c-listing__item-3">
<span class="c-listing__label">
Here you go, a list in a list in a list
</span>
<!-- listing.blade.php -->
<ul class="c-listing c-listing c-listing__sub" data-uid="673ed1e753050">
<li class="c-listing__item c-listing__item-0">
<span class="c-listing__label">
I am another sub sub label 1
</span>
</li>
<li class="c-listing__item c-listing__item-1">
<span class="c-listing__label">
I am another sub sub label 2
</span>
</li>
<li class="c-listing__item c-listing__item-2">
<span class="c-listing__label">
I am another sub sub label 3
</span>
</li>
<li class="c-listing__item c-listing__item-3">
<span class="c-listing__label">
I am another sub sub label 4
</span>
</li>
<li class="c-listing__item c-listing__item-4">
<span class="c-listing__label">
I am another sub sub label 5
</span>
</li>
<li class="c-listing__item c-listing__item-5">
<span class="c-listing__label">
The list can go on and on and on and on....
</span>
</li>
</ul>
</li>
</ul>
</li>
</ol>@listing(
[
'list' => [
['label' => 'This is a list label for item 1'],
['label' => 'This is a list label for item 2'],
['href' => 'https://url-to-item.io', 'label' => 'This is a list label for item 3 with a link'],
['href' => 'https://helsingborg.se',
'label' => 'Hey, Look I have kiddos!',
'childrenElementType' => "ul",
'children' => [
[
'href' => 'http://styleguide.helsingborg.se/',
'label' => 'I am sub label',
],
[
'label' => 'I am another sub label 1',
],
[
'label' => 'I am another sub label 2',
],
[
'label' => 'Here you go, a list in a list in a list',
'children' => [
['label' => 'I am another sub sub label 1'],
['label' => 'I am another sub sub label 2'],
['label' => 'I am another sub sub label 3'],
['label' => 'I am another sub sub label 4'],
['label' => 'I am another sub sub label 5'],
['label' => 'The list can go on and on and on and on....'],
]
]
]
],
],
'elementType' => "ol"
]
)
@endlistingBlade component parameters
| Key | Default value | Type | Available values | Description |
| list | [] | array | - | List of arrays containing at least 'label' but can also contain 'href' and or 'icon' according to the Icon component. |
| elementType | ul | string | - | The type of list, ul, ol. |
| icon | true | boolean | - | Can be true/false or the name of the Icon. Displays an icon at the end of links |
| padding | false | boolean | - | False or a number between 0 and 10. Sets the padding between the child elements |
| 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. |