<div class="quote-box">
<div class="quote-box__image">
<picture class="image image--cover">
<img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<figure class="quote-box__content">
<svg class="icon icon--quote quote-box__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#quote"></use>
</svg>
<blockquote class="quote-box__quote">
Ich bin eine große Zitatbox, wenn man Wortschatz und die Grammatik so trainiert hat, dass man problemlos Texte in Büchern und Zeitungen verstehen kann.
</blockquote>
<figcaption class="quote-box__caption">
Zitat von Regina Greck
</figcaption>
</figure>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'quote-box',
}, attrs ?? {}) }}>
{% if image|default %}
<div class="quote-box__image">
{% include '@image' with image | merge({
cover: true,
}) only %}
</div>
{% endif %}
<figure class="quote-box__content">
{% include '@icon' with { icon: 'quote', class: 'quote-box__icon' } only %}
<blockquote class="quote-box__quote">
{{ quote | componentize }}
</blockquote>
{% if caption|default %}
<figcaption class="quote-box__caption">
{{ caption | componentize }}
</figcaption>
{% endif %}
</figure>
</div>
{
"image": {
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555,
"alt": "Das ist ein Platzhalter-Bild"
},
"quote": "Ich bin eine große Zitatbox, wenn man Wortschatz und die Grammatik so trainiert hat, dass man problemlos Texte in Büchern und Zeitungen verstehen kann.",
"caption": "Zitat von Regina Greck"
}
:root {
--quote-box-background-color: var(--color-cyan-light);
--quote-box-icon-color: var(--color-white);
--quote-box-font-weight: 600;
--quote-box-line-height: var(--line-height-default);
}
.quote-box {
background-color: var(--quote-box-background-color);
display: grid;
@include mq($from: m) {
grid-template-columns: 1fr 1fr;
}
}
.quote-box__image {
aspect-ratio: 1;
display: flex;
flex-direction: column;
@include mq($from: m) {
order: 1;
}
}
.quote-box__content {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
&:only-child {
grid-column-end: span 2;
}
@include use-responsive-sizing(padding-top padding-bottom, responsive-map(xs 3rem, l 6rem));
@include use-responsive-sizing(padding-right padding-left, responsive-map(xs 2rem, xl 5rem));
}
.quote-box__icon {
color: var(--quote-box-icon-color);
inset-block-start: 1.25rem;
inset-inline-start: -0.5rem;
position: absolute;
z-index: 1;
@include use-responsive-sizing(font-size, responsive-map(xs 7rem, xl 9rem));
@include mq($from: m) {
inset-block-start: 2rem;
inset-inline-start: 1rem;
}
}
.quote-box__quote {
font-weight: var(--quote-box-font-weight);
line-height: var(--quote-box-line-height);
position: relative;
z-index: 2;
@include use-responsive-sizing(padding-top, responsive-map(xs 2rem, l 0));
@include use-responsive-sizing(font-size, responsive-map(xs 2rem, xl 2.6rem));
}
.quote-box__caption {
font-size: 1.6rem;
line-height: var(--quote-line-height);
margin-block-start: 2rem;
}
No notes defined.