List

Ordered or unordered lists. Note: Due to reserverd keywords, this internally is called "listing" and not "list".

Listing


  1. Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

    Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
    This is a list label for item 1

  2. Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

    Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
    This is a list label for item 2

  3. Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 12

    Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 12
    This is a list label for item 3 with a link

  4. Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 12

    Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 12
    Hey, Look I have kiddos!

    • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 12

      Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 12
      I am sub label

    • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

      Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
      I am another sub label 1

    • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

      Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
      I am another sub label 2

    • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

      Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
      Here you go, a list in a list in a list

      • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

        Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
        I am another sub sub label 1

      • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

        Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
        I am another sub sub label 2

      • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

        Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
        I am another sub sub label 3

      • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

        Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
        I am another sub sub label 4

      • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

        Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
        I am another sub sub label 5

      • Notice: Undefined index: icon in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30

        Notice: Trying to access array offset on value of type null in /tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php on line 30
        The list can go on and on and on and on.... 
<!-- listing.blade.php -->
    <ol class="c-listing" data-uid="647e3d35a5b33">

                    
                                                <li class="c-listing__item c-listing__item-0">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            This is a list label for item 1
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-1">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <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">
                            <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>12</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>12</b><br />
<!-- icon.blade.php -->
                            <span class="c-listing__label">
                                This is a list label for item 3 with a link
                                                                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-icons c-icon--size-md" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3d35a5dc8">
        <span data-nosnippet aria-hidden="true">
                            chevron_right
                    </span>
        </span>
                                                            </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!">
                            <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>12</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>12</b><br />
<!-- icon.blade.php -->
                            <span class="c-listing__label">
                                Hey, Look I have kiddos!
                                                                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-icons c-icon--size-md" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3d35a5e66">
        <span data-nosnippet aria-hidden="true">
                            chevron_right
                    </span>
        </span>
                                                            </span>
                        </a>
                        <!-- listing.blade.php -->
    <ul class="c-listing c-listing c-listing__sub" data-uid="647e3d35a5eb1">

                    
                                                <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">
                            <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>12</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>12</b><br />
<!-- icon.blade.php -->
                            <span class="c-listing__label">
                                I am sub label
                                                                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-icons c-icon--size-md" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3d35a5f39">
        <span data-nosnippet aria-hidden="true">
                            chevron_right
                    </span>
        </span>
                                                            </span>
                        </a>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-1">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub label 1
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-2">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub label 2
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-3">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <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="647e3d35a60b2">

                    
                                                <li class="c-listing__item c-listing__item-0">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub sub label 1
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-1">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub sub label 2
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-2">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub sub label 3
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-3">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub sub label 4
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-4">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <span class="c-listing__label">
                                                            I am another sub sub label 5
                                                    </span>
                         
                    </li>
                                                
                                                <li class="c-listing__item c-listing__item-5">
                        <br />
<b>Notice</b>:  Undefined index: icon in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/tmp/blade-engine-cache/36cb1f5b5b428d2ef96629e6a7ec6bdd5ff427ff.php</b> on line <b>30</b><br />
<!-- icon.blade.php -->
                        <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"
    ]
)
@endlisting

Blade 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Listing/listing.json