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">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>

{
  "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>"
    }
  ]
}