DSO Component Library

Navs 

<!-- Tabs -->
<ul class="nav nav-tabs">
    <li role="presentation" class="active">
        <a href="#">
        Deze locatie
      </a>
    </li>
    <li role="presentation">
        <a href="#">
        Regels
      </a>
    </li>
    <li role="presentation">
        <a href="#">
        Overige informatie
      </a>
    </li>
</ul>


<!-- Pills -->
<ul class="nav nav-pills">
    <li role="presentation" class="active">
        <a href="#">
        Home
      </a>
    </li>
    <li role="presentation">
        <a href="#">
        Profiel
      </a>
    </li>
    <li role="presentation">
        <a href="#">
        Berichten
          <span class="badge">15</span>
      </a>
    </li>
</ul>


<ul class="nav nav-{{ modifier }}">
  {{#each items }}
    <li role="presentation" {{#if active }}class="active"{{/if}}>
      <a href="#">
        {{ label }}
        {{#if count }}
          {{> '@badge' }}
        {{/if}}
      </a>
    </li>
  {{/each}}
</ul>
 
/* Tabs */
modifier: tabs
items:
  - label: Deze locatie
    active: true
  - label: Regels
  - label: Overige informatie



/* Pills */
modifier: pills
items:
  - label: Home
    active: true
  - label: Profiel
  - label: Berichten
    count: 15

There are no notes for this item.

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="#"> Deze locatie </a>

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

Check that the title element describes the document.

<title>Navs

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="#"> Deze locatie </a>