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>