Style Guide
Search…
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.
1
font-awesome
2
font-size: 16px
3
font-weight: light
4
font-color: slate-dark
5
padding-left: 16px
6
padding-right: 8px
7
padding-top: 16px
8
padding-bottom: 16px
9
10
font-awesome codes:
11
[home-alt] - used for Home Cleaning professionals
12
[tools] - used for Handyman professionals
13
[lightbulb] - used for Electrician professionals
14
[map-marker-alt] - used for location
15
[badge-check] - used for years on platform
16
[user-shield] - used for background-check
Copied!
2. Text (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: slate-dark
4
padding-left: 8px
5
padding-right: 16px
6
padding-top: 16px
7
padding-bottom: 16px
Copied!
Last modified 2yr ago