Optimal image dimensions
<!-- Default -->
<div class="eventTeaser">
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="eventTeaser-title">
Ich bin der Titel
</h3>
</header>
<div class="eventTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<footer class="eventTeaser-footer">
<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 class="eventTeaser-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</footer>
</div>
</div>
<!-- With Image -->
<div class="eventTeaser">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<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>
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="eventTeaser-title">
Ich bin der Titel
</h3>
</header>
<div class="eventTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<footer class="eventTeaser-footer">
<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 class="eventTeaser-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Zur Website</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-calendar-plus">
<use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
</svg>
<span class="button-label">Termin speichern</span></a>
</div>
</footer>
</div>
</div>
<!-- With Logo -->
<div class="eventTeaser" data-type="logo">
<div class="eventTeaser-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="eventTeaser-content">
<header class="eventTeaser-header">
<div class="dateBadge">
<time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time>
</div>
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="eventTeaser-title">
Ich bin der Titel
</h3>
</header>
<div class="eventTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<footer class="eventTeaser-footer">
<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 class="eventTeaser-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</footer>
</div>
</div>
<div class="eventTeaser{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="eventTeaser-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@eventteaser' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="eventTeaser-content">
<header class="eventTeaser-header">
{{#datebadge}}
{{render '@datebadge' (contextData '@eventteaser' this) merge=true}}
{{/datebadge}}
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@eventteaser' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@eventteaser' this) merge=true}}
{{/kicker}}
<h3 class="eventTeaser-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</h3>
</header>
{{#description}}
<div class="eventTeaser-description">
{{{.}}}
</div>
{{/description}}
<footer class="eventTeaser-footer">
{{#metadatalist}}
{{render '@metadatalist' (contextData '@eventteaser' this) merge=true}}
{{/metadatalist}}
{{#if ctas}}
<div class="eventTeaser-cta">
{{#ctas}}
{{render '@button--link' (contextData '@eventteaser' this) merge=true}}
{{/ctas}}
</div>
{{/if}}
</footer>
</div>
</div>
/* Default */
{
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"ctas": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right",
"weight": "bold"
}
}
}
/* With Image */
{
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"ctas": [
{
"label": "Zur Website",
"icon": {
"position": "right",
"id": "arrow-square-out",
"weight": "bold"
}
},
{
"label": "Termin speichern",
"modifier": "is-secondary",
"icon": {
"position": "right",
"id": "calendar-plus",
"weight": "bold"
}
}
],
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
},
"end": {
"datetime": "2024-03-03",
"day": 3,
"month": "Mär",
"year": 2024
}
}
}
/* With Logo */
{
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
},
"ctas": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right",
"weight": "bold"
}
},
"type": "logo",
"datebadge": {
"start": {
"datetime": "2024-02-28",
"day": 28,
"month": "Feb",
"year": 2024
}
},
"image": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Beschreibung des Teaser Images"
}
}
@import "_eventTeaser.styles";
.eventTeaser {
@include stack-spacing(component);
background: $_backdrop-color;
border-radius: var(--br);
overflow: hidden;
position: relative;
& + & {
@include stack-spacing(large);
}
&-image {
padding: var(--bp);
.figure {
@include stack-spacing(0);
background-color: white;
border-radius: var(--br-small);
overflow: hidden;
}
img {
border-radius: 0;
position: relative;
transform: scale(1);
--ratio: #{$figure_aspect-ratio};
transition: transform $_transition-duration;
}
a:hover img {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
&[data-type="logo"] &-image {
figure {
background-color: white;
img {
position: relative;
transform: scale(.85);
object-fit: contain;
}
}
a:hover figure img {
transform: scale(.93);
}
}
&-header {
display: flex;
column-gap: $kicker_gutter;
row-gap: var(--sp);
flex-wrap: wrap;
align-content: center;
align-items: center;
> * {
@include stack-spacing(0);
}
.kicker {
flex-grow: 1;
width: 100%;
}
}
&-title {
@extend %heading;
margin-top: calc(var(--sp-small) - var(--sp));
flex-grow: 1;
width: 100%;
a {
color: inherit;
text-decoration: inherit;
}
}
&-content {
width: 100%;
padding: var(--bp);
& > *:first-child {
@include stack-spacing(0);
}
}
&-footer {
@include stack-spacing(large);
display: flex;
flex-direction: column;
row-gap: var(--sp-large);
align-content: flex-start;
.metadataList,
.button {
@include stack-spacing(0);
}
}
&-cta {
@extend %buttonGroup;
@include stack-spacing(0);
}
@include only-on-desktop(){
display: flex;
flex-direction: row-reverse;
align-items: stretch;
&-image {
flex: 1 0 get-columns-width(5);
.figure {
border-radius: var(--br-small);
img {
height: inherit;
}
}
}
&-content {
padding: var(--gg);
flex: 1 0 get-columns-width(7);
}
&-description {
width: 80%;
width: max(740px, 80%);
}
&-image ~ &-content &-description {
width: 100%;
}
&:not(:has(&-image)) &-footer {
flex-direction: row;
column-gap: var(--gg);
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
}
}
}