<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">Primary materials</a></li>
<li><a class="c-tabs__control " href="#tab-2">Pharmaceuticals</a></li>
<li><a class="c-tabs__control " href="#tab-3">Advanced materials</a></li>
<li><a class="c-tabs__control " href="#tab-4">Academia</a></li>
<li><a class="c-tabs__control " href="#tab-5">Connected world</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">Primary materials</h2>
</div>
<div id="tab-2" class="c-tab ">
<h2 class="c-h c-h--step-3">Pharmaceuticals</h2>
</div>
<div id="tab-3" class="c-tab ">
<h2 class="c-h c-h--step-3">Advanced materials</h2>
</div>
<div id="tab-4" class="c-tab ">
<h2 class="c-h c-h--step-3">Academia</h2>
</div>
<div id="tab-5" class="c-tab ">
<h2 class="c-h c-h--step-3">Connected world</h2>
</div>
</div>
</div>
Tabs
{
"type": "anchor",
"tabs": [
{
"id": "tab-1",
"label": "Primary materials",
"content": "<h2 class=\"c-h c-h--step-3\">Primary materials</h2>",
"active": true
},
{
"id": "tab-2",
"label": "Pharmaceuticals",
"content": "<h2 class=\"c-h c-h--step-3\">Pharmaceuticals</h2>"
},
{
"id": "tab-3",
"label": "Advanced materials",
"content": "<h2 class=\"c-h c-h--step-3\">Advanced materials</h2>"
},
{
"id": "tab-4",
"label": "Academia",
"content": "<h2 class=\"c-h c-h--step-3\">Academia</h2>"
},
{
"id": "tab-5",
"label": "Connected world",
"content": "<h2 class=\"c-h c-h--step-3\">Connected world</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 | Description |
---|---|
c-tabs--flex | Instead of 'block', display the active tabs as 'flex' |
c-tabs--persist | Add a URL fragment (aka hashtag) to the browser URL |
Utilities
Name | Description |
---|---|
u-scroll-shadows--h | When the tab row is too wide for the screen, scroll indicators are displayed |