Style Guide
Search…
Marketing
Product marketing components contain marketing or promotional content.

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
1
background-color: any color of Handy palette.
2
max-width: 100% (343px)
Copied!
2. Header (a-text-h4)
1
font-weight: bold
2
font-size: 16px
3
font-color: text-black
4
max-width: 62.39% (214px)
5
6
padding-top: 24px
7
padding-bottom: 8px
8
padding-left: 12px
Copied!
3. Text (a-text-tert)
1
font-weight: book
2
font-size: 14px
3
font-color: slate-dark
4
5
padding-bottom: 16px
6
padding-right: 8px
7
padding-left: 12px
Copied!
4. CTA (a-button-small-primary-50)
1
max-width: 50% (168px)
2
- (Can be variable width to accomodate imagery)
3
max-height: 44px
4
background-color: green-medium
5
6
font-weight: book
7
font-size: 16px
8
font-color: white
9
padding-top: 12px
10
padding-bottom: 12px
Copied!
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.