Anchor

Externe links krijgen de class extern en een target="_blank" en rel="noopener noreferrer". In de link staat een span.sr-only met de tekst ‘opent in nieuw venster’.

<!-- Default -->
<a href="#">Home</a>

<!-- Download -->
<a href="afvalkalender.pdf" class="download">Afvalkalender 2017</a>

<!-- Extern -->
<a href="http://www.google.nl" class="extern" target="_blank" rel="noopener noreferrer">Een link naar Google<span class="sr-only">(opent in nieuw venster)</span></a>

<!-- Icon -->
<a href="#" title="Zoeken">Zoeken <svg class="di di-search">
        <use href="../../dso-icons.svg#search" />
    </svg></a>

<!-- Label -->
<a href="#">Zoeken</a>

<!-- Iconlabel -->
<a href="#"><svg class="di di-search">
        <use href="../../dso-icons.svg#search" />
    </svg> zoeken</a>

<!-- Iconbadge -->
<a href="#" title="zoeken">zoeken <svg class="di di-search">
        <use href="../../dso-icons.svg#search" />
    </svg>
    <span class="dso-badge">4</span>
</a>

<!-- Iconlabelbadge -->
<a href="#"><svg class="di di-search">
        <use href="../../dso-icons.svg#search" />
    </svg> zoeken
    <span class="dso-badge">4</span>
</a>

<a href="{{ url }}"{% if iconOnly %} title="{{ label }}"{% endif %} {{ className(modifier) }} {% if modifier and modifier.indexOf('extern') > -1 %}target="_blank" rel="noopener noreferrer"{% endif %}>
  {%- if icon and not iconOnly %}
    {%- render '@icon', {icon: icon} -%}
    {%- if not modifier or modifier.indexOf('btn') === -1 %} {% endif -%}
  {%- endif -%}

  {%- if modifier and modifier.indexOf('btn') > -1 -%}
    <span {{ className([iconOnly, 'sr-only']) }}>{{ label }}</span>
  {%- else -%}
    {{ label }}
  {%- endif -%}

  {%- if modifier and modifier.indexOf('extern') > -1 -%}
    <span class="sr-only">(opent in nieuw venster)</span>
  {%- endif -%}

  {%- if iconAfter or iconOnly %}
    {%- if not modifier or modifier.indexOf('btn') === -1 %} {% endif -%}
    {%- render '@icon', {icon: iconAfter or icon} %}
  {%- endif -%}

  {%- if badge %}
    {% render '@badge', badge %}
  {%- endif -%}
</a>

/* Default */
__title: default
label: Home
url: '#'

/* Download */
__title: download
label: Afvalkalender 2017
url: afvalkalender.pdf
modifier: download

/* Extern */
__title: extern
label: Een link naar Google
url: 'http://www.google.nl'
modifier: extern

/* Icon */
__title: icon
label: Zoeken
url: '#'
icon: search
iconOnly: true

/* Label */
__title: label
label: Zoeken
url: '#'

/* Iconlabel */
__title: icon label
label: zoeken
url: '#'
icon: search

/* Iconbadge */
__title: icon badge
label: zoeken
url: '#'
icon: search
iconOnly: true
badge:
  label: 4

/* Iconlabelbadge */
__title: icon label badge
label: zoeken
url: '#'
icon: search
badge:
  label: 4