Link

<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 fas 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 fas 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 fas 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 fas fa-angle-right' url='#' }}
    </div>
    <div class="col-md-3">
      {{> '@anchor' label='Downloaden' modifier='btn btn-link download' icon='icon fas fa-angle-right' url='#' }}
    </div>
    <div class="col-md-3">
      {{> '@anchor' label='Lees verder' modifier='btn btn-link extern' icon='icon fas fa-angle-right' url='#' }}
    </div>
  </div>
</div>
/* No context defined for this component. */

There are no notes for this item.