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
  • Usage of Tabs
  • Anatomy of Tabs

Was this helpful?

  1. Native

Tabs

Tabs allow users to switch between different views.

PreviousSkeleton Loading StatesNextTypography - Native

Last updated 5 years ago

Was this helpful?

Usage of Tabs

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Anatomy of Tabs

Tabs allow users to view content without having to navigate away from that page. Good way to organize related content on a page.

1. Selected (a-text-h4)

font-weight: bold
font-size: 16px
font-color: text-black

padding-top: 16px

2. Unselected

font-weight: book
font-size: 16px
font-color: slate-dark

padding-top: 16px
padding-bottom: 18px

3. Indicator

color: blue-medium
max-width: 50%
max-height: 2px

padding-top: 16px

4. Divider Lines

a-divider-dark:
max-width: 375px (100%)
max-height: 1px
color: slate-medium-light

Top:
padding-bottom: 16px

Bottom:
padding-top: 17px