Link
A link component can be used to navigate between the pages or navigate to a different site. The default link component is simple, but by using and combining the different modifiers, links can be visually changed for different use cases.
Alternate
Default
Inverse
Quaternary
Quinary
<a class="c-link c-link--quinary" href="/">
<span class="c-link__description">Over het KMSKA</span>
<span class="c-link__decoration" aria-hidden="true"></span>
<div class="c-icon c-link__icon">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</a>
Secondary
Tertiary
<a class="c-link c-link--tertiary" href="/">
<span class="c-link__description">Lees meer</span>
<span class="c-link__decoration" aria-hidden="true"></span>
<div class="c-icon c-link__icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
</svg>
</div>
</a>
Documentation
Modifiers
c-link--alternate
Reverses the position of the text and the icon
c-link--inverse
Changes the color of the text and icon from primary to white
c-link--secondary
Switches the position of the icon. Text and icon are now positioned in a row instead of a column.
c-link--tertiary
Switches the angle of the icon.
c-link--quaternary
Has a small arrow on the left
c-link--quinary
Other typography style with a little arrow