Arrow link

Default

<div class="aigis-preview__background">

    <a class="arrow-link" href="#">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

</div>

Sizes

<a class="arrow-link" data-size="large" data-text-color="black" href="#">
    <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
    <span class="arrow-link__label">Large</span>
</a>

<a class="arrow-link" data-size="small" data-text-color="black" href="#">
    <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
    <span class="arrow-link__label">Small</span>
</a>

Colours

<div class="aigis-preview__background">

    <a class="arrow-link" data-icon-color="white" href="#">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

    <a class="arrow-link" data-icon-color="white" data-text-color="black" href="#">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

    <a class="arrow-link" data-text-color="black" href="#">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

</div>

Direction

<div class="aigis-preview__background">

    <a class="arrow-link" href="#" data-direction="north">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

    <a class="arrow-link" href="#" data-direction="south">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

    <a class="arrow-link" href="#" data-direction="west">
        <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
        <span class="arrow-link__label">Read</span>
    </a>

</div>