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.

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

1. Label Icon is used for the label icon.

Font Awesome (a-icon-line)