DSO Component Library

# Link

WIP

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

`

    <div class="anchor-example">
        <h2 style="margin-bottom: 24px">Link</h2>
        <div class="row">
            <div class="col-md-3">
                <a href="#">
              Link voorbeeld
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="extern" target="_blank">
              Externe link
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="download">
              Download link
          </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <label>Voorbeeld in lopende tekst:</label>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nullam dictum felis eu pede <a class="extern" href="#">
            mollis pretium</a>. Integer tincidunt. Cras dapibus. Vivamus <a class="extern" href="#">elementum</a> semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus
                    in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper <a class="download" href="#">ultricies nisi</a>.
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 example-big-font">
                <a href="#">
              Link voorbeeld
          </a>
            </div>
            <div class="col-md-3 example-big-font">
                <a href="#" class="extern" target="_blank">
              Externe link
          </a>
            </div>
            <div class="col-md-3 example-big-font">
                <a href="#" class="download">
              Download link
          </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 example-big-font">
                <label>Voorbeeld in lopende tekst:</label>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nullam dictum felis eu pede <a class="extern" href="#">
            mollis pretium</a>. Integer tincidunt. Cras dapibus. Vivamus <a class="extern" href="#">elementum</a> semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus
                    in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper <a class="download" href="#">ultricies nisi</a>.
                </p>
            </div>
        </div>

        <h2 style="margin-bottom: 24px">Gebruik in buttons</h2>
        <div class="row">
            <div class="col-md-3">
                <a href="#" class="btn btn-primary">
              Anchor
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-primary download">
              Downloaden
          </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <a href="#" class="btn btn-default">
              Anchor
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-default download">
              Downloaden
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-default extern">
              Lees verder
          </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <a href="#" class="btn btn-link">
              <span class="icon fa fa-angle-right" aria-hidden="true"></span>
              Anchor
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-link download">
              <span class="icon fa fa-angle-right" aria-hidden="true"></span>
              Downloaden
          </a>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-link extern">
              <span class="icon fa fa-angle-right" aria-hidden="true"></span>
              Lees verder
          </a>
            </div>
        </div>
    </div>

`
`

    <div class="anchor-example">
      <h2 style="margin-bottom: 24px">Link</h2>
      <div class="row">
        <div class="col-md-3">
          {{> '@anchor' label='Link voorbeeld' url="#" }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Externe link' url="#" modifier="extern" }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Download link' url="#" modifier="download" }}
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <label>Voorbeeld in lopende tekst:</label>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit. Aenean commodo ligula eget dolor. Nullam dictum
            felis eu pede <a class="extern" href="#">
            mollis pretium</a>. Integer tincidunt. Cras dapibus.
            Vivamus <a class="extern" href="#">elementum</a> semper nisi. Aenean vulputate
            eleifend tellus. Aenean leo ligula, porttitor eu,
            consequat vitae, eleifend ac, enim. Aliquam lorem ante,
            dapibus in, viverra quis, feugiat a, tellus. Phasellus
            viverra nulla ut metus varius laoreet. Quisque rutrum.
            Aenean imperdiet. Etiam ultricies nisi vel augue.
            Curabitur ullamcorper <a class="download" href="#">ultricies nisi</a>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-3 example-big-font">
          {{> '@anchor' label='Link voorbeeld' url="#" }}
        </div>
        <div class="col-md-3 example-big-font">
          {{> '@anchor' label='Externe link' url="#" modifier="extern" }}
        </div>
        <div class="col-md-3 example-big-font">
          {{> '@anchor' label='Download link' url="#" modifier="download" }}
        </div>
      </div>

      <div class="row">
        <div class="col-md-12 example-big-font">
          <label>Voorbeeld in lopende tekst:</label>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit. Aenean commodo ligula eget dolor. Nullam dictum
            felis eu pede <a class="extern" href="#">
            mollis pretium</a>. Integer tincidunt. Cras dapibus.
            Vivamus <a class="extern" href="#">elementum</a> semper nisi. Aenean vulputate
            eleifend tellus. Aenean leo ligula, porttitor eu,
            consequat vitae, eleifend ac, enim. Aliquam lorem ante,
            dapibus in, viverra quis, feugiat a, tellus. Phasellus
            viverra nulla ut metus varius laoreet. Quisque rutrum.
            Aenean imperdiet. Etiam ultricies nisi vel augue.
            Curabitur ullamcorper <a class="download" href="#">ultricies nisi</a>.
          </p>
        </div>
      </div>

      <h2 style="margin-bottom: 24px">Gebruik in buttons</h2>
      <div class="row">
        <div class="col-md-3">
          {{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Downloaden' modifier='btn btn-primary download' url='#' }}
        </div>
      </div>

      <div class="row">
        <div class="col-md-3">
          {{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Downloaden' modifier='btn btn-default download' url='#' }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Lees verder' modifier='btn btn-default extern' url='#' }}
        </div>
      </div>

      <div class="row">
        <div class="col-md-3">
          {{> '@anchor' label='Anchor' modifier='btn btn-link' icon='icon fa fa-angle-right' url='#' }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Downloaden' modifier='btn btn-link download' icon='icon fa fa-angle-right' url='#' }}
        </div>
        <div class="col-md-3">
          {{> '@anchor' label='Lees verder' modifier='btn btn-link extern' icon='icon fa fa-angle-right' url='#' }}
        </div>
      </div>
    </div>

`
`

    /* No context defined for this component. */

`

- Handle: @anchors
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\06-examples\anchors.hbs
- References (1): @anchor

There are no notes for this item.

### 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.

`<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nullam dictum felis eu pede <a class="extern" href="#"> mollis pretium</a>. Integer tincidunt. Cras dapibus. Vivamus <a class="extern" href="#">elementum</a> semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper <a class="download" href="#">ultricies nisi</a>. </p>`

### WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

`<h2 style="margin-bottom: 24px">Link</h2>`

### 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.

`<h2 style="margin-bottom: 24px">Link</h2>`

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

Check that the title element describes the document.

`<title>Default`

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