List

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

Listing

  1. This is a list label for item 1
  2. This is a list label for item 2
  3. This is a list label for item 3 with a link arrow_forward
  4. Hey, Look I have kiddos! arrow_forward
    • I am sub label arrow_forward
    • 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....

<!-- pagination.blade.php -->
  <ol id="61efabe3bc1e4" class="c-listing" data-uid="61efabe3bc1dd">
     
      
        
                <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 href="https://url-to-item.io" aria-label="This is a list label for item 3 with a link" class="c-listing__link">
            <span class="c-listing__label">
              This is a list label for item 3 with a link
            </span>

            <!-- icon.blade.php -->
    <i id="61efabe3bcad0" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efabe3bcaca">
                    arrow_forward
            </i>
          </a>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-3">
          <a href="https://helsingborg.se" aria-label="Hey, Look I have kiddos!" class="c-listing__link">
            <span class="c-listing__label">
              Hey, Look I have kiddos!
            </span>

            <!-- icon.blade.php -->
    <i id="61efabe3bcb79" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efabe3bcb75">
                    arrow_forward
            </i>
          </a>
          <!-- pagination.blade.php -->
  <ul id="61efabe3bcbf6" class="c-listing c-listing c-listing__sub" data-uid="61efabe3bcbf2">
     
      
        
                <li class="c-listing__item c-listing__item-0">
          <a href="http://styleguide.helsingborg.se/" aria-label="I am sub label" class="c-listing__link">
            <span class="c-listing__label">
              I am sub label
            </span>

            <!-- icon.blade.php -->
    <i id="61efabe3bcc92" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efabe3bcc8d">
                    arrow_forward
            </i>
          </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>
          <!-- pagination.blade.php -->
  <ul id="61efabe3bcdb0" class="c-listing c-listing c-listing__sub" data-uid="61efabe3bcdad">
     
      
        
                <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"
    ]
)
@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'.
elementType ul string - The type of list, ul, ol.
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