<div class="c-la-content-block c-la-callout-link">
<a class="c-la-callout-link__callout" href="#">
<h3 class="c-la-callout-link__callout-title f-title--h5">Become a member<span class="c-la-callout-link__callout-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</h3>
<p class="c-la-callout-link__callout-content f-text--small">Your membership supports our efforts to ensure a healthy, sustainable and equitable planet. </p>
</a>
</div>
<div class="c-la-content-block c-la-callout-link">
<a class="c-la-callout-link__callout" href="{{ link }}">
<h3 class="c-la-callout-link__callout-title f-title--h5">{{ title }}<span class="c-la-callout-link__callout-icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</h3>
<p class="c-la-callout-link__callout-content f-text--small">{{ content }}</p>
</a>
</div>
{
"pageColorTheme": "teal",
"title": "Become a member",
"link": "#",
"content": "Your membership supports our efforts to ensure a healthy, sustainable and equitable planet. "
}
.c-la-callout-link__callout {
padding: 4rem;
background-color: var(--ct-light);
display: block;
@include ctaArrowHover;
[data-bkg-theme="light"] & {
background-color: var(--ct-dark);
color: var(--ct-text-on-dark);
}
}
.c-la-callout-link__callout-icon {
display: inline-block;
margin-left: 1.2rem;
transition: transform 0.24s ease-in-out;
}
.c-la-callout-link__callout-title {
margin-bottom: 1.8rem;
}
No notes defined.