# Tabs

> Switches between sibling views of one subject, such as a member’s Profile and Articles, each at its own URL.

- Block class: `.hs-tabs`
- CSS: `components/tabs.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-1.html
- Variants: On the plate
- HTML page: https://brand.honorsociety.org/components/tabs/

## What it is

Page tabs that switch between sibling views. Slate 16px/600 labels, 48px tall. Current: navy text and a 3px navy underline. Never gold. The style hangs on `aria-current` or `aria-selected`.

## When to use

- Sibling views of one subject, each at its own URL: the Profile and Articles tabs of a member profile.
- A view with a count: add `.hs-tabs__count` after the label (“Articles 12”).
- On the plate band of the member profile, on a light band or on a navy band.

## When not to use

- To filter one list, use [Filter chips and tags](/components/chips/).
- To jump to sections of one page, use the [Anchor nav](/components/anchor-nav/).
- To move through the pages of a long list, use the [Numbered pager](/components/pager/).

## Rules

- Markup: `nav.hs-tabs` with an `aria-label`, then `ul.hs-tabs__list` > `li.hs-tabs__item` > `a.hs-tabs__tab`. Each tab is a link to its own URL.
- Mark the current tab with `aria-current="page"`. Use `aria-selected="true"` only inside a `role="tablist"`. The style hangs on the attribute, not on a class.
- The current tab is navy text with a 3px navy underline. Never gold: gold is the colour of action.
- The colours follow the ground through the `--hs-ctx-*` properties. On `.hs-band--navy` the current count pill turns white with a navy number.

## Accessibility

- The current state reaches the accessibility tree through `aria-current` or `aria-selected`.
- Contrast on white: labels slate 6.2:1, current navy 12.4:1. The current count pill is white on navy, 12.4:1.
- Each tab is a real link, so the tabs work without JavaScript.
- The row scrolls sideways on a narrow screen, never the page. Its padding leaves room for the 3px focus outline and its 3px offset.
- Transitions stop under `prefers-reduced-motion: reduce`.

## Variants

### On the plate

The colours follow the ground. Scrolls sideways on a phone.

```html
<nav class="hs-tabs" aria-label="Member pages">
  <ul class="hs-tabs__list">
    <li class="hs-tabs__item"><a class="hs-tabs__tab" href="#settled" aria-current="page">Profile</a></li>
    <li class="hs-tabs__item"><a class="hs-tabs__tab" href="#settled">Articles <span class="hs-tabs__count">12</span></a></li>
  </ul>
</nav>
```