<div class="fact-grid">
<div class="fact-grid__text">
<p class="headline headline--2"><span class="headline__text">In über 150 Ländern verfolgen wir jeden Tag ein gemeinsames Ziel: etwas zu tun, das zählt – für die Kunden, füreinander und für die Gesellschaft.</span></p>
</div>
<svg class="icon icon--cta-arrow fact-grid__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cta-arrow"></use>
</svg>
<dl class="fact-grid__facts">
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label">Umsatz</dt>
<dd class="fact-grid__fact-text">50,2 Mrd USD</dd>
</div>
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label">Beschäftigte weltweit</dt>
<dd class="fact-grid__fact-text">345</dd>
</div>
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label">Beschäftigte in Deutschland</dt>
<dd class="fact-grid__fact-text">45</dd>
</div>
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label">Kunden</dt>
<dd class="fact-grid__fact-text">8.203</dd>
</div>
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label">Standorte in Deutschland</dt>
<dd class="fact-grid__fact-text">15</dd>
</div>
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label">Gründungsjahr</dt>
<dd class="fact-grid__fact-text">1845</dd>
</div>
</dl>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'fact-grid',
}, attrs ?? {}) }}>
{% if text|default %}
<div class="fact-grid__text">
{% include '@headline' with {
tag: 'p',
size: 2,
text: text | striptags('a'),
} only %}
</div>
{% endif %}
{% include '@icon' with {
class: 'fact-grid__icon',
icon: 'cta-arrow',
} only %}
<dl class="fact-grid__facts">
{% for fact in facts %}
<div class="fact-grid__fact">
<dt class="fact-grid__fact-label{% if fact.shorten|default %} u-line-clamp{% endif %}">
{{- fact.label | breakerize | make_efellows_non_breakable -}}
</dt>
<dd class="fact-grid__fact-text">
{{- fact.text | breakerize | make_efellows_non_breakable -}}
</dd>
</div>
{% endfor %}
</dl>
</div>
{
"text": "In über 150 Ländern verfolgen wir jeden Tag ein gemeinsames Ziel: etwas zu tun, das zählt – für die Kunden, füreinander und für die Gesellschaft.",
"facts": [
{
"label": "Umsatz",
"text": "50,2 Mrd USD"
},
{
"label": "Beschäftigte weltweit",
"text": 345
},
{
"label": "Beschäftigte in Deutschland",
"text": 45
},
{
"label": "Kunden",
"text": 8.203
},
{
"label": "Standorte in Deutschland",
"text": 15
},
{
"label": "Gründungsjahr",
"text": 1845
}
]
}
:root {
--fact-grid-icon-color: var(--color-orange);
--fact-grid-fact-background-color: var(--color-orange-light);
@include use-responsive-sizing(--fact-grid-columns, (xs: 1, s: 2, l: 3, xl: 4));
@include use-responsive-sizing(--fact-grid-icon-size, responsive-map(xs 5rem, xl 8rem));
}
.fact-grid__text {
@include use-responsive-sizing(margin-block-end, responsive-map(xs 4rem, xl 7rem));
}
.fact-grid__icon {
color: var(--fact-grid-icon-color);
font-size: var(--fact-grid-icon-size);
position: absolute;
transform: rotate(-105deg) translate(0.6em, 0.3em);
}
.fact-grid__facts {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(var(--fact-grid-columns), minmax(0, 1fr));
margin-block-start: calc(var(--fact-grid-icon-size) * 0.6);
@include use-responsive-sizing(row-gap, responsive-map(xs 2rem, xl 4rem));
@include use-responsive-sizing(column-gap, $gaps);
}
.fact-grid__fact {
background-color: var(--fact-grid-fact-background-color);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
@include use-responsive-sizing(padding-block, responsive-map(xs 1.75rem, l 2.5rem));
@include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, l 3rem));
}
.fact-grid__fact-label,
.fact-grid__fact-text {
hyphens: auto;
}
.fact-grid__fact-label {
--line-clamp: 2;
font-size: 1.6rem;
margin-block-end: 1rem;
word-break: break-word;
}
.fact-grid__fact-text {
@include use-responsive-sizing(font-size, responsive-map(xs 2.6rem, xl 3.6rem));
}
No notes defined.