<section class="c-cta l-wrap l-container--full">
<div class="c-cta__container l-container">
<div class="c-cta__main">
<div class="c-cta__content l-container--md u-spacing--lg">
<h2 class="o-heading c-cta__title">
Questions?
</h2>
<div class="o-dek c-cta__dek">
[200 Char Short description text] Lorem ipsum dolor sit amet consectetur. Auctor enim erat sodales amet aliquet fermentum aliquet duis morbi. Orci orci eget suscipit volutpat elit nisi lacus. Id ut gravida donec sagittis tempus luctus.
</div>
</div>
<div class="c-cta__actions">
<a class="o-button c-cta__button has-icon" href="/">
<span class="o-button__label">
Button
</span>
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</div>
</div>
<div class="c-cta__background">
<div class="o-ticker-tape c-cta__ticker-tape top">
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
</div>
<div class="o-ticker-tape c-cta__ticker-tape bottom">
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
<span class="o-ticker-tape__text">Questions</span>
</div>
</div>
</div>
</section>
{% set base_class = cta.base_class|default('c-cta') %}
{% if cta.heading %}
<section class="{{ bem(base_class, cta.element, cta.modifiers, cta.extra) }} l-wrap l-container--full" {{ attributes(cta.attributes) }}>
<div class="{{ bem(base_class, 'container') }} l-container">
<div class="{{ bem(base_class, 'main') }}">
<div class="{{ bem(base_class, 'content') }} l-container--md u-spacing--lg">
{% include "@heading" with {
"heading": {
"level": "2",
"text": cta.heading,
"extra": bem(base_class, 'title')
}
} %}
{% include "@dek" with {
"dek": {
"text": cta.dek,
"extra": bem(base_class, 'dek')
}
} %}
</div>
<div class="{{ bem(base_class, 'actions') }}">
{% include "@button" with {
"button": {
"url": cta.button.url,
"text": cta.button.text,
"target": cta.button.target,
"arrow": "true",
"extra": bem(base_class, 'button')
}
} %}
</div>
</div>
<div class="{{ bem(base_class, 'background') }}">
{% include "@ticker-tape" with {
"ticker_tape": {
"text": cta.ticker_tape,
"extra": [bem(base_class, 'ticker-tape'), 'top']
}
} %}
{% include "@ticker-tape" with {
"ticker_tape": {
"text": cta.ticker_tape,
"extra": [bem(base_class, 'ticker-tape'), 'bottom']
}
} %}
</div>
</div>
</section>
{% endif %}
{
"cta": {
"heading": "Questions?",
"dek": "[200 Char Short description text] Lorem ipsum dolor sit amet consectetur. Auctor enim erat sodales amet aliquet fermentum aliquet duis morbi. Orci orci eget suscipit volutpat elit nisi lacus. Id ut gravida donec sagittis tempus luctus.",
"button": {
"url": "/",
"text": "Button"
},
"ticker_tape": "Questions"
}
}
/* ------------------------------------ *\
$CTA
\* ------------------------------------ */
.c-cta {
&__container.l-container {
color: var(--ds-color-content-primary);
padding: var(--ds-space-xxxl) var(--ds-space-xl);
@include media(">large") {
padding: calc(var(--ds-space) * 6) var(--ds-space-super);
}
}
&__main {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
gap: var(--ds-space);
@include media(">large") {
justify-content: space-between;
flex-direction: row;
}
}
&__content {
max-width: 670px;
}
&__actions {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
&__title {
@include o-typography-heading--h0('secondary', 'light');
text-align: center;
}
&__dek {
@include o-typography-heading--h4('secondary', 'light');
text-align: center;
}
&__background {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-1deg);
z-index: 0;
background-color: var(--ds-color-theme-background-secondary, var(--ds-color-background-detail));
}
&__ticker-tape {
z-index: 1;
position: absolute;
background-color: var(--ds-color-theme-background-primary, var(--ds-color-background-primary));
transform-origin: center center;
top: 50%;
[data-theme="black"] & {
color: var(--ds-color-theme-content-primary);
}
&.top {
display: none;
@include media(">small") {
display: flex;
right: -50%;
transform: translateY(-50%) rotate(46deg);
}
@include media(">large") {
right: -40%;
}
}
&.bottom {
top: auto;
bottom: 0;
left: -50%;
transform: translate(0, -50%) rotate(-30deg);
width: 200%;
justify-content: flex-end;
@include media(">small") {
width: 100%;
top: 50%;
bottom: auto;
left: auto;
right: -50%;
transform: translate(8%, -50%) rotate(-30deg);
}
@include media(">large") {
right: -40%;
}
}
}
}
No notes defined.