Icon list
The icon list is a component that was created to accessibly display a list of items that each includes an icon while utilizing <li> tags. The icon list component can be placed in any sort of container component to be able to change the background color and include an overarching heading and calls to action.
When to use
- On lists of 3 or more items that include icons
When not to use
- When displaying just one or two items paired with an icon consider utilizing the icon block component
- For lists that don’t contain icons consider utilizing the simple list component
Anatomy
- Icon: choose from large (70px), medium (48px) or small (30px)
- Large icon is the default selection for this component
- Icon can be to the left of the content or stacked above
- All icon variations are available: 1 tone with white background, 1 tone with blue background, 2 tone, 2 tone with blue background
- Heading: option to change heading level and style independently, option to have a link as the heading
- Body copy: option to include descriptive or supportive text
Demos & variations
Re-size demos to see tablet and mobile behavior.
List of 3 items with icon stacked
List of 3 items with icon on the left
3 items is the maximum we want to show in a single row when placing the icon to the left of the content.
List of 4 items with icon on the left
List of 5 items with icon stacked
5 items is the maximum we want to show in a single row when stacking the icon on top of the content.
List of 6 items with icon on the left
Recommend avoiding 5 item lists when using the icon on the left layout as it causes the layout to feel unbalanced.
List of 8 items with icon stacked
Recommend avoiding 7 item lists when stacking the icon above the content as it causes the layout to feel unbalanced.
List of 8 items with icon on the left
Recommend avoiding 7 item lists when using the icon on the left layout as it causes the layout to feel unbalanced.
Headings as links
Additional styling
Place icon list in a container component to be able to control spacing, background color and add surrounding components such as an overarching header or call to action.
Heading 1 - heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.