<section class="cta">
<div class="cta__inner">
<h2 class="cta__header">This is a heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat urna et diam porta, vel venenatis felis elementum. Nulla non ante eros. Suspendisse quis ullamcorper nibh, id bibendum urna.</p>
<a href="http://google.com" class="btn">Call to Action</a>
</div>
</section>
<section class="cta">
<div class="cta__inner">
<h2 class="cta__header">{{ heading }}</h2>
<p>{{ paragraph }}</p>
<a href="{{ link.url }}" class="btn">{{ link.text }}</a>
</div>
</section>
{
"heading": "This is a heading",
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat urna et diam porta, vel venenatis felis elementum. Nulla non ante eros. Suspendisse quis ullamcorper nibh, id bibendum urna.",
"link": {
"text": "Call to Action",
"url": "http://google.com"
}
}
.cta {
padding: 60px 0;
background-color: color(neutral, lightest);
&__inner {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
padding: 0 15px;
width: 100%;
max-width: 900px;
text-align: center;
}
&__header {
&::after {
display: block;
margin: 20px auto 0;
width: 100px;
height: 1px;
background-color: color(neutral, light);
content: '';
}
}
p {
max-width: 100%;
}
.btn {
margin-top: 20px;
}
}
Call to actions or CTAs as they are better known, can take shape via a number of component forms and are typically used to entice or solicit a response from the user. They are traditionally stand-alone links or dedicated sections with a link used to route traffic to another page deemed crucial by content creators to their audience.