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 Marketing Cards
  • Anatomy of Marketing Cards

Was this helpful?

  1. Native

Marketing

Product marketing components contain marketing or promotional content.

PreviousInput FieldsNextMessage Bubbles

Last updated 5 years ago

Was this helpful?

Usage of Marketing Cards

Marketing components are used to highlight different feature of the app or advertise a promotion.

Anatomy of Marketing Cards

Product Marketing components are used to promote different features of the app or a promotional offer, such as Pro Search or one-time cleaning bookings.

1. Container

background-color: any color of Handy palette.
max-width: 100% (343px)

2. Header (a-text-h4)

font-weight: bold
font-size: 16px
font-color: text-black
max-width: 62.39% (214px)

padding-top: 24px
padding-bottom: 8px
padding-left: 12px

3. Text (a-text-tert)

font-weight: book
font-size: 14px
font-color: slate-dark

padding-bottom: 16px
padding-right: 8px
padding-left: 12px

4. CTA (a-button-small-primary-50)

max-width:  50% (168px)
    - (Can be variable width to accomodate imagery)
max-height: 44px
background-color: green-medium

font-weight: book
font-size: 16px
font-color: white
padding-top: 12px
padding-bottom: 12px

5. Image Image must be included to give the card visual interest. No specified width but cannot exceed past the container or bleed into the text.