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.

a-text-h3:
font-weight: bold
font-size: 20px
font-color: text-black
padding-bottom: 8px

a-text-paragraph
font-weight: book
font-size: 16px
font-color: slate-dark
line-height: 1.5

UI Header

UI Header lockups are typically used in modals and half sheets.

a-text-h2:
font-weight: bold
font-size: 20px
font-color: text-black
padding-bottom (halfsheets): 16px
padding-bottom (modals): 24px

a-text-paragraph:
font-weight: book
font-size: 16px
font-color: slate-dark
line-height: 1.5

Content Subheader

Content subheader lockups are used in content pages that need further separation/hierarchy.

a-text-h4:
font-weight: bold
font-size: 16px
font-color: text-black
padding-bottom: 8px

a-text-paragraph:
font-weight: book
font-size: 16px
font-color: text-black
line-height: 1.5

Picker Text

Picker Text lockups are used in radio or checkbox pickers.

a-text-paragraph:
font-weight: book
font-size: 16px
font-color: text-black
padding-bottom: 8px

a-text-paragraph-slate-dark:
font-weight: book
font-size: 16px
font-color: slate-dark