<!-- 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">
Een link naar Google
</a>
<!-- Icon -->
<a href="#">
<span class="fas fa-search" aria-hidden="true"></span>
<span class="sr-only">Zoeken</span>
</a>
<!-- Label -->
<a href="#">
Zoeken
</a>
<!-- Iconlabel -->
<a href="#">
<span class="fas fa-search" aria-hidden="true"></span>
zoeken
</a>
<!-- Iconbadge -->
<a href="#">
<span class="fas fa-search" aria-hidden="true"></span>
<span class="sr-only">zoeken</span>
<span class="dso-badge">4</span>
</a>
<!-- Iconlabelbadge -->
<a href="#">
<span class="fas fa-search" aria-hidden="true"></span>
zoeken
<span class="dso-badge">4</span>
</a>
<a href="{{ url }}" {{{ifattr 'class' modifier }}} {{{ifattr 'target' modifier 'extern' '_blank' }}}>
{{#if icon }}
{{> '@icon' icon=icon }}
{{/if}}
{{#if iconOnly }}
<span class="sr-only">{{ label }}</span>
{{else}}
{{ label }}
{{/if}}
{{#if badge }}
{{> '@badge' badge }}
{{/if}}
</a>
/* Default */
label: Home
url: '#'
/* Download */
label: Afvalkalender 2017
url: afvalkalender.pdf
modifier: download
/* Extern */
label: Een link naar Google
url: 'http://www.google.nl'
modifier: extern
/* Icon */
label: Zoeken
url: '#'
icon: fas fa-search
iconOnly: true
/* Label */
label: Zoeken
url: '#'
/* Iconlabel */
label: zoeken
url: '#'
icon: fas fa-search
/* Iconbadge */
label: zoeken
url: '#'
icon: fas fa-search
iconOnly: true
badge:
label: 4
/* Iconlabelbadge */
label: zoeken
url: '#'
icon: fas fa-search
badge:
label: 4
Externe links krijgen de class extern
en een target="_blank"