Optimum image size
<header class="eventPageHeader has-backdrop has-figure">
<nav class="breadcrumbNav">
<div class="breadcrumbNav-item">
<a href="#" class="breadcrumbNav-link">Startpage</a>
</div>
<div class="breadcrumbNav-item">
<a href="#" class="breadcrumbNav-link">Page</a>
</div>
<div class="breadcrumbNav-item">
<span>Current Page</span>
</div>
</nav>
<div class="eventPageHeader-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="eventPageHeader-text">
<h1 class="eventPageHeader-heading">
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<strong class="eventPageHeader-title">Ich bin der Titel der Seite</strong>
</h1>
<div class="eventPageHeader-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="eventPageHeader-data">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
</div>
</div>
</header>
<header class="eventPageHeader has-backdrop{{#if figure}} has-figure{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#breadcrumbnav}}
{{render '@breadcrumbnav' (contextData '@eventpageheader' this) merge=true}}
{{/breadcrumbnav}}
{{#figure}}
<div class="eventPageHeader-figure">
{{render '@figure' (contextData '@eventpageheader' this) merge=true}}
</div>
{{/figure}}
<div class="eventPageHeader-text">
<h1 class="eventPageHeader-heading">
{{#kicker}}
{{render '@kicker' (contextData '@eventpageheader' this) merge=true}}
{{/kicker}}
{{#title}}<strong class="eventPageHeader-title">{{{.}}}</strong>{{/title}}
</h1>
{{#description}}
<div class="eventPageHeader-description">
{{{.}}}
</div>
{{/description}}
<div class="eventPageHeader-data">
{{#datebadge}}
{{render '@datebadge' (contextData '@teaserinset' this) merge=true}}
{{/datebadge}}
{{#metadatalist}}
{{render '@metadatalist' (contextData '@teaserinset' this) merge=true}}
{{/metadatalist}}
</div>
</div>
</header>
{
"breadcrumbnav": {
"items": [
{
"label": "Startpage",
"url": "#"
},
{
"label": "Page",
"url": "#"
},
{
"label": "Current Page",
"is-current": true
}
]
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel der Seite",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
}
@import "_eventPageHeader.styles";
.eventPageHeader {
@extend %pageHeader;
&-title {
@extend %pageHeader-title;
}
&-text {
@extend %pageHeader-text;
}
&-notice {
@extend %pageHeader-notice;
}
&-title {
@extend %pageHeader-title;
}
&-description {
@extend %pageHeader-description;
}
&-figure {
@extend %pageHeader-figure;
.figure {
position: relative;
}
@include only-on-desktop(){
padding: var(--bp);
padding-left: 0;
.figure {
border-radius: var(--br-small);
overflow: hidden;
background-color: white;
}
}
}
&[data-type="logo"] &-figure {
img {
position: relative;
transform: scale(.85);
object-fit: contain;
}
}
&-data {
@include stack-spacing(large);
display: flex;
flex-direction: column;
row-gap: var(--sp-large);
}
.dateBadge,
.metadataList {
@include stack-spacing(0);
}
}