Tabs

Tab

Our tabs are based on radio inputs. Content for a tabbed section needs to live inside the tabs container and the input id and corresponding label for need to match. The tab’s content, tab-panel, must be the consecutive sibling of the tab label.

Tabs have a specific width of 16rem and height of 4rem.

At a mobile resolution (below 768px) an active tab will collapse when clicked.

Demo

Tab 1

Tab 2

Tab 3

Markup

<div class="tabs">
  <!-- Tab 1 -->
  <input type="radio" id="tab-input-a" name="tabs" checked/>
  <label for="tab-input-a" class="tab">
    <!-- Tab label goes here! -->
  </label>
  <div class="tab-panel">
    <!-- Tab content goes here! -->
  </div>
  <!-- Tab 2 -->
  <input type="radio" id="tab-input-b" name="tabs"/>
  <label for="tab-input-b" class="tab">
    <!-- Tab label goes here! -->
  </label>
  <div class="tab-panel">
    <!-- Tab content goes here! -->
  </div>
  <!-- Tab 3 -->
  <input type="radio" id="tab-input-c" name="tabs"/>
  <label for="tab-input-c" class="tab">
    <!-- Tab label goes here! -->
  </label>
  <div class="tab-panel">
    <!-- Tab content goes here! -->
  </div>
</div>

Modifiers

Modifier †	Behavior
`tabs--flat`	Removes tab borders.
`unresponsive`	Removes responsive behavior.

† The base class is always required.