<div id="card-61244-54334" class="card">
<div class="card__inner">
<div class="card__icon">
<img class="card__icon-inner" width="50" height="50" role="presentation" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E
">
</div>
<div class="card__pills">
<div class="pill pill--orange"><span class="pill__text u-underline">Analysis</span></div>
<div class="pill pill--yellow"><span class="pill__text u-underline">Broadcast</span></div>
<div class="pill pill--green"><span class="pill__text u-underline">DJ-Tool</span></div>
</div>
<div class="card__headline">
<h1 id="card-61244-54334-headline" class="headline" data-headline-size="4"><span class="headline__text">Elastique</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>Time stretching & pitch shifting</span></h1>
</div>
<div class="card__description">
zplane's ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases
</div>
<div class="card__button">
<a class="button u-overlay-link button--secondary" href="#" aria-describedby="card-61244-54334-headline">
<span class="button__text u-underline">Learn more</span>
</a>
</div>
</div>
</div>
{% set id = id ??? html_id('card') %}
{% set level = level ??? 1 %}
{% set headlineId = headline|default ? 'headline' | namespaceInputId(id) %}
<div {{ html_attributes({
id: id ?? false,
class: 'card',
}, attrs ?? {}) }}>
<div class="card__inner">
{% if icon|default %}
<div class="card__icon">
<img {{ html_attributes({
class: 'card__icon-inner',
width: 50,
height: 50,
role: 'presentation',
alt: '',
src: icon,
}) }}>
</div>
{% endif %}
{% if pills|default %}
<div class="card__pills">
{% for pill in pills %}
{% include '@pill' with pill only %}
{% endfor %}
</div>
{% endif %}
{% if headline|default %}
<div class="card__headline">
{% include '@headline' with headline | merge({
id: headlineId,
level,
size: 4,
}) only %}
</div>
{% endif %}
{% if description|default %}
<div class="card__description">
{{ description }}
</div>
{% endif %}
{% if button|default %}
<div class="card__button">
{% include '@button' with button | merge({
overlay: true,
secondary: true,
attrs: {
'aria-describedby': headlineId,
},
}) only %}
</div>
{% endif %}
</div>
</div>
{
"icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E\n",
"pills": [
{
"color": "orange",
"text": "Analysis"
},
{
"color": "yellow",
"text": "Broadcast"
},
{
"color": "green",
"text": "DJ-Tool"
}
],
"headline": {
"text": "Elastique",
"subhead": "Time stretching & pitch shifting"
},
"description": "zplane's ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases\n",
"button": {
"link": "#",
"text": "Learn more"
}
}
@use 'a11y';
.card {
--_card-scale: 1;
--_card-engaged: 0;
border-radius: var(--border-radius-large);
container-name: card;
container-type: inline-size;
position: relative;
scale: var(--_card-scale);
transition-property: scale;
&:has(:any-link:hover, :any-link:focus-visible) {
--_card-scale: 1.05;
--_card-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(--_card-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(--_card-engaged));
pointer-events: none;
position: absolute;
transition-property: opacity;
z-index: 2;
}
}
.card__inner {
--overlay-link-inset: -100vh;
--overlay-link-z-index: 3;
align-items: center;
border-radius: var(--border-radius-large);
display: flex;
flex-direction: column;
justify-items: stretch;
overflow: clip;
padding: clamp(2.4rem, 5cqi, 4rem);
position: relative;
row-gap: max(2.4rem, 3cqi);
text-align: center;
z-index: 2;
}
.card__icon {
align-items: center;
aspect-ratio: 1;
background-color: var(--color-steel-700);
border-radius: 50%;
display: flex;
inline-size: 8rem;
justify-content: center;
margin-block-end: 1rem;
}
.card__icon-inner {
aspect-ratio: 1;
inline-size: 50%;
}
.card__pills {
--pill-font-size: 1.2rem;
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
}
.card__description {
font-size: var(--font-size-default);
line-height: var(--line-height-regular);
max-inline-size: 50ch;
}
.card__button {
--a11y-outline-width: 0;
}
No notes defined.