Use the call to action component on a page:
Do not use the call to action component for other uses than the uses listed above.
The call to action component consists of the following parts:
The primary action and the optional secondary action can both be one of the following types:
Links to web pages, e-mail addresses and telephone numbers are presented using a link. Links to documents are presented using a file download.
When using a call to action, please note the following:
A call to action has a certain behavior:
{% set content %}
{% if title %}
{% include '@heading' with {
'type': 'h2',
'heading_text': title
} %}
{% endif %}
{% if description %}
{% include '@paragraph' with {
'text': description
} %}
{% endif %}
<{{ links|length > 1 ? 'ul' : 'div'}} class="links">
{% for link in links %}
{% set options = {
link: link.url,
text: link.text,
modifier: loop.first ? 'button button-primary' : 'standalone-link'
} %}
{% if link.size|length %}
{% set options = options|merge({
file: {
size: link.size,
type: 'pdf'
}
}) %}
{% endif %}
{% if links|length > 1 %}
<li>
{% endif %}
{% include '@file-download' with options %}
{% if links|length > 1 %}
</li>
{% endif %}
{% endfor %}
<{{ links|length > 1 ? '/ul' : '/div'}} class="links">
{% endset %}
{% include "@highlight" with {
content: content,
modifier: top ? 'top' : 'left',
classes: [
'cta-block',
type
]
} %}
<section class="highlight cta-block phone highlight--left">
<div class="highlight__inner">
<h2>Contact us</h2>
<p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>
<ul class="links">
<li>
<a href='tel:#' class="button button-primary" title="Contact us">
09 123 123 </a>
</li>
<li>
<a href='#' class="standalone-link" title="Contact us">
Check all contact details </a>
</li>
</ul class="links">
</div>
</section>
{
"type": "phone",
"title": "Contact us",
"description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
"links": [
{
"text": "09 123 123",
"url": "tel:#"
},
{
"text": "Check all contact details",
"url": "#"
}
]
}
.cta-block {
.highlight__inner {
li {
margin-top: .8rem;
&:first-of-type a {
@extend %button-primary;
@include button;
@include button-icon;
}
&:not(:last-of-type) {
@include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
padding-bottom: .8rem;
border-bottom: 2px solid;
}
}
}
&--multiple {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-right: -1rem;
margin-left: -1rem;
> .cta-block {
flex: 1 0 20rem;
max-width: calc(100% - 2rem);
margin-right: 1rem;
margin-left: 1rem;
.highlight__inner {
height: 100%;
@include tablet {
padding: 5rem 2rem 2rem;
&::before {
top: 0;
right: 0;
left: 0;
}
}
}
}
}
}