Components

Tabs

Tabs organize plan categories and product lines. The active state uses the live CTA red and a 4px rounded underline within a 60px tab row.

Product category tabs

Observed tab rules

Row height

60px

Indicator

4px

Active color

#EE0000

Code

<Tabs defaultValue="smartphone">
  <TabsList variant="line">
    <TabsTrigger value="smartphone">Smartphone</TabsTrigger>
    <TabsTrigger value="tablet">Tablet</TabsTrigger>
  </TabsList>
</Tabs>