<!-- 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">
Google
</a>
<!-- Icon -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
<span class="sr-only">Zoeken</span>
</a>
<!-- Label -->
<a href="#">
Zoeken
</a>
<!-- Iconlabel -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
zoeken
</a>
<!-- Iconbadge -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
<span class="sr-only">zoeken</span>
<span class="badge">4</span>
</a>
<!-- Iconlabelbadge -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
zoeken
<span class="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 count }}
{{> '@badge' }}
{{/if}}
</a>
/* Default */
label: Home
url: '#'
/* Download */
label: Afvalkalender 2017
url: afvalkalender.pdf
modifier: download
/* Extern */
label: Google
url: 'http://www.google.nl'
modifier: extern
/* Icon */
label: Zoeken
url: '#'
icon: fa fa-search
iconOnly: true
/* Label */
label: Zoeken
url: '#'
/* Iconlabel */
label: zoeken
url: '#'
icon: fa fa-search
/* Iconbadge */
label: zoeken
url: '#'
icon: fa fa-search
iconOnly: true
count: 4
/* Iconlabelbadge */
label: zoeken
url: '#'
icon: fa fa-search
count: 4
Externe links krijgen de class extern
en een target="_blank"
If this element contains a navigation section, it is recommended that it be marked up as a list.
<div class="container">
<!-- Start: @anchor--default -->
<a href="#">
Home
</a>
<!-- End: @anchor--default --><hr>
<!-- Start: @anchor--download -->
<a href="afvalkalender.pdf" class="download">
Afvalkalender 2017
</a>
<!-- End: @anchor--download --><hr>
<!-- Start: @anchor--extern -->
<a href="http://www.google.nl" class="extern" target="_blank">
Google
</a>
<!-- End: @anchor--extern --><hr>
<!-- Start: @anchor--icon -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
<span class="sr-only">Zoeken</span>
</a>
<!-- End: @anchor--icon --><hr>
<!-- Start: @anchor--label -->
<a href="#">
Zoeken
</a>
<!-- End: @anchor--label --><hr>
<!-- Start: @anchor--iconlabel -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
zoeken
</a>
<!-- End: @anchor--iconlabel --><hr>
<!-- Start: @anchor--iconbadge -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
<span class="sr-only">zoeken</span>
<span class="badge">4</span>
</a>
<!-- End: @anchor--iconbadge --><hr>
<!-- Start: @anchor--iconlabelbadge -->
<a href="#">
<span class="fa fa-search" aria-hidden="true"></span>
zoeken
<span class="badge">4</span>
</a>
<!-- End: @anchor--iconlabelbadge --><hr>
</div>
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="#">
Home
</a>
Check that the title element describes the document.
<title>Anchor
Check that the link text combined with programmatically determined link context identifies the purpose of the link.
<a href="#">
Home
</a>