Icon List (icon_list)

An icon list reinforces the meaning and visibility of individual list items with a leading icon.

🔗 External documentation.

ID Label Description Schema
items Items Icon list items.
            id: icon_list
label: 'Icon List'
description: 'An icon list reinforces the meaning and visibility of individual list items with a leading icon.'
group: List
homepage: 'https://designsystem.digital.gov/components/icon-list/'
slots:
    items:
        id: items
        label: Items
        description: 'Icon list items.'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': icon_list
            items:
                -
                    '@component': icon_list_item
                    header: 'Let the sun shine.'
                    body:
                        -
                            '@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
                    icon_name: check_circle
                -
                    '@component': icon_list_item
                    header: 'Adjust your schedule.'
                    body:
                        -
                            '@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
                    icon_name: check_circle
                -
                    '@component': icon_list_item
                    header: 'Fill it up.'
                    icon_name: cancel

          
  1. Let the sun shine.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  2. Adjust your schedule.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  3. Fill it up.

<ol class="usa-icon-list"> <li class="usa-icon-list__item"> <div class="usa-icon-list__icon"> <svg aria-hidden="true" class="usa-icon" focusable="false" role="img"> <use xlink:href="&#x2f;assets&#x2f;images&#x2f;sprite.svg#check_circle"></use> </svg> </div> <div class="usa-icon-list__content"> <h3 class="usa-icon-list__title">Let the sun shine.</h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p></div> </div> </li> <li class="usa-icon-list__item"> <div class="usa-icon-list__icon"> <svg aria-hidden="true" class="usa-icon" focusable="false" role="img"> <use xlink:href="&#x2f;assets&#x2f;images&#x2f;sprite.svg#check_circle"></use> </svg> </div> <div class="usa-icon-list__content"> <h3 class="usa-icon-list__title">Adjust your schedule.</h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p></div> </div> </li> <li class="usa-icon-list__item"> <div class="usa-icon-list__icon"> <svg aria-hidden="true" class="usa-icon" focusable="false" role="img"> <use xlink:href="&#x2f;assets&#x2f;images&#x2f;sprite.svg#cancel"></use> </svg> </div> <div class="usa-icon-list__content"> <h3 class="usa-icon-list__title">Fill it up.</h3> </div> </li> </ol>