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.
Last modified 2yr ago
Copy link