Tabs

Tabs are an easy way to organize content by grouping similar information on one page without having to navigate away from that page.

Tabs are used on certain page templates to break up information all related to the same topic. There should be no more than 6 tabs on one page.

Tab labels act as H2s and do not get displayed in the content area of the tab. The tab can have headings starting with H3s and beyond. Ensure the tabs are coded as H2s.

Having a URL that gets set for each tab and automatically opens that tab when visited will help users dive directly into what they’re looking for.

Tab labels

The links for each tab automatically size to fit the text content, meaning various tab links will have different widths. The states of the tab links mimic Primary Buttons. The line below the tab buttons should stretch the entire width of the browser.

Responsive

On small browser sizes, the styling is minimal, and the tab links wrap onto a second line if necessary. A solid dark border separates the tab content from anything before it.

Specs

• Tab styles

  • Desktop tab styles mimic primary buttons

  • Desktop tabs have a bottom border-radius of 0

  • Desktop Active tab has a white border bottom so it looks seamless with the content

  • Tab padding: 4px (mobile), ~ 24px (desktop)

  • Tab hover outline and text color: dark accent

  • Mobile active tab background color: gray 5

  • Mobile active tab text color: gray 100

• Tab content styles

  • Padding: 8px 15px (mobile), 32px 16px (desktop)

  • Space between tabs and copy : 24px (mobile), 40px (desktop)

  • Copy font size: body copy medium

Inspect tabs in brand styles in Figma

Change log

02/11/21 - Changed the font size on tab content from 'body copy small' to 'body copy medium'

02/16/21 - Changed images and content to denote that the clickable tabs act as H2s and that tab titles do not show up in the content area of the tag.