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

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.

Tabs Flat

Adding tabs--flat to your tabs to change the styles. Flat adds the border below rather than a traditional tab look.

Demo

Markup

<div class="tabs tabs--flat">
  <!-- Tab 1 -->
  <input type="radio" id="tab-input-flat-a" name="tabs-flat" checked/>
  <label for="tab-input-flat-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-flat-b" name="tabs-flat"/>
  <label for="tab-input-flat-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-flat-c" name="tabs-flat"/>
  <label for="tab-input-flat-c" class="tab">
    <!-- Tab label goes here! -->
  </label>
  <div class="tab-panel">
    <!-- Tab content goes here! -->
  </div>
</div>

Unresponsive

Adding the class unresponsive to your tabs will remove the mobile styles. Scale the page down to see the example.

Demo

Markup

<div class="tabs tabs--flat unresponsive">
  <!-- Tab 1 -->
  <input type="radio" id="tab-input-unresponsive-a" name="tabs-unresponsive" checked/>
  <label for="tab-input-unresponsive-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-unresponsive-b" name="tabs-unresponsive"/>
  <label for="tab-input-unresponsive-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-unresponsive-c" name="tabs-unresponsive"/>
  <label for="tab-input-unresponsive-c" class="tab">
    <!-- Tab label goes here! -->
  </label>
  <div class="tab-panel">
    <!-- Tab content goes here! -->
  </div>
</div>