Icon Lists

Icon lists add visual interest and quick visual cues to longer blocks of text.

Usage of Icon Lists

Icon lists are unordered lists with a line icon component placed to the left.

Anatomy of Icon Lists

Icon lists use iconography to give the most accurate visual representation of the information on the list.

1. Label Icon Font Awesome (a-icon-line) is used for the label icon.

font-awesome
font-size: 16px
font-weight: light
font-color: slate-dark
padding-left: 16px
padding-right: 8px
padding-top: 16px
padding-bottom: 16px

font-awesome codes:
[home-alt] - used for Home Cleaning professionals
[tools] - used for Handyman professionals
[lightbulb] - used for Electrician professionals
[map-marker-alt] - used for location
[badge-check] - used for years on platform
[user-shield] - used for background-check

2. Text (a-text-paragraph)

font-weight: book
font-size: 16px
font-color: slate-dark
padding-left: 8px
padding-right: 16px
padding-top: 16px
padding-bottom: 16px