<div class="cta-box u-inverted">
<div class="cta-box__headline">
<h2 class="headline headline--2"><span class="headline__text">Sichere dir deine Teilnahme und melde dich für den IT-Day 2022 an</span></h2>
</div>
<div class="cta-box__text">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="cta-box__button">
<a class="button u-underline" href="#">Jetzt anmelden</a>
</div>
<svg class="icon icon--whirl cta-box__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#whirl"></use>
</svg>
</div>
{% set level = level ??? 2 -%}
<div {{ html_attributes({
id: id ?? false,
class: 'cta-box u-inverted',
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="cta-box__headline">
{% include '@headline' with headline | merge({
size: 2,
level: level,
}) only %}
</div>
{% endif %}
{% if text|default %}
<div class="cta-box__text">
{{ text | componentize }}
</div>
{% endif %}
{% if button|default %}
<div class="cta-box__button">
{% include '@button' with button only %}
</div>
{% endif %}
{% include '@icon' with {
icon: 'whirl',
class: 'cta-box__icon',
} only %}
</div>
{
"headline": {
"text": "Sichere dir deine Teilnahme und melde dich für den IT-Day 2022 an"
},
"button": {
"link": "#",
"text": "Jetzt anmelden"
},
"text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n"
}
:root {
--cta-box-background-color: var(--color-midnight);
--cta-box-color: var(--color-white);
--cta-box-z-index: #{z-index('default')};
}
.cta-box {
background-color: var(--cta-box-background-color);
color: var(--cta-box-color);
display: flex;
flex-direction: column;
gap: 3rem;
position: relative;
z-index: var(--cta-box-z-index);
@include use-responsive-sizing(padding-block, responsive-map(xs 3rem, xl 5rem));
@include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 5rem));
}
.cta-box__text {
line-height: var(--line-height-body);
> * + * {
margin-block-start: 1.5rem;
}
}
.cta-box__headline,
.cta-box__text,
.cta-box__button {
position: relative;
z-index: 2;
}
.cta-box__icon {
color: var(--color-orange);
inset-block-start: 100%;
inset-inline: 100%;
position: absolute;
transform: translate(-115%, -70%) rotate(60deg);
z-index: 1;
@include use-responsive-sizing(font-size, responsive-map(xs 12rem, l 17rem));
@include mq($from: l) {
transform: translate(calc(-100% + 2rem), -66%) rotate(50deg);
}
}
No notes defined.