<button href="#" class="cta btn">
<span class="text">This is a call to action button</span>
<span class="icon icon-cta-arrow-right">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
<path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
</svg></span>
</span>
</button>
<{{ tagName|default('a') }}{% if url is defined and url %} href="{{ url }}"{% endif %} class="cta{% if classes is defined and classes|length %} {{ classes|join(' ') }}{% endif %}"{% if attributes is defined and attributes %}{% for key, value in attributes %} {{ key }}="{{ value }}"{% endfor %}{% endif %}>
{% if classes is defined and 'reversed' in classes %}
{% include '@icon' with { source: source|default('icon-cta-arrow-left.svg') } %}
<span class="text">{{ text }}</span>
{% else %}
<span class="text">{{ text }}</span>
{% include '@icon' with { source: source|default('icon-cta-arrow-right.svg') } %}
{% endif %}
</{{ tagName|default('a') }}>
{
"url": "#",
"text": "This is a call to action button",
"classes": [
"btn"
],
"attributes": [],
"tagName": "button"
}
Purpose: Used to direct the user to the relevant page or action.
Purpose: Used to indicate a relevant page or action.
Required: Yes
Recommendations: Keep max to about 25-30 characters (including spaces)
Purpose: Used to direct the user to the relevant page or action.
Purpose: Used to indicate a relevant page or action.
Required: Yes
Recommendations: Keep max to about 15-20 characters (including spaces)