<div class="download-box download-box--purple has-overlay-link">
<div class="download-box__headline">
<h2 class="headline"><span class="headline__text">Personalmarketing- und Recruiting-Lösungen 2022 und 2023</span></h2>
</div>
<div class="download-box__text">Alle Produkte und Preise zum Download als PDF</div>
<div class="download-box__download-button">
<button class="icon-button u-overlay-link" type="button">
<span class="icon-button__icon">
<svg class="icon icon--download" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#download"></use>
</svg> </span>
<span class="icon-button__text u-underline">PDF (187 kb)</span>
</button>
</div>
</div>
{% set color = color ??? 'purple' %}
{% set level = level ?? 2 -%}
<div {{ html_attributes({
id: id ?? false,
class: ['download-box', "download-box--#{color}", 'has-overlay-link'],
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="download-box__headline">
{% include '@headline' with headline | merge({
level: level,
size: false,
}) only %}
</div>
{% endif %}
{% if text|default %}
<div class="download-box__text">
{{- text -}}
</div>
{% endif %}
{% if download|default %}
<div class="download-box__download-button">
{% include '@icon-button' with download | merge({
icon: 'download',
overlay: true,
}) only %}
</div>
{% endif %}
</div>
{
"color": "purple",
"headline": {
"text": "Personalmarketing- und Recruiting-Lösungen 2022 und 2023"
},
"text": "Alle Produkte und Preise zum Download als PDF",
"download": {
"text": "PDF (187 kb)",
"button": {
"link": "#"
}
}
}
:root {
--download-box-background-color: var(--color-orange-light);
@include use-responsive-sizing(--download-box-padding-block, responsive-map(xs 2.5rem, xl 5rem));
@include use-responsive-sizing(--download-box-padding-inline, responsive-map(xs 2rem, xl 5rem));
@include use-responsive-sizing(--download-box-aspect-ratio, (
xs: 1,
s: 1.25,
m: 1.5,
l: 2,
));
}
.download-box {
aspect-ratio: var(--download-box-aspect-ratio);
background-color: var(--download-box-background-color);
display: flex;
flex-direction: column;
gap: 2rem;
padding-block: var(--download-box-padding-block);
padding-inline: var(--download-box-padding-inline);
position: relative;
}
.download-box--cyan {
--download-box-background-color: var(--color-cyan-light);
}
.download-box--green {
--download-box-background-color: var(--color-green-light);
}
.download-box--yellow {
--download-box-background-color: var(--color-yellow-light);
}
.download-box--purple {
--download-box-background-color: var(--color-purple-light);
}
.download-box--blue {
--download-box-background-color: var(--color-blue-light);
}
.download-box--red {
--download-box-background-color: var(--color-red-light);
}
.download-box__headline {
@include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.2rem, xl 4rem));
}
.download-box__text {
line-height: var(--line-height-body);
}
.download-box__download-button {
margin-block-start: auto;
}
No notes defined.