<div class="teaser has-underline">
<div class="teaser__inner">
<div class="teaser__image">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
</picture>
</div>
<div class="teaser__content">
<time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>
<a class="teaser__headline u-overlay-link" href="#">
<span class="teaser__headline-text">
<h1 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h1>
</span><span class="teaser__headline-icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
</svg></span></a>
<div class="teaser__description">
<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>
</div>
</div>
</div>
</div>
{% set level = level ??? 1 %}
{% set link = link ?? null %}
{% set headlineTag = link ? 'a' : 'div' %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ??? link_icon(link=link, type=linkType, always=true) %}
<div {{ html_attributes({
id: id ?? false,
class: {
'teaser': true,
'has-underline': link,
},
}, attrs ?? {}) }}>
<div class="teaser__inner">
{% if image|default %}
<div class="teaser__image">
{% include '@image' with image only %}
</div>
{% endif %}
<div class="teaser__content">
{% if date|default %}
<time class="teaser__date" datetime="{{ date | date('Y-m-d') }}">
{{- date | date('long') -}}
</time>
{% endif %}
{% if headline|default %}
<{{ headlineTag }} {{ html_attributes({
class: {
'teaser__headline': true,
'u-overlay-link': link,
},
}, linkAttrs ?? link_attributes(link=link, type=linkType)) }}>
<span class="teaser__headline-text">
{%- apply spaceless -%}
{%- include '@headline' with headline | merge({
level: level,
size: 6,
underline: link,
}) only -%}
{%- endapply -%}
</span>
{%- if link|default -%}
<span class="teaser__headline-icon">
{{- '' | raw -}}
{%- include '@icon' with { icon: icon } only -%}
</span>
{%- endif -%}
</{{ headlineTag }}>
{% endif %}
{% if description|default %}
<div class="teaser__description">
{{ description | componentize(inline_only=true) }}
</div>
{% endif %}
</div>
</div>
</div>
{
"link": "#",
"date": "2024-11-21T00:00:00.000Z",
"image": {
"src": "https://bildermangel.de/848x512/fe7c09/130f26.webp"
},
"headline": {
"text": "An Interview with Jay-Z Producer and Music Teacher, Ski Beatz"
},
"description": "<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>\n"
}
@use 'a11y';
.teaser {
--_teaser-scale: 1;
--_teaser-engaged: 0;
border-radius: var(--border-radius-large);
container-name: teaser;
container-type: inline-size;
position: relative;
scale: var(--_teaser-scale);
transition-property: scale;
&:has(:any-link:hover, :any-link:focus-visible) {
--_teaser-scale: 1.05;
--_teaser-engaged: 1;
}
&:has(:any-link:focus-visible) {
@include a11y.outline();
}
&::before {
background-color: var(--color-white);
border-radius: inherit;
box-shadow: var(--box-shadow-xxl);
content: '';
inset: 0;
opacity: var(--_teaser-engaged);
position: absolute;
transition-property: opacity;
z-index: 1;
}
&::after {
border: 1px solid var(--color-gray-200);
border-radius: inherit;
content: '';
inset: 0;
opacity: calc(1 - var(--_teaser-engaged));
pointer-events: none;
position: absolute;
transition-property: opacity;
z-index: 2;
}
}
.teaser__inner {
--overlay-link-inset: -100vh;
--overlay-link-z-index: 3;
align-content: start;
border-radius: var(--border-radius-large);
color: var(--teaser-color, inherit);
column-gap: 3.2rem;
display: flex;
flex-wrap: wrap;
overflow: clip;
position: relative;
text-align: var(--teaser-text-align, start);
z-index: 2;
@container teaser (inline-size >= 70rem) {
padding: 3.2rem;
}
}
.teaser__image {
block-size: max-content;
inline-size: 100%;
@container teaser (inline-size >= 70rem) {
border-radius: var(--border-radius-medium);
max-inline-size: calc(30% - 1.6rem);
overflow: clip;
}
}
.teaser__content {
column-gap: var(--teaser-column-gap, 2rem);
display: flex;
flex-direction: column;
flex-wrap: wrap;
inline-size: 100%;
justify-content: flex-start;
padding: 2.4rem;
row-gap: 1.6rem;
z-index: 2;
@container teaser (inline-size >= 70rem) {
padding: 0;
.teaser:has(.teaser__image) & {
inline-size: calc(70% - 1.6rem);
}
}
}
.teaser__headline {
--a11y-outline-width: 0;
--headline-display: inline;
--headline-hyphens: auto;
--headline-text-wrap: balance;
--underline-thickness: 2px;
}
.teaser__headline-icon {
color: var(--color-steel-700);
margin-inline-start: 0.5em;
vertical-align: 0.1em;
white-space: nowrap;
}
.teaser__date {
align-self: flex-end;
color: var(--teaser-date-color, var(--color-gray-500));
font-size: var(--teaser-date-font-size, var(--font-size-caption));
font-weight: var(--teaser-date-font-weight, var(--font-weight-regular));
inline-size: 100%;
line-height: var(--teaser-date-line-height, var(--line-height-regular));
}
.teaser__description {
color: var(--teaser-description-color, var(--color-gray-900));
font-size: var(--teaser-description-font-size, var(--font-size-default));
font-weight: var(--teaser-description-font-weight, var(--font-weight-regular));
line-height: var(--teaser-description-line-height, var(--line-height-regular));
max-inline-size: 70rem;
> * + * {
margin-block-start: 0.5lh;
}
}
No notes defined.