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 Review
  • Anatomy of Reviews (reviews)

Was this helpful?

  1. Native

Reviews

Review components hold customer feedback.

PreviousPickersNextSkeleton Loading States

Last updated 5 years ago

Was this helpful?

Usage of Review

Review components will be used in pro profiles and will contain feedback from customers.

Anatomy of Reviews (reviews)

Review components stack vertically.

1. Star Rating

Star:
font: font-awesome-regular [star]
font-weight: regular
color: yellow-medium
padding-left: 16px
padding-right: 8px
padding-top: 24px
padding-bottom: 4px

Dot Size:
max-width: 8px
max-height: 8px

2. Date (a-text-h4)

font-size: 16px
font-weight: bold
font-color: text-black

3. Review (a-text-paragraph)

font-size: 16px
font-weight: book
font-color: text-black
line-height: 1.5
padding-bottom: 24px

4. Divider Line (a-divider-light) For easy viewing and consumption, reviews have divider lines.

a-divider-light:
max-width: 343px
max-height: 1px
color: slate-light
padding-top: 24px