Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User 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
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Types of Text Combinations
  • Content Header
  • UI Header
  • Content Subheader
  • Picker Text

Was this helpful?

  1. Native
  2. Typography - Native

Native Text Combinations

Text combinations involve stacked text styles. These are built with hierarchy and legibility in mind.

PreviousTypography - NativeNextWeb

Last updated 5 years ago

Was this helpful?

Types of Text Combinations

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

2. UI Header
3. Content Subheader
4. Picker Text
1. Content Header