<div class="info-box">
<div class="info-box__inner">
<div class="info-box__icon">
<svg class="icon icon--warn" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#warn"></use>
</svg>
</div>
<div class="info-box__headline">
<h1 class="headline headline--2"><span class="headline__text">Im CV empfehlen sich folgende Angaben zu Sprachkenntnissen:</span></h1>
</div>
<div class="info-box__content">
<div class="info-box__block">
<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>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
</div>
</div>
</div>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'info-box',
}) }}>
<div class="info-box__inner">
{% if icon|default %}
<div class="info-box__icon">
{% include '@icon' with { icon: icon } only %}
</div>
{% endif %}
{% if headline|default %}
<div class="info-box__headline">
{% include '@headline' with headline | merge({
size: 2,
level: level ?? false,
}) only %}
</div>
{% endif %}
<div class="info-box__content">
{% for block in blocks|default([]) %}
<div {{ html_attributes({
id: block.id ?? false,
class: 'info-box__block',
}, block.attributes ?? {}) }}>
{{ block.content | raw }}
</div>
{% endfor %}
</div>
</div>
</div>
{
"icon": "warn",
"headline": {
"level": 3,
"text": "Im CV empfehlen sich folgende Angaben zu Sprachkenntnissen:"
},
"blocks": [
{
"content": "!twig\n\n<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\n<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\n"
}
]
}
:root {
--infobox-background-color: var(--color-cyan-light);
--infobox-content-width: 100%;
--infobox-icon-color: var(--color-orange);
--infobox-icon-size: 5.5rem;
@include use-responsive-sizing(--infobox-padding-block, responsive-map(xs 3rem, xl 6rem));
@include use-responsive-sizing(--infobox-padding-inline, responsive-map(xs 2rem, l 3rem));
}
.info-box {
background-color: var(--infobox-background-color);
padding: var(--infobox-padding-block) var(--infobox-padding-inline);
}
.info-box__inner {
inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--infobox-content-width);
}
.info-box__icon {
color: var(--infobox-icon-color);
font-size: var(--infobox-icon-size);
margin-block-end: 3rem;
}
.info-box__content {
line-height: var(--line-height-body);
margin-block-start: 2.5rem;
}
.info-box__block {
& + & {
margin-block-start: 2rem;
}
> * + * {
margin-block-start: 2rem;
}
}
No notes defined.