Patterns

Tabs

As the amount of information we provide to our customers grows, we continue to add additional sections within our reports and listeners, which need to be easily accessible. Tabs allow the user to quickly navigate amongst the different sections.

Visual best practicesCopy URL

  • Active Tab

    • Font size: Size 200
    • Font weight: 600
    • Font color: Aqua 600
    • Padding: Space size 400
    • Border bottom
      • Border color: Aqua 600
      • Border width: 2px
  • Inactive Tab

    • Font size: Size 200
    • Font weight: 600
    • Font color: Neutral 800
    • Padding: Space size 400
    • Border bottom
      • Border color: Neutral 300
      • Border width: 1px