No notes defined.
<!-- Default -->
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
<span class="newsTeaser-metadata-item is-media">Springfield Shopper</span>
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
<div class="newsTeaser-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>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
<!-- With Notice -->
<div class="newsTeaser">
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
</div>
<div class="newsTeaser-notice">
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.
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
<!-- With Logo -->
<div class="newsTeaser">
<div class="newsTeaser-logo">
<img src="../../images/placeholder/logo-001-cropped.svg" alt="Acme Co" />
</div>
<div class="newsTeaser-content">
<div class="newsTeaser-metadata">
<span class="newsTeaser-metadata-item is-date">01.01.2024</span>
<span class="newsTeaser-metadata-item is-media">Springfield Shopper</span>
</div>
<div class="newsTeaser-title">
<strong>Ich bin der Titel</strong>
</div>
<div class="newsTeaser-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>
</div>
<div class="newsTeaser-interactions">
<a href="#" class="button is-small is-icon-only"><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">News anzeigen</span></a>
</div>
</div>
<div class="newsTeaser{{#modifier}} {{.}}{{/modifier}}">
{{#logo}}
<div class="newsTeaser-logo">
<img src="{{path src}}" alt="{{alt}}"/>
</div>
{{/logo}}
<div class="newsTeaser-content">
{{#metadata}}
<div class="newsTeaser-metadata">
{{#date}}<span class="newsTeaser-metadata-item is-date">{{{.}}}</span>{{/date}}
{{#media}}<span class="newsTeaser-metadata-item is-media">{{{.}}}</span>{{/media}}
</div>
{{/metadata}}
{{#notice}}
<div class="newsTeaser-notice">
{{{.}}}
</div>
{{/notice}}
{{#title}}
<div class="newsTeaser-title">
<strong>{{{.}}}</strong>
</div>
{{/title}}
{{#description}}
<div class="newsTeaser-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="newsTeaser-interactions">
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
/* Default */
{
"metadata": {
"date": "01.01.2024",
"media": "Springfield Shopper"
},
"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",
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
]
}
/* With Notice */
{
"metadata": {
"date": "01.01.2024",
"media": null
},
"title": "Ich bin der Titel",
"description": null,
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": "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."
}
/* With Logo */
{
"metadata": {
"date": "01.01.2024",
"media": "Springfield Shopper"
},
"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",
"ctas": [
{
"is-icon-only": true,
"modifier": "is-small",
"label": "News anzeigen",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
],
"notice": null,
"logo": {
"src": "/images/placeholder/logo-001-cropped.svg",
"alt": "Acme Co"
}
}
@import "_newsTeaser.styles";
.newsTeaser {
@include stack-spacing(component);
@include box-padding();
@include border-radius();
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--bp);
background-color: $_backdrop-color;
box-shadow: none;
transition: box-shadow $_transition-duration;
position: relative;
&:hover {
box-shadow: var(--bs);
transition-duration: $_transition-duration--in;
}
&-logo {
flex: 1 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
img {
@include stack-spacing(0);
width: 75%;
height: 75%;
object-fit: contain;
}
}
&-content {
> * + * {
@include stack-spacing(small);
}
}
&-metadata {
@extend %kicker;
@include stack-spacing(0);
&-item {
@extend %kicker-item;
}
}
&-notice,
&-description {
@include text-size(small);
> *:first-child {
@include stack-spacing(0);
}
}
&-title {
@include text-size(x-large);
}
&-interactions {
display: flex;
align-content: center;
flex-wrap: wrap;
gap: 1ch;
align-self: center;
.button {
@extend %button--small;
@include stack-spacing(0);
&::after {
content: "";
display: block;
position: absolute;
inset: 0;
}
}
}
@include only-on-desktop(){
flex-wrap: nowrap;
&-logo {
width: calc((100% - 2 * var(--bp) + var(--gg)) * #{math.div(3, 12)} - var(--gg));
}
&-logo + &-content {
padding-left: calc(var(--gg) - var(--bp));
}
}
}