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