DSO Component Library

# Link: Iconlabel

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <a href="#">
        <span class="fa fa-search" aria-hidden="true"></span>
        zoeken
    </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>

`
`

    label: zoeken
    url: '#'
    icon: fa fa-search

`

- Handle: @anchor--iconlabel
- Variants (8): Default , Download , Extern , Icon , Label , Iconlabel , Iconbadge , Iconlabelbadge
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\anchor\anchor.hbs
- References (2): @icon, @badge

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

### WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H48

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>`

### 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="#"> Home </a>`

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

Check that the title element describes the document.

`<title>Link`

### 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="#"> Home </a>`