<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">Visueel als buttons</h2>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-primary"><span>Anchor</span></a>
<a href="#" class="btn btn-default"><span>Anchor</span></a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-link btn-align"><span>.btn-align</span></a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="#" class="btn btn-link"><span>Link button</span></a>
<a href="#" title="Link button" class="btn btn-link"><span class="sr-only">Link button</span><svg class="di di-info">
<use href="../../dso-icons.svg#info" />
</svg></a>
<a href="#" class="btn btn-link"><svg class="di di-angle-left">
<use href="../../dso-icons.svg#angle-left" />
</svg><span>Link button</span></a>
<a href="#" class="btn btn-link"><span>Link button</span><svg class="di di-angle-right">
<use href="../../dso-icons.svg#angle-right" />
</svg></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">Visueel als buttons</h2>
<div class="row">
<div class="col-md-3">
{{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' }}
{{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' }}
</div>
<div class="col-md-2">
{{> '@anchor' label='.btn-align' modifier='btn btn-link btn-align' url='#' }}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{> '@anchor' label='Link button' modifier='btn btn-link' url='#' }}
{{> '@anchor' label='Link button' modifier='btn btn-link' icon='info' iconOnly=true url='#' }}
{{> '@anchor' label='Link button' modifier='btn btn-link' icon='angle-left' url='#' }}
{{> '@anchor' label='Link button' modifier='btn btn-link' iconAfter='angle-right' url='#' }}
</div>
</div>
</div>
/* No context defined for this component. */
There are no notes for this item.