<details id="accordion-50942-72913" class="accordion">
<summary class="accordion__summary has-underline">
<h2 class="accordion__summary-text u-underline">This is an accordion summary</h2>
<span class="accordion__summary-icon">
<svg class="icon icon--arrow-down" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down"></use>
</svg> </span>
</summary>
<div class="accordion__blocks">
<div id="accordion-50942-72913-block-1" class="accordion__block">
<div class="text">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
</div>
<div id="accordion-50942-72913-block-2" class="accordion__block accordion__block--aside">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div id="accordion-50942-72913-block-3" class="accordion__block">
<div class="text">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
</div>
<div id="accordion-50942-72913-block-4" class="accordion__block accordion__block--aside">
<a class="button" href="#">
<span class="button__text u-underline">This is a button</span>
</a>
</div>
</div>
</details>
{% set level = level ??? 1 %}
{% set id = id ??? html_id('accordion') -%}
<details {{ html_attributes({
id: id,
class: 'accordion',
open: open ?? false,
}, attrs ?? {}) }}>
<summary class="accordion__summary has-underline">
{% set headlineTag = "h#{level + 1}" %}
<{{ headlineTag }} class="accordion__summary-text u-underline">
{{- summary -}}
</{{ headlineTag }}>
<span class="accordion__summary-icon">
{% include '@icon' with { icon: 'arrow-down' } only %}
</span>
</summary>
{% headlines level: level + 2, size: 5 %}
<div class="accordion__blocks">
{% for block in blocks %}
<div {{ html_attributes({
id: block.id | default("block-#{loop.index}") | namespaceInputId(id),
class: {
'accordion__block': true,
'accordion__block--aside': block.aside ?? false,
},
}) }}>
{{ block.content }}
</div>
{% endfor %}
</div>
{% endheadlines %}
</details>
{
"summary": "This is an accordion summary",
"blocks": [
{
"content": "!twig\n\n{% set text %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endset %}\n\n{% include '@text' with { text } only %}\n"
},
{
"aside": true,
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% set text %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endset %}\n\n{% include '@text' with { text } only %}\n"
},
{
"aside": true,
"content": "!twig\n\n{% include '@button' with {\n text: 'This is a button',\n link: '#',\n} only %}\n"
}
]
}
.accordion {
--_accordion-open: 0;
--_accordion-summary-min-block-size: 4.4rem;
--_accordion-border-width: var(--accordion-border-width, 1px);
--_accordion-border-style: var(--accordion-border-style, solid);
--_accordion-border-color: var(--color-gray-400);
background-color: var(--accordion-background-color, var(--color-gray-050));
border-color: var(--_accordion-border-color);
border-radius: var(--accordion-border-radius, calc(var(--_accordion-summary-min-block-size) / 2));
border-style: var(--_accordion-border-style);
border-width: var(--_accordion-border-width);
box-shadow: var(--box-shadow-xxl);
overflow: clip;
&:is([open]) {
--_accordion-open: 1;
}
}
.accordion__summary {
align-items: center;
appearance: none;
color: var(--accordion-summary-color, var(--color-steel-700));
cursor: pointer;
display: flex;
font-size: var(--accordion-summary-font-size, var(--font-size-enlarged));
font-weight: var(--accordion-summary-font-size, var(--font-weight-bold));
justify-content: space-between;
min-block-size: var(--_accordion-summary-min-block-size);
padding-block: var(--accordion-summary-padding-block, 0);
user-select: none;
&::-webkit-details-marker,
&::marker {
display: none;
}
}
.accordion__summary-text {
font-size: inherit;
font-weight: inherit;
padding-inline: var(--accordion-summary-padding-inline, 2.4rem);
}
.accordion__summary-icon {
--_accordion-summary-icon-block-size: calc(var(--_accordion-summary-min-block-size) * 0.75);
--icon-size: var(--accordion-summary-icon-size, calc(var(--_accordion-summary-icon-block-size) * 0.6));
align-items: center;
aspect-ratio: 1;
background-color: var(--accordion-summary-icon-background-color, var(--color-orange-500));
block-size: calc(var(--_accordion-summary-icon-block-size));
border-radius: var(--accordion-summary-icon-border-radius, 50%);
color: var(--accordion-summary-icon-color, var(--color-white));
display: flex;
flex-shrink: 0;
justify-content: center;
margin-inline-end: calc((var(--_accordion-summary-min-block-size) - var(--_accordion-summary-icon-block-size)) / 2);
rotate: calc(-180deg * var(--_accordion-open));
transform-origin: 50% 50%;
transition-duration: var(--duration-long);
transition-property: rotate;
}
.accordion__blocks {
border-block-start-color: var(--_accordion-border-color);
border-block-start-style: var(--_accordion-border-style);
border-block-start-width: var(--_accordion-border-width);
padding-block: var(--accordion-padding-block-end, 2.4rem);
padding-inline: var(--accordion-padding-inline, 2.4rem);
}
.accordion__block {
margin-block: var(--accordion-block-spacing, 2.4rem);
&:is(:first-child) {
margin-block-start: 0;
}
&:is(:last-child) {
margin-block-end: 0;
}
}
No notes defined.