Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Usage of Icon Lists
  • Anatomy of Icon Lists

Was this helpful?

  1. Native

Icon Lists

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

PreviousHeadersNextInput Fields

Last updated 5 years ago

Was this helpful?

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