<figure id="quote-93351-62670" class="quote quote--block" role="figure" aria-labelledby="quote-93351-62670-caption">
<div class="quote__inner">
<img copyright="And this is image copyright line" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" class="quote__image" role="presentation" loading="lazy" alt="">
<div class="quote__quote-caption">
<blockquote class="quote__quote">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</blockquote>
<figcaption class="quote__caption" id="quote-93351-62670-caption">A quote from lorem ipsum dolor</figcaption>
<div class="quote__copyright">Image: And this is image copyright line</div>
</div>
</div>
</figure>
{% set id = id ?? html_id('quote') %}
{% set copyright = copyright ?? image.copyright ?? false %}
{% set caption = caption ?? false %}
{% set captionId = 'caption' | namespaceInputId(id) -%}
{% set quote = html_cva(
base: 'quote',
variants: {
block: {
false: null,
true: 'quote--block',
},
},
) %}
<figure {{ html_attributes({
id: id,
class: quote.apply({
block: block ?? true,
}),
role: 'figure',
'aria-labelledby': caption ? captionId,
}, attrs ?? {}) }}>
<div class="quote__inner">
{% if image|default %}
<img {{ html_attributes(image, {
class: 'quote__image',
role: 'presentation',
loading: 'lazy',
alt: '',
}) }}>
{% endif %}
<div class="quote__quote-caption">
<blockquote class="quote__quote">
{{- text | componentize(inline_only=true) -}}
</blockquote>
{% if caption %}
<figcaption class="quote__caption" id="{{ captionId }}">
{{- caption | componentize(inline_only=true) -}}
</figcaption>
{% endif %}
{% if copyright %}
<div class="quote__copyright">
{{- 'Image: {copyright}' | t('site', { copyright: copyright }) | componentize(inline_only=true) -}}
</div>
{% endif %}
</div>
</div>
</figure>
{
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua",
"caption": "A quote from lorem ipsum dolor",
"image": {
"copyright": "And this is image copyright line",
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555
}
}
.quote {
container-name: quote;
container-type: inline-size;
padding-block: var(--quote-padding-block, 0);
padding-inline: var(--quote-padding-inline, 0);
}
.quote__inner {
align-items: start;
column-gap: var(--quote-row-gap, 4rem);
display: flex;
flex-direction: column;
font-size: var(--quote-font-size, var(--font-size-default));
row-gap: var(--quote-row-gap, 3.2rem);
text-align: start;
.quote--block & {
align-items: start;
text-align: start;
@container quote (inline-size >= 50rem) {
flex-direction: row;
}
}
}
.quote__image {
aspect-ratio: 1;
border-radius: var(--quote-image-border-radius, 50%);
display: flex;
flex-direction: column;
flex-shrink: 0;
inline-size: clamp(15rem, 33cqi, 20rem);
object-fit: cover;
position: relative;
}
.quote__quote {
color: var(--quote-color, inherit);
font-size: var(--quote-font-size, var(--font-size-headline-4));
font-style: var(--quote-font-style, italic);
font-weight: var(--quote-font-weight, var(--font-weight-regular));
line-height: var(--quote-line-height, var(--line-height-narrow));
text-wrap: balance;
.quote--block & {
font-size: var(--quote-font-size, var(--font-size-headline-3));
}
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
.quote__caption {
color: var(--quote-caption-color, inherit);
font-size: var(--quote-caption-font-size, var(--font-size-default));
font-weight: var(--quote-caption-font-weight, var(--font-weight-bold));
line-height: var(--quote-caption-line-height, var(--line-height-regular));
margin-block-start: var(--quote-quote-margin-block, 1.5rem);
text-transform: var(--quote-caption-text-transform, uppercase);
}
.quote__copyright {
color: var(--quote-copyright-color, var(--secondary-text-color));
font-size: var(--quote-copyright-font-size, var(--font-size-caption));
line-height: var(--quote-line-height, var(--line-height-narrow));
margin-block-start: var(--quote-copyright-margin-block, 2rem);
}
No notes defined.