Style Guide
Search…
Handy Style Guide
Brand Guidelines
Native
Action 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
Powered By
GitBook
Native Text Combinations
Text combinations involve stacked text styles. These are built with hierarchy and legibility in mind.
Types of Text Combinations
​
1. Content Header
​
​
2. UI Header
​
​
3. Content Subheader
​
​
4. Picker Text
​
Content Header
Content Header lockups are typically used at the top of a page. Can be found in booking flows, general content pages.
1
a-text-h3:
2
font-weight: bold
3
font-size: 20px
4
font-color: text-black
5
padding-bottom: 8px
6
​
7
a-text-paragraph
8
font-weight: book
9
font-size: 16px
10
font-color: slate-dark
11
line-height: 1.5
Copied!
UI Header
UI Header lockups are typically used in modals and half sheets.
1
a-text-h2:
2
font-weight: bold
3
font-size: 20px
4
font-color: text-black
5
padding-bottom (halfsheets): 16px
6
padding-bottom (modals): 24px
7
​
8
a-text-paragraph:
9
font-weight: book
10
font-size: 16px
11
font-color: slate-dark
12
line-height: 1.5
Copied!
Content Subheader
Content subheader lockups are used in content pages that need further separation/hierarchy.
1
a-text-h4:
2
font-weight: bold
3
font-size: 16px
4
font-color: text-black
5
padding-bottom: 8px
6
​
7
a-text-paragraph:
8
font-weight: book
9
font-size: 16px
10
font-color: text-black
11
line-height: 1.5
Copied!
Picker Text
Picker Text lockups are used in radio or checkbox pickers.
1
a-text-paragraph:
2
font-weight: book
3
font-size: 16px
4
font-color: text-black
5
padding-bottom: 8px
6
​
7
a-text-paragraph-slate-dark:
8
font-weight: book
9
font-size: 16px
10
font-color: slate-dark
Copied!
Previous
Typography - Native
Next
Web
Last modified
2yr ago
Copy link
Contents
Types of Text Combinations
Content Header
UI Header
Content Subheader
Picker Text