CTA Links
Call to action links are special anchor links that are often used outside the normal body text in areas such as hero.
Usage
To add the default CTA style to a link, add the [namespace]-cta class to an anchor tag.
For alternate CTA link sizes, use a modifier class [namespace]-cta--* with the base class [namespace]-cta.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-cta |
Default call to action link style, 16px font size, chevron to the right. |
slb-cta--medium |
Medium call to action link style, 18px font size, chevron to the right. |
slb-cta--large |
Large call to action link style, 20px font size, chevron to the right. |
slb-cta--super |
Super call to action link style, 24px font size, chevron to the right. |
.slb-cta - Default call to action link
.slb-cta--medium - Medium call to action link
.slb-cta--large - Large call to action link
.slb-cta--super - Super call to action link
typography\link-cta.hbs
<p><a href="#" class="slb-cta [modifier class]">CTA Anchor <span class="text-nowrap">Link ></span></a></p>
Source:
components/_typography.scss