<header class="stage stage--center">
<div class="stage__inner">
<div class="stage__content">
<div class="stage__breadcrumb">
<nav class="breadcrumb" aria-label="Deine aktuelle Position:">
<ul class="breadcrumb__list u-line-clamp">
<li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__icon"><svg class="icon icon--home" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#home"></use>
</svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a></li>
<li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-text">Unterseite</span></a></li>
<li class="breadcrumb__item"><a class="breadcrumb__link u-underline" aria-current="page"><span class="breadcrumb__link-text">Artikel</span></a></li>
</ul>
<script type="application/ld+json">
{
"@context": "https:\/\/schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": "#"
},
{
"@type": "ListItem",
"position": 2,
"name": "Unterseite",
"item": "#"
},
{
"@type": "ListItem",
"position": 3,
"name": "Artikel",
"item": "#"
}
]
}
</script>
</nav>
</div>
<div class="stage__text-container">
<div class="stage__headline">
<h2 class="headline headline--2"><span class="headline__text u-line-clamp">Titel mit etwa 75 Zeichen auf maximal vier Zeilen, danach wird ausgepunktet</span></h2>
</div>
</div>
</div>
<div class="stage__image-container">
<figure class="stage__image">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/750x750/fe7c09/130f26.webp?text=750x750" width="750" height="750" alt="Das ist ein Platzhalter-Bild" loading="lazy" fetchpriority="high" />
</picture>
</figure>
</div>
</div>
</header>
{% set color = color ?? false %}
{% set level = level ??? 2 -%}
<header {{ html_attributes({
id: id ?? false,
class: {
'stage': true,
'stage--center': center ?? false,
},
}) }}>
<div class="stage__inner">
<div class="stage__content">
{% if breadcrumb|default %}
<div class="stage__breadcrumb">
{% include '@breadcrumb' with breadcrumb only %}
</div>
{% endif %}
{% if headline|default or text|default %}
<div class="stage__text-container">
{% if headline|default %}
<div class="stage__headline">
{% include '@headline' with headline | merge({
level: level,
size: 2,
clampLines: true,
}) only %}
</div>
{% endif %}
{% if text|default %}
<div class="stage__text">
{{ text | componentize }}
</div>
{% endif %}
{% if buttons|default %}
<div class="stage__buttons">
{% for button in buttons %}
{% include button.use ?? '@button' with button | merge({
outline: not loop.first,
}) only %}
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if details|default %}
<dl class="stage__details">
{% for detail in details %}
<div class="stage__detail">
{% if detail.icon|default %}
<dt class="stage__detail-label">
{% include '@icon' with {
icon: detail.icon,
title: detail.label,
} only %}
</dt>
{% else %}
<dt class="u-hidden-visually">
{{- detail.label -}}
</dt>
{% endif %}
{% if detail.text|default %}
<dd class="stage__detail-text">
{{- detail.text | componentize -}}
</dd>
{% endif %}
</div>
{% endfor %}
</dl>
{% endif %}
</div>
{% if image|default or logo|default %}
<div class="stage__image-container">
{% if image|default %}
<figure class="stage__image">
{% include '@image' with image | merge({
fetchpriority: 'high',
disablePlaceholder: center ?? false,
}) only %}
{% if copyright|default or image.copyright|default %}
<figcaption class="stage__copyright">
{% include '@copyright' with {
text: copyright ??? image.copyright,
} only %}
</figcaption>
{% endif %}
</figure>
{% endif %}
{% if logo|default %}
<div class="stage__logo">
{% include '@image' with logo only %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</header>
{
"breadcrumb": {
"items": [
{
"text": "Startseite",
"link": "#"
},
{
"text": "Unterseite",
"link": "#"
},
{
"text": "Artikel",
"link": "#"
}
]
},
"headline": {
"text": "Titel mit etwa 75 Zeichen auf maximal vier Zeilen, danach wird ausgepunktet"
},
"center": true,
"color": "red",
"image": {
"src": "https://bildermangel.de/750x750/fe7c09/130f26.webp?text=750x750",
"width": 750,
"height": 750,
"alt": "Das ist ein Platzhalter-Bild",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
}
}
$stage-switch-breakpoint: 600px;
:root {
--stage-background-color: transparent;
--stage-logo-width: 40rem;
--stage-logo-height: 30rem;
--stage-min-height: 0;
--stage-content-align: flex-start;
@include use-responsive-sizing(--stage-image-size, (
xs: 100%,
($stage-switch-breakpoint): 40%,
m: 45%,
l: 50%,
));
}
.stage {
background-color: var(--stage-background-color);
}
.stage--center {
--stage-content-align: center;
@include use-responsive-sizing(--stage-min-height, (xs: 37.5rem, xl: 45rem));
}
.stage__inner {
display: grid;
grid-auto-rows: auto;
min-block-size: var(--stage-min-height);
@include use-container();
@include use-responsive-sizing(column-gap, $gaps);
@include mq($from: $stage-switch-breakpoint) {
grid-template-columns: 1fr 1fr;
}
}
.stage__content {
align-items: stretch;
display: flex;
flex-direction: column;
&:not(:only-child) {
--stage-content-gap: calc(var(--stage-breadcrumb-gap) * 2);
}
@include use-responsive-sizing(padding-block, responsive-map(xs 3rem, l 5rem));
@include use-responsive-sizing(--stage-breadcrumb-gap, (xs: 2.4rem, xl: 5rem));
}
.stage__breadcrumb {
margin-block-end: var(--stage-breadcrumb-gap);
}
.stage__text-container {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: var(--stage-content-align);
@include mq($from: $stage-switch-breakpoint) {
padding-block-end: var(--stage-content-gap, var(--stage-breadcrumb-gap));
}
}
.stage__headline {
--line-clamp: 4;
}
.stage__text {
font-size: 2.2rem;
font-weight: 600;
line-height: var(--line-height-default);
margin-block-start: 3rem;
}
.stage__buttons {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-block-start: 3rem;
}
.stage__details {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-block-start: 3rem;
}
.stage__detail {
align-items: center;
display: flex;
gap: 1rem;
}
.stage__detail-label {
flex-shrink: 0;
font-size: 3rem;
}
.stage__detail-text {
font-size: 1.6rem;
line-height: var(--line-height-default);
}
.stage__image-container {
align-self: stretch;
display: flex;
flex-direction: column-reverse;
flex-grow: 1;
flex-shrink: 0;
justify-content: stretch;
@include mq($until: $stage-switch-breakpoint) {
@include use-break-out();
}
@include mq($from: $stage-switch-breakpoint) {
transform: translateX(var(--body-padding));
}
}
.stage__image {
flex-shrink: 0;
position: relative;
}
.stage__copyright {
inset-block-end: 0;
inset-inline-end: 0;
position: absolute;
z-index: 2;
}
.stage__logo {
--image-max-width: var(--stage-logo-width);
--image-max-height: var(--stage-logo-height);
align-items: center;
background-color: var(--color-white);
display: flex;
flex-grow: 1;
justify-content: center;
padding-block: 5rem;
@include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 5rem));
}
No notes defined.