DSO Toolkit | Component Library

Link 

<!-- 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="#" 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 }}"{{/if}} {{{ifattr 'class' modifier }}} {{{ifattr 'target' modifier 'extern' '_blank' }}}>
  {{~#if (and icon (not iconOnly)) }}{{> '@icon' icon=icon }}{{#if (not (in (or modifier '') 'btn'))}} {{/if}}{{/if}}
  {{~#if (in (or modifier '') 'btn')~}}
    <span{{#if iconOnly }} class="sr-only"{{/if}}>{{ label }}</span>
  {{~else~}}
    {{label}}
  {{~/if~}}
  {{~#if (or iconAfter iconOnly) }}{{#if (not (in (or modifier '') 'btn'))}} {{/if}}{{> '@icon' icon=(or iconAfter icon) }}{{/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: search
iconOnly: true



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



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



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



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

Externe links krijgen de class extern en een target="_blank"