Menu

Tabs - Scroll shadows

<div class="mp c-tabs c-tabs--anchor">
<nav class="c-tabs__controls u-scroll-shadows--h">
<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">
<div class="o-prose"><p><strong>Primary materials</strong> lorem ipsum a maecenas parturient ipsum at nisl id nisi a imperdiet platea dui venenatis sit euismod.</p></div>
</div>
<div id="tab-2" class="c-tab ">
<div class="o-prose"><p><strong>Pharmaceuticals</strong> lorem ipsum parturient a ullamcorper nisl parturient cum ullamcorper augue arcu a feugiat mus imperdiet curae suspendisse rhoncus sit id parturient cubilia adipiscing ad ullamcorper aliquet mi.</p></div>
</div>
<div id="tab-3" class="c-tab ">
<div class="o-prose"><p><strong>Advanced materials</strong> lorem ipsum fringilla eros cum facilisis id ullamcorper pretium sociosqu a eu vestibulum cras vivamus inceptos sed potenti a.</p></div>
</div>
<div id="tab-4" class="c-tab ">
<div class="o-prose"><p><strong>Academia</strong> lorem ipsum augue et vestibulum ut luctus ut vestibulum proin eros mauris sodales penatibus euismod a sem eleifend suspendisse litora fringilla habitasse suspendisse.</p></div>
</div>
<div id="tab-5" class="c-tab ">
<div class="o-prose"><p><strong>Connected world</strong> lorem ipsum eros a parturient libero ullamcorper natoque vestibulum turpis egestas suspendisse parturient et adipiscing arcu a.</p></div>
</div>
</div>
</div>
{
"type": "anchor",
"tabs": [
{
"id": "tab-1",
"label": "Primary materials",
"content": "<strong>Primary materials</strong> lorem ipsum a maecenas parturient ipsum at nisl id nisi a imperdiet platea dui venenatis sit euismod.",
"active": true
},
{
"id": "tab-2",
"label": "Pharmaceuticals",
"content": "<strong>Pharmaceuticals</strong> lorem ipsum parturient a ullamcorper nisl parturient cum ullamcorper augue arcu a feugiat mus imperdiet curae suspendisse rhoncus sit id parturient cubilia adipiscing ad ullamcorper aliquet mi."
},
{
"id": "tab-3",
"label": "Advanced materials",
"content": "<strong>Advanced materials</strong> lorem ipsum fringilla eros cum facilisis id ullamcorper pretium sociosqu a eu vestibulum cras vivamus inceptos sed potenti a."
},
{
"id": "tab-4",
"label": "Academia",
"content": "<strong>Academia</strong> lorem ipsum augue et vestibulum ut luctus ut vestibulum proin eros mauris sodales penatibus euismod a sem eleifend suspendisse litora fringilla habitasse suspendisse."
},
{
"id": "tab-5",
"label": "Connected world",
"content": "<strong>Connected world</strong> lorem ipsum eros a parturient libero ullamcorper natoque vestibulum turpis egestas suspendisse parturient et adipiscing arcu a."
}
],
"shadows": true
}

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