Standard Life Digital Framework

CTA Link with Icon

full screen new window example HTML markup

To add a preceding icon to the super CTA, include an SVG element with the [namespace]-cta__icon class before the link text.

Super CTA with icon >

Markup: typography\link-cta-icon.hbs

Copy

<p>
    <a href="#" class="slb-cta slb-cta--super">
        <svg class="slb-cta__icon" viewBox="0 0 384 512" id="file-alt"><title>file-alt</title><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg>
        Super CTA with <span class="text-nowrap">icon &gt;</span>
    </a>
</p>

Source: components/_typography.scss