Icon List Item (icon_list_item)

Internal: Meant to be used by 'Icon List' pattern.

ID Label Description Schema
icon_name Icon Name Will be pulled from sprite.svg.
header Header Icon list item header.
body Body Body content.
icon_attributes Icon wrapper attributes The attributes to customize the icon wrapper tag.
                        type: object
patternProperties:
    .+:
        anyOf:
            -
                type:
                    - string
                    - number
            -
                type: array
                items:
                    type:
                        - string
                        - number

                      
            id: icon_list_item
label: 'Icon List Item'
description: "Internal: Meant to be used by 'Icon List' pattern."
group: List
slots:
    icon_name:
        id: icon_name
        label: 'Icon Name'
        description: 'Will be pulled from sprite.svg.'
    header:
        id: header
        label: Header
        description: 'Icon list item header.'
    body:
        id: body
        label: Body
        description: 'Body content.'
props:
    icon_attributes:
        id: icon_attributes
        label: 'Icon wrapper attributes'
        description: 'The attributes to customize the icon wrapper tag.'
        schema:
            type: object
            patternProperties:
                .+:
                    anyOf:
                        -
                            type:
                                - string
                                - number
                        -
                            type: array
                            items:
                                type:
                                    - string
                                    - number
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': icon_list_item

          
  • <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#"></use> </svg> </div> <div class="usa-icon-list__content"> </div> </li>