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.