The call to action card is used everywhere to highlight important information, promotions, certain educations that you wan tot upsell etc. Depending on the context the call to action card shrinks (if the call to action is not part of a set) or it flows to a disclosure list item (if it’s part of a set).
<article class="m-cta ">
<header class="m-cta__header">
<small class="m-cta__sub">Traject</small>
<h4 class="m-cta__title">Financiële medewerkers</h4>
</header>
<p class="m-cta__description">
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<div class="m-cta__actions">
<a class="a-button " href="">
<span class="a-button__text">Bekijk dit opleidingstraject</span>
</a>
</div>
</article>
If the default CTA's do not suffice in meeting the needs a background image can be set to allow for a more custom solution.
<article class="m-cta m-cta--with-background" style="background-image: url('/assets/images/banner/placeholder.png');">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button " href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
</div>
</article>
Secondary Call To Action (CTA) can either have a blue, purple or yellow background color. Along with the background color, a shape in the form of arrows is rendered as a background image.
<article class="m-cta m-cta--secondary-blue">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button a-button--secondary" href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
</div>
</article>
Secondary Call To Action (CTA) can either have a blue, purple or yellow background color. Along with the background color, a shape in the form of arrows is rendered as a background image.
<article class="m-cta ">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button a-button--secondary" href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
<a class="a-link m-cta__link " href="">
<span class="a-link__text">Wat is incompany?</span>
</a>
</div>
</article>
<article class="m-cta m-cta--with-background" style="background-image: url('/assets/images/banner/placeholder.png');">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button " href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
<a href="#" class="m-cta__link">Wat is incompany?</a>
</div>
</article>
<article class="m-cta m-cta--secondary-yellow">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button a-button--secondary" href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
<a class="a-link m-cta__link " href="">
<span class="a-link__text">Wat is incompany?</span>
</a>
</div>
</article>
Secondary Call To Action (CTA) can either have a blue, purple or yellow background color. Along with the background color, a shape in the form of arrows is rendered as a background image.
<article class="m-cta m-cta--secondary-purple">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button a-button--secondary" href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
</div>
</article>
Secondary Call To Action (CTA) can either have a blue, purple or yellow background color. Along with the background color, a shape in the form of arrows is rendered as a background image.
<article class="m-cta m-cta--secondary-yellow">
<header class="m-cta__header">
<small class="m-cta__sub">Volg een opleiding</small>
<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
</header>
<div class="m-cta__actions">
<a class="a-button a-button--secondary" href="">
<span class="a-button__text">Volg een opleiding</span>
</a>
</div>
</article>
m-cta--secondary-blue
Render a secondary CTA with a blue background color with an arrow in the branding of Cevora as a background-image
m-cta--secondary-purple
Render a secondary CTA with a purple background color with an arrow in the branding of Cevora as a background-image
m-cta--secondary-yellow
Render a secondary CTA with a yellow background color with an arrow in the branding of Cevora as a background-image
m-cta--with-background
When a background-image is added, all the text content is rendered in a white color so the contrast is right for darker backgrounds