Style Guide
Search…
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!