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>

Box link

<a class="box-link" href="#">
    Health
</a>

Type label

<div class="type-label">
    <div class="type-label__icon"></div>
    <span class="type-label__name">Resource</span>
</div>

<div class="type-label" data-post-type="resource">
    <div class="type-label__icon"></div>
    <span class="type-label__name">Resource</span>
</div>

<div class="type-label" data-post-type="post">
    <div class="type-label__icon"></div>
    <span class="type-label__name">Blog</span>
</div>