<div id="teasers-81813-49351" class="teasers teasers--3">
<div class="teasers__search-form">
<form id="teasers-81813-49351-search-form" class="inline-form" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<label for="teasers-81813-49351-search-form-input" class="u-hidden-visually">Search term</label>
<div class="inline-form__input">
<div id="teasers-81813-49351-search-form-input-container" class="input">
<div class="input__line"> <input class="input__input" id="teasers-81813-49351-search-form-input" data-input-type="text" type="text" placeholder="Enter search term..." /></div>
</div>
</div>
<div class="inline-form__button">
<button id="teasers-81813-49351-search-form" class="button" type="submit">
<span class="button__icon">
<svg class="icon icon--magnifying-glass" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#magnifying-glass"></use>
</svg> </span>
<span class="button__text u-underline">Search</span>
</button>
</div>
</form>
</div>
<div class="teasers__bar">
<div class="teasers__label">63 search results for „music“</div>
<div class="teasers__sorting">
<div class="teasers__sorting-label">
Sort By:
</div>
<ul class="teasers__sorting-links" role="list">
<li class="teasers__sorting-link" aria-current="true">
<strong>Relevance</strong>
</li>
<li class="teasers__sorting-link">
<a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Publish date</span></a>
</li>
</ul>
</div>
</div>
<div class="teasers__teasers">
<div class="teasers__teaser">
<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>
</div>
<div class="teasers__teaser">
<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>
</div>
<div class="teasers__teaser">
<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>
</div>
<div class="teasers__teaser">
<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>
</div>
<div class="teasers__teaser">
<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>
</div>
<div class="teasers__teaser">
<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>
</div>
</div>
<div class="teasers__pagination">
<div id="teasers-81813-49351-pagination" class="pagination">
<div class="pagination__inner">
<div class="pagination__current">Page 1 of 110</div>
<div class="pagination__buttons">
<button class="button" type="button" title="Previous page" disabled>
<span class="button__icon">
<svg class="icon icon--arrow-left" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-left"></use>
</svg> </span>
</button>
<a class="button" title="Next page" href="#">
<span class="button__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>
</div>
</div>
</div>
</div>
{% set id = id ??? html_id('teasers') %}
{% set level = level ??? 1 %}
<div {{ html_attributes({
id: id,
class: html_cva(
base: 'teasers',
variants: {
columns: {
1: 'teasers--1',
2: 'teasers--2',
3: 'teasers--3',
4: 'teasers--4',
},
},
default_variant: {
columns: '1',
},
).apply({
columns: columns ?? null,
}),
}, attrs ?? {}) }}>
{% if searchForm|default %}
<div class="teasers__search-form">
{% include '@inline-form' with searchForm | merge({
id: 'search-form' | namespaceInputId(id),
}) only %}
</div>
{% endif %}
{% if label|default or sortLinks|default %}
<div class="teasers__bar">
{% if label|default %}
<div class="teasers__label">
{{- label -}}
</div>
{% endif %}
{% if sortLinks|default %}
<div class="teasers__sorting">
<div class="teasers__sorting-label">
{{ 'Sort By:' }}
</div>
<ul class="teasers__sorting-links" role="list">
{% for sortLink in sortLinks %}
<li class="teasers__sorting-link"{{ sortLink.current|default ? ' aria-current="true"' }}>
{% if sortLink.current|default %}
<strong>{{- sortLink.text -}}</strong>
{% else %}
{% include '@link' with sortLink only %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% endif %}
{% if teasers|default %}
<div class="teasers__teasers">
{% for teaser in teasers %}
<div class="teasers__teaser">
{% include teaser.component with teaser.configuration | merge({
level: level,
}) only %}
</div>
{% endfor %}
</div>
{% else %}
<div class="teasers__empty">
{{ emptyMessage ?? ('No results' | t('site')) }}
</div>
{% endif %}
{% if pagination|default %}
<div class="teasers__pagination">
{% include '@pagination' with pagination | merge({
id: 'pagination' | namespaceInputId(id),
}) only %}
</div>
{% endif %}
</div>
{
"searchForm": {
"id": "inline-form",
"label": "Search term",
"input": {
"type": "text",
"placeholder": "Enter search term..."
},
"button": {
"text": "Search",
"icon": "magnifying-glass"
}
},
"pagination": {
"total": 110,
"current": 1,
"nextUrl": "#",
"prevUrl": null,
"jump": {
"name": "p"
}
},
"label": "63 search results for „music“",
"sortLinks": [
{
"link": "#",
"text": "Relevance",
"current": true
},
{
"link": "#",
"text": "Publish date"
}
],
"teasers": [
{
"component": "@teaser",
"configuration": {
"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"
}
},
{
"component": "@teaser",
"configuration": {
"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"
}
},
{
"component": "@teaser",
"configuration": {
"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"
}
},
{
"component": "@teaser",
"configuration": {
"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"
}
},
{
"component": "@teaser",
"configuration": {
"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"
}
},
{
"component": "@teaser",
"configuration": {
"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"
}
}
],
"columns": 3
}
.teasers {
container-name: teasers;
container-type: inline-size;
display: grid;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-template-columns: 1fr;
row-gap: var(--teasers-spacing, 2.4rem);
}
.teasers__search-form {
margin-block-end: 2.4rem;
}
.teasers__bar {
column-gap: var(--grid-gap);
display: flex;
flex-wrap: wrap;
font-size: var(--teasers-bar-font-size, var(--font-size-small));
justify-content: space-between;
line-height: var(--teasers-bar-line-height, var(--line-height-wide));
row-gap: var(--teasers-bar-spacing, 0.8rem);
}
.teasers__label {
font-weight: var(--teasers-bar-label-font-weight, var(--font-weight-bold));
}
.teasers__sorting {
column-gap: 1ch;
display: flex;
flex-wrap: wrap;
}
.teasers__sorting-links {
column-gap: 1ch;
display: flex;
flex-wrap: wrap;
list-style: none;
}
.teasers__sorting-link {
display: flex;
&:is(:not(:last-child))::after {
content: '/';
margin-inline-start: 1ch;
}
}
.teasers__teasers {
column-gap: var(--grid-gap);
display: grid;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-template-columns: 1fr;
row-gap: 3.2rem;
.teasers--2 & {
@container teasers (inline-size >= 50rem) {
grid-template-columns: 1fr 1fr;
row-gap: 4rem;
}
}
.teasers--3 & {
@container teasers (inline-size >= 50rem) {
grid-template-columns: 1fr 1fr;
row-gap: 4rem;
}
@container teasers (inline-size >= 70rem) {
grid-template-columns: 1fr 1fr 1fr;
}
}
.teasers--4 & {
@container teasers (inline-size >= 50rem) {
grid-template-columns: 1fr 1fr;
row-gap: 4rem;
}
@container teasers (inline-size >= 70rem) {
grid-template-columns: 1fr 1fr 1fr;
}
@container teasers (inline-size >= 100rem) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
}
.teasers__teaser {
display: flex;
}
.teasers__teaser > * {
inline-size: 100%;
}
.teasers__pagination {
margin-block-start: 0.8rem;
}
No notes defined.