Menu

Tabs

<div class="mp c-tabs c-tabs--anchor">
<nav class="c-tabs__controls">
<ul class="c-tabs__controls-list">
<li><a class="c-tabs__control c-tabs__control--active" href="#tab-1">Tab 1</a></li>
<li><a class="c-tabs__control " href="#tab-2">Tab 2</a></li>
</ul>
</nav>
<div class="c-tabs__content">
<div id="tab-1" class="c-tab c-tab--active">
<h2 class="c-h c-h--step-3">Tab 1</h2>
</div>
<div id="tab-2" class="c-tab ">
<h2 class="c-h c-h--step-3">Tab 2</h2>
</div>
</div>
</div>
{
"type": "anchor",
"tabs": [
{
"id": "tab-1",
"label": "Tab 1",
"content": "<h2 class=\"c-h c-h--step-3\">Tab 1</h2>",
"active": true
},
{
"id": "tab-2",
"label": "Tab 2",
"content": "<h2 class=\"c-h c-h--step-3\">Tab 2</h2>"
}
]
}

Props

Name Type Description
type string The type of tab, eg: "anchor"
tabs tab[] An array of tabs

tab

Name Type Description
id string Unique ID for each tab
label string Label for the tab control
content html HTML for the tab content
active bool Is this tab active?

CSS modifiers

Name Type Description
c-tabs--flex Instead of 'block', display the active tabs as 'flex'