Listing

The Listing component provides a reusable pattern for listing in the interface.

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....

<ol class="c-listing" data-component="listing">
  <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 -->
     </a>
  </li>
  <li class="c-listing__item c-listing__item-3">
    <a class="c-listing__link" href="https://getmunicipio.com" aria-label="Hey, Look I have kiddos!"><span class="c-listing__label">Hey, Look I have kiddos!</span> <!-- icon.blade.php --></a> 
    <!-- listing.blade.php -->
    <ul class="c-listing c-listing c-listing__sub" data-component="listing">
      <li class="c-listing__item c-listing__item-0">
        <a class="c-listing__link" href="http://styleguide.getmunicipio.com/" aria-label="I am sub label"><span class="c-listing__label">I am sub label</span> <!-- icon.blade.php -->
         </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-component="listing">
          <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://getmunicipio.com',
            'label' => 'Hey, Look I have kiddos!',
            'childrenElementType' => "ul",
            'children' => [
                [
                    'href' => 'http://styleguide.getmunicipio.com/',
                    '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

Padding

Listing with padding

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....

<ol class="c-listing c-listing--padding-4" data-component="listing">
  <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 -->
     </a>
  </li>
  <li class="c-listing__item c-listing__item-3">
    <a class="c-listing__link" href="https://getmunicipio.com" aria-label="Hey, Look I have kiddos!"><span class="c-listing__label">Hey, Look I have kiddos!</span> <!-- icon.blade.php --></a> 
    <!-- listing.blade.php -->
    <ul class="c-listing c-listing c-listing__sub" data-component="listing">
      <li class="c-listing__item c-listing__item-0">
        <a class="c-listing__link" href="http://styleguide.getmunicipio.com/" aria-label="I am sub label"><span class="c-listing__label">I am sub label</span> <!-- icon.blade.php -->
         </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-component="listing">
          <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(
    [
    'padding' => 4,
    '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://getmunicipio.com',
            'label' => 'Hey, Look I have kiddos!',
            'childrenElementType' => "ul",
            'children' => [
                [
                    'href' => 'http://styleguide.getmunicipio.com/',
                    '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

API

Parameter	Default	Type	Description
list	[]	array	-
elementType	ul	string	-
icon	true	boolean	-
padding	false	boolean	-

CSS API

Variable	Default	Type	Values	Description
--c-listing--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-listing--base	var(--base)	range	-	Main unit that drives radius and spacing scales.

Similar components

Icon Section Collection Pagination