DSO Component Library

Tabs: Eight Tabs 

<ul class="dso-tabs dso-tabcount-8">
    <li class="active">
        <a href="#">Tab 1</a>
    </li>
    <li>
        <a href="#">Tab 2</a>
    </li>
    <li>
        <a href="#">Tab 3</a>
    </li>
    <li>
        <a href="#">Tab 4</a>
    </li>
    <li>
        <a href="#">Tab 5</a>
    </li>
    <li>
        <a href="#">Tab 6</a>
    </li>
    <li>
        <a href="#">Tab 7</a>
    </li>
    <li>
        <a href="#">Tab 8</a>
    </li>
</ul>
 
<ul class="dso-tabs dso-tabcount-{{ tabs.length }}">
  {{#each tabs }}
    <li{{#if @first }} class="active"{{/if}}>
      <a href="{{ url }}">{{ label }}</a>
    </li>
  {{/each}}
</ul>
 
__title: Eight tabs
tabs:
  - label: Tab 1
    url: '#'
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
  - label: Tab 6
    url: '#'
  - label: Tab 7
    url: '#'
  - label: Tab 8
    url: '#'

Toont navigatie-tabs. Gebaseerd op de Bootstrap nav-tabs component. Afhankelijk van het aantal tabs, loopt het getal in de class dso-tabcount-X evenredig op (lees: dso-tabcount-3, dso-tabcount-4, etc.).

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<a href="#">Tab 1</a>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Tabs

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="#">Tab 1</a>