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

<!-- listing.blade.php -->
    <ol class="c-listing" data-uid="69f0d121dfabd" 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 -->
    <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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d121dfcb0" data-component="icon">
                    </span>
                                                    </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 -->
    <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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d121dfd43" data-component="icon">
                    </span>
                                                    </a>
                        <!-- listing.blade.php -->
    <ul class="c-listing c-listing c-listing__sub" data-uid="69f0d121dfd9a" 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 -->
    <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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d121dfddf" data-component="icon">
                    </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="69f0d121dfe70" 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....

<!-- listing.blade.php -->
    <ol class="c-listing c-listing--padding-4" data-uid="69f0d121e02aa" 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 -->
    <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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d121e0337" data-component="icon">
                    </span>
                                                    </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 -->
    <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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d121e0395" data-component="icon">
                    </span>
                                                    </a>
                        <!-- listing.blade.php -->
    <ul class="c-listing c-listing c-listing__sub" data-uid="69f0d121e03f3" 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 -->
    <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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d121e042c" data-component="icon">
                    </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="69f0d121e04a7" 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	Description
list	[]	List of arrays containing at least 'label' but can also contain 'href' and or 'icon' according to the Icon component.
elementType	ul	The type of list, ul, ol.
icon	true	Can be true/false or the name of the Icon. Displays an icon at the end of links
padding	false	False or a number between 0 and 10. Sets the padding between the child elements

CSS API

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

Similar components

Icon Section Collection Pagination