PSI Software SE Design Library

Figure

Component: Figure

Implementation notes

The component can be used as follows:

  1. Only one source:
    • The image is output 1:1.
  2. Additionally an alternative source for mobile (sources):
    • On mobile, the alternative image is output.
    • The alternative can have a different aspect ratio.
  3. One image in different resolutions (srcset):
    • The image is output according to the breakpoints defined in srcset.
    • The alternatives must all have the same aspect ratio.
    • Attention: The width of the image file must correspond to the specified width in the source set!

Please note: Alternative sources (sources) and different resolutions (srcset) must not be used together. If different resolutions and sizes are needed together, this can be realized via alternative sources (sources).

<!-- Default -->
<figure class="figure" style="">

    <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Partial Caption -->
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>


<!-- With Link -->
<figure class="figure" style="">

    <a href="../../images/placeholder/dummy-image.jpg" target="_blank">
        <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

    </a>

    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- With Download-Link -->
<figure class="figure" style="">

    <a href="../../images/placeholder/dummy-image.jpg" download target="_blank">
        <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

    </a>

    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Fixed Aspect Ratio Landscape -->
<figure class="figure" data-orientation="landscape" style=" object-position: 80% 35%;">

    <a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
        <img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />

    </a>

    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Fixed Aspect Ratio Upright -->
<figure class="figure" data-orientation="upright" style=" object-position: 80% 35%;">

    <a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
        <img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />

    </a>

    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Custom Aspect Ratio -->
<figure class="figure" style="--ratio: 1.7778; object-position: 80% 35%;">

    <a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
        <img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />

    </a>

    <figcaption class="figure-caption"><span>Abbildung auf ein frei definiertes Seitenverhältnis zugeschnitten (z.B. 16:9)</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- intrinsic Aspect Ratio -->
<figure class="figure" data-intrinsic-ratio="true" style="">

    <img class="figure-image" src="../../images/placeholder/flow-chart.svg" alt="Alternative Bildbeschreibung" />

    <figcaption class="figure-caption"><span>Abbildung mit freiem Seitenverhältnis (nur für Grafiken)</span><small class="figure-copyright">Quelle: Unbekannt</small></figcaption>

</figure>


<!-- intrinsic Aspect Ratio Upright -->
<figure class="figure" data-intrinsic-ratio="true" data-orientation="upright" style="">

    <img class="figure-image" src="../../images/placeholder/flow-chart-upright.svg" alt="Alternative Bildbeschreibung" />

    <figcaption class="figure-caption"><span>Abbildung mit freiem Seitenverhältnis (nur für Grafiken)</span><small class="figure-copyright">Quelle: Unbekannt</small></figcaption>

</figure>


<!-- Lazy Loading -->
<figure class="figure" style="">

    <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" loading="lazy" />

    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- With Sourceset -->
<figure class="figure" style="">

    <img class="figure-image" srcset="../../images/placeholder/dummy-image-640w.jpg 640w, ../../images/placeholder/dummy-image-1024w.jpg 1024w, ../../images/placeholder/dummy-image.jpg" sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, " src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

    <figcaption class="figure-caption"><span>Abbildung in unterschiedlichen Auflösungen für unterschiedliche Bildschirmgrößen</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Adaptive -->
<figure class="figure" style="">

    <picture>
        <source media="(max-width: 640px)" srcset="../../images/placeholder/dummy-image-square.jpg" />
        <source media="(max-width: 1024px)" srcset="../../images/placeholder/dummy-image-1024w.jpg" />
        <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
    </picture>

    <figcaption class="figure-caption"><span>Abbildung mit unterschiedlichen Ausschnitten für Desktop und Mobile</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Floating Copyright -->
<figure class="figure" style="">

    <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

    <figcaption class="figure-caption" data-floating="true"><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Hidden Copyright -->
<figure class="figure" style="">

    <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

    <figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

</figure>


<!-- Documentation only -->
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Abbildung</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Verlinkte Abbildung</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">
            <figure class="figure" style="">

                <a href="../../images/placeholder/dummy-image.jpg" target="_blank">
                    <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

                </a>

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Zugeschnittene Abbildungen</h2>

    </div>

    <div class="doc-variant">

        <header class="doc-variant-header">

            <h3 class="doc-variant-title">Querformat</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Attributes">
                    <li>[data-orientation="landscape"]</li>
                </ul>
            </div>

            <div class="doc-variant-notes">
                Mit festem Seitenverhältnis im Querformat (Default)
            </div>

        </header>

        <div class="doc-variant-samples">
            <figure class="figure" data-orientation="landscape" style=" object-position: 80% 35%;">

                <a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
                    <img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />

                </a>

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h3 class="doc-variant-title">Hochformat</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Attributes">
                    <li>[data-orientation="upright"]</li>
                </ul>
            </div>

            <div class="doc-variant-notes">
                Mit festem Seitenverhältnis im Hochformat
            </div>

        </header>

        <div class="doc-variant-samples">
            <figure class="figure" data-orientation="upright" style=" object-position: 80% 35%;">

                <a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
                    <img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />

                </a>

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h3 class="doc-variant-title">Angepasstes Seitenverhältnis</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Attributes">
                    <li>--ratio: 16/9</li>
                </ul>
            </div>

            <div class="doc-variant-notes">
                Mit individuell angepasstem Seitenverhältnis (z.B. 16:9)
            </div>

        </header>

        <div class="doc-variant-samples">
            <figure class="figure" style="--ratio: 1.7778; object-position: 80% 35%;">

                <a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
                    <img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />

                </a>

                <figcaption class="figure-caption"><span>Abbildung auf ein frei definiertes Seitenverhältnis zugeschnitten (z.B. 16:9)</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Mit freiem Seitenverhältnis</h2>

        <div class="doc-header-notes">
            Grafiken können mit freiem Seitenverhältnis dargestellt werden.
        </div>

    </div>

    <div class="doc-variant">

        <header class="doc-variant-header">

            <h3 class="doc-variant-title">Querformat</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Attributes">
                    <li>[data-intrinsic-ratio="true"] [data-orientation="landscape"]</li>
                </ul>
            </div>

        </header>

        <div class="doc-variant-samples">
            <figure class="figure" data-intrinsic-ratio="true" style="">

                <img class="figure-image" src="../../images/placeholder/flow-chart.svg" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Abbildung mit freiem Seitenverhältnis (nur für Grafiken)</span><small class="figure-copyright">Quelle: Unbekannt</small></figcaption>

            </figure>

        </div>

    </div>
    <div class="doc-variant">

        <header class="doc-variant-header">

            <h3 class="doc-variant-title">Hochformat</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Attributes">
                    <li>[data-intrinsic-ratio="true"] [data-orientation="upright"]</li>
                </ul>
            </div>

        </header>

        <div class="doc-variant-samples">
            <figure class="figure" data-intrinsic-ratio="true" data-orientation="upright" style="">

                <img class="figure-image" src="../../images/placeholder/flow-chart-upright.svg" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Abbildung mit freiem Seitenverhältnis (nur für Grafiken)</span><small class="figure-copyright">Quelle: Unbekannt</small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Lazy Loading</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" loading="lazy" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Mit verschiedenen Auflösungen</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">
            <figure class="figure" style="">

                <img class="figure-image" srcset="../../images/placeholder/dummy-image-640w.jpg 640w, ../../images/placeholder/dummy-image-1024w.jpg 1024w, ../../images/placeholder/dummy-image.jpg" sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, " src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Abbildung in unterschiedlichen Auflösungen für unterschiedliche Bildschirmgrößen</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Mit verschiedenen Ausschnitten</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">
            <figure class="figure" style="">

                <picture>
                    <source media="(max-width: 640px)" srcset="../../images/placeholder/dummy-image-square.jpg" />
                    <source media="(max-width: 1024px)" srcset="../../images/placeholder/dummy-image-1024w.jpg" />
                    <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
                </picture>

                <figcaption class="figure-caption"><span>Abbildung mit unterschiedlichen Ausschnitten für Desktop und Mobile</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>
<div class="doc-section">

    <div class="doc-header">

        <h2 class="doc-header-title">Mit Copyright im Bild</h2>

    </div>

    <div class="doc-variant">

        <div class="doc-variant-samples">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption" data-floating="true"><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>

    </div>

</div>


<!-- Default -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Partial Caption -->
<figcaption class="figure-caption"{{#if copyright.is-floating}} data-floating="true"{{/if}}{{#if copyright.is-hidden}} data-hidden="true"{{/if}}>{{#caption}}<span>{{{.}}}</span>{{/caption}}{{#copyright}}{{#if is-hidden}}<button tabindex="0"></button> {{/if}}<small class="figure-copyright">{{#if content}}{{{content}}}{{else}}{{{.}}}{{/if}}</small>{{/copyright}}</figcaption>

<!-- With Link -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- With Download-Link -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Fixed Aspect Ratio Landscape -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Fixed Aspect Ratio Upright -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Custom Aspect Ratio -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- intrinsic Aspect Ratio -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- intrinsic Aspect Ratio Upright -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Lazy Loading -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- With Sourceset -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Adaptive -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Floating Copyright -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Hidden Copyright -->
<figure class="figure{{#modifier}} {{.}}{{/modifier}}"{{#if intrinsic-ratio}} data-intrinsic-ratio="true"{{/if}}{{#if orientation}} data-orientation="{{orientation}}"{{/if}} style="{{#ratio}}--ratio: {{.}};{{/ratio}}{{#focuspoint}} object-position: {{.}};{{/focuspoint}}">

    {{#link}}<a href="{{path url}}"{{#if download}} download{{/if}}{{#target}} target="{{.}}"{{/target}}{{#title}} title="{{.}}"{{/title}}>
        {{/link}}{{#if sources}}<picture>
            {{#sources}}<source media="(max-width: {{max-width}}px)" srcset="{{path src}}" />{{/sources}}
        {{/if}}
            <img class="figure-image"{{#if srcset}} srcset="{{#srcset}}{{path src}} {{max-width}}w, {{/srcset}}{{path src}}" sizes="{{#srcset}}(max-width: {{max-width}}px) {{max-width}}px, {{/srcset}}"{{/if}} src="{{path src}}" alt="{{alt}}" {{#if is-lazyloading}} loading="lazy"{{/if}}/>
        {{#if sources}}</picture>
{{/if}}{{#link}}
    </a>{{/link}}

    {{#if caption}}
        {{> '@figure--partial-caption'}}
    {{else}}
        {{#if copyright}}
            {{> '@figure--partial-caption'}}
        {{/if}}
    {{/if}}

</figure>

<!-- Documentation only -->
{{#sections}}
<div class="doc-section">

    <div class="doc-header">

            {{#title}}
        <h2 class="doc-header-title">{{{.}}}</h2>
            {{/title}}

            {{#if attributes}}
        <div class="doc-header-configuration">
            <ul data-label="Attributes">
                    {{#attributes}}
                <li>{{{.}}}</li>
                    {{/attributes}}
            </ul>
        </div>
            {{/if}}

            {{#notes}}
        <div class="doc-header-notes">
            {{{.}}}
        </div>
            {{/notes}}

    </div>


        {{#variants}}
    <div class="doc-variant">

            {{#if title}}
        <header class="doc-variant-header">

                {{#title}}
            <h3 class="doc-variant-title">{{{.}}}</h3>
                {{/title}}

            <div class="doc-variant-configuration">
                    {{#if attributes}}
                <ul data-label="Attributes">
                        {{#attributes}}
                    <li>{{{.}}}</li>
                        {{/attributes}}
                </ul>
                    {{/if}}
            </div>

                {{#notes}}
            <div class="doc-variant-notes">
                {{{.}}}
            </div>
                {{/notes}}

        </header>
            {{/if}}

        <div class="doc-variant-samples">
            {{#figure}}
                {{render '@figure' (contextData '@figure' this) merge=true}}
            {{/figure}}
        </div>

    </div>
        {{/variants}}

</div>
    {{/sections}}
 
/* Default */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
}


/* Partial Caption */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
}


/* With Link */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "link": {
    "url": "/images/placeholder/dummy-image.jpg",
    "target": "_blank"
  }
}


/* With Download-Link */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "link": {
    "url": "/images/placeholder/dummy-image.jpg",
    "target": "_blank",
    "download": true
  }
}


/* Fixed Aspect Ratio Landscape */
{
  "src": "/images/placeholder/dummy-image-square.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "orientation": "landscape",
  "focuspoint": "80% 35%",
  "link": {
    "url": "/images/placeholder/dummy-image-square.jpg",
    "target": "_blank",
    "title": "Bild im ursprunglichen Format anzeigen …"
  }
}


/* Fixed Aspect Ratio Upright */
{
  "src": "/images/placeholder/dummy-image-square.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "orientation": "upright",
  "focuspoint": "80% 35%",
  "link": {
    "url": "/images/placeholder/dummy-image-square.jpg",
    "target": "_blank",
    "title": "Bild im ursprunglichen Format anzeigen …"
  }
}


/* Custom Aspect Ratio */
{
  "src": "/images/placeholder/dummy-image-square.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Abbildung auf ein frei definiertes Seitenverhältnis zugeschnitten (z.B. 16:9)",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "ratio": 1.7778,
  "focuspoint": "80% 35%",
  "link": {
    "url": "/images/placeholder/dummy-image-square.jpg",
    "target": "_blank",
    "title": "Bild im ursprunglichen Format anzeigen …"
  }
}


/* intrinsic Aspect Ratio */
{
  "src": "/images/placeholder/flow-chart.svg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Abbildung mit freiem Seitenverhältnis (nur für Grafiken)",
  "copyright": "Quelle: Unbekannt",
  "intrinsic-ratio": true
}


/* intrinsic Aspect Ratio Upright */
{
  "src": "/images/placeholder/flow-chart-upright.svg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Abbildung mit freiem Seitenverhältnis (nur für Grafiken)",
  "copyright": "Quelle: Unbekannt",
  "intrinsic-ratio": true,
  "orientation": "upright"
}


/* Lazy Loading */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "is-lazyloading": true
}


/* With Sourceset */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Abbildung in unterschiedlichen Auflösungen für unterschiedliche Bildschirmgrößen",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "srcset": [
    {
      "max-width": 640,
      "src": "/images/placeholder/dummy-image-640w.jpg"
    },
    {
      "max-width": 1024,
      "src": "/images/placeholder/dummy-image-1024w.jpg"
    }
  ]
}


/* Adaptive */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Abbildung mit unterschiedlichen Ausschnitten für Desktop und Mobile",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "sources": [
    {
      "max-width": 640,
      "src": "/images/placeholder/dummy-image-square.jpg"
    },
    {
      "max-width": 1024,
      "src": "/images/placeholder/dummy-image-1024w.jpg"
    }
  ]
}


/* Floating Copyright */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": null,
  "copyright": {
    "content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
    "is-floating": true
  }
}


/* Hidden Copyright */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": null,
  "copyright": {
    "content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
    "is-floating": true,
    "is-hidden": true
  }
}


/* Documentation only */
{
  "src": "/images/placeholder/dummy-image.jpg",
  "alt": "Alternative Bildbeschreibung",
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
  "sections": [
    {
      "title": "Abbildung",
      "variants": {
        "figure": {
          "src": "/images/placeholder/dummy-image.jpg",
          "alt": "Alternative Bildbeschreibung",
          "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
          "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
        }
      }
    },
    {
      "title": "Verlinkte Abbildung",
      "variants": {
        "figure": {
          "src": "/images/placeholder/dummy-image.jpg",
          "alt": "Alternative Bildbeschreibung",
          "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
          "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
          "link": {
            "url": "/images/placeholder/dummy-image.jpg",
            "target": "_blank"
          }
        }
      }
    },
    {
      "title": "Zugeschnittene Abbildungen",
      "variants": [
        {
          "title": "Querformat",
          "attributes": "[data-orientation=\"landscape\"]",
          "notes": "Mit festem Seitenverhältnis im Querformat (Default)",
          "figure": {
            "src": "/images/placeholder/dummy-image-square.jpg",
            "alt": "Alternative Bildbeschreibung",
            "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
            "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
            "orientation": "landscape",
            "focuspoint": "80% 35%",
            "link": {
              "url": "/images/placeholder/dummy-image-square.jpg",
              "target": "_blank",
              "title": "Bild im ursprunglichen Format anzeigen …"
            }
          }
        },
        {
          "title": "Hochformat",
          "attributes": "[data-orientation=\"upright\"]",
          "notes": "Mit festem Seitenverhältnis im Hochformat",
          "figure": {
            "src": "/images/placeholder/dummy-image-square.jpg",
            "alt": "Alternative Bildbeschreibung",
            "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
            "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
            "orientation": "upright",
            "focuspoint": "80% 35%",
            "link": {
              "url": "/images/placeholder/dummy-image-square.jpg",
              "target": "_blank",
              "title": "Bild im ursprunglichen Format anzeigen …"
            }
          }
        },
        {
          "title": "Angepasstes Seitenverhältnis",
          "attributes": "--ratio: 16/9",
          "notes": "Mit individuell angepasstem Seitenverhältnis (z.B. 16:9)",
          "figure": {
            "src": "/images/placeholder/dummy-image-square.jpg",
            "alt": "Alternative Bildbeschreibung",
            "caption": "Abbildung auf ein frei definiertes Seitenverhältnis zugeschnitten (z.B. 16:9)",
            "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
            "ratio": 1.7778,
            "focuspoint": "80% 35%",
            "link": {
              "url": "/images/placeholder/dummy-image-square.jpg",
              "target": "_blank",
              "title": "Bild im ursprunglichen Format anzeigen …"
            }
          }
        }
      ]
    },
    {
      "title": "Mit freiem Seitenverhältnis",
      "notes": "Grafiken können mit freiem Seitenverhältnis dargestellt werden.",
      "variants": [
        {
          "title": "Querformat",
          "attributes": "[data-intrinsic-ratio=\"true\"] [data-orientation=\"landscape\"]",
          "figure": {
            "src": "/images/placeholder/flow-chart.svg",
            "alt": "Alternative Bildbeschreibung",
            "caption": "Abbildung mit freiem Seitenverhältnis (nur für Grafiken)",
            "copyright": "Quelle: Unbekannt",
            "intrinsic-ratio": true
          }
        },
        {
          "title": "Hochformat",
          "attributes": "[data-intrinsic-ratio=\"true\"] [data-orientation=\"upright\"]",
          "figure": {
            "src": "/images/placeholder/flow-chart-upright.svg",
            "alt": "Alternative Bildbeschreibung",
            "caption": "Abbildung mit freiem Seitenverhältnis (nur für Grafiken)",
            "copyright": "Quelle: Unbekannt",
            "intrinsic-ratio": true,
            "orientation": "upright"
          }
        }
      ]
    },
    {
      "title": "Lazy Loading",
      "variants": {
        "figure": {
          "src": "/images/placeholder/dummy-image.jpg",
          "alt": "Alternative Bildbeschreibung",
          "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
          "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
          "is-lazyloading": true
        }
      }
    },
    {
      "title": "Mit verschiedenen Auflösungen",
      "variants": {
        "figure": {
          "src": "/images/placeholder/dummy-image.jpg",
          "alt": "Alternative Bildbeschreibung",
          "caption": "Abbildung in unterschiedlichen Auflösungen für unterschiedliche Bildschirmgrößen",
          "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
          "srcset": [
            {
              "max-width": 640,
              "src": "/images/placeholder/dummy-image-640w.jpg"
            },
            {
              "max-width": 1024,
              "src": "/images/placeholder/dummy-image-1024w.jpg"
            }
          ]
        }
      }
    },
    {
      "title": "Mit verschiedenen Ausschnitten",
      "variants": {
        "figure": {
          "src": "/images/placeholder/dummy-image.jpg",
          "alt": "Alternative Bildbeschreibung",
          "caption": "Abbildung mit unterschiedlichen Ausschnitten für Desktop und Mobile",
          "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
          "sources": [
            {
              "max-width": 640,
              "src": "/images/placeholder/dummy-image-square.jpg"
            },
            {
              "max-width": 1024,
              "src": "/images/placeholder/dummy-image-1024w.jpg"
            }
          ]
        }
      }
    },
    {
      "title": "Mit Copyright im Bild",
      "variants": {
        "figure": [
          {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Alternative Bildbeschreibung",
            "caption": null,
            "copyright": {
              "content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
              "is-floating": true
            }
          },
          {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Alternative Bildbeschreibung",
            "caption": null,
            "copyright": {
              "content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
              "is-floating": true,
              "is-hidden": true
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    import figure from "./_figure.script.js";

figure.init();
  • URL: /components/raw/figure/_figure.js
  • Filesystem Path: components/02-elements/figure/_figure.js
  • Size: 58 Bytes
  • Content: 
    export default (function (){

    function init() {

        const buttons = document.querySelectorAll('.figure-caption button');

        buttons.forEach(button => {

            button.addEventListener('click', () => {
                if (document.activeElement === button) {
                    button.blur();
                }
            });

        });

    }

    return {
        init: init
    }

})();
  • URL: /components/raw/figure/_figure.script.js
  • Filesystem Path: components/02-elements/figure/_figure.script.js
  • Size: 413 Bytes
  • Content: 
    $figure_caption_styles: (
    text-size: small,
    color: $_minor-color,
) !default;

$figure_copyright_styles: (
    text-size: x-small,
    font-family: $_font-family,
    font-style: normal,
    color: $_minor-color,
) !default;

$figure_action_scale: 1.03 !default;

$figure_copyright_icon: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="{{color}}" stroke-width="1.75" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"><path d="M19.125 10C19.125 15.0396 15.0396 19.125 10 19.125C4.9604 19.125 0.875 15.0396 0.875 10C0.875 4.9604 4.9604 0.875 10 0.875C15.0396 0.875 19.125 4.9604 19.125 10Z"/><path d="M13.5 7C11.8432 5.34314 9.15686 5.34314 7.5 7C5.84315 8.65685 5.84315 11.3431 7.5 13C9.15686 14.6569 11.8432 14.6569 13.5 13"/></svg>' !default;

$figure_copyright_size: 20px !default;

@import "_figure.settings";
@import "_figure.styles";

%figure {

    img {
        @include border-radius(small);
    }

    @include only-on-desktop(){

        &-caption {
            $min-columns: 6;
            $fraction: math.div($min-columns, $_grid_columns_count);

            max-width: (($_page_content_max-width + $_grid-gutter) * $fraction - $_grid-gutter);
        }

    }

}

%figure-caption––floating {
    position: absolute;
    bottom: var(--bp-small);
    right: var(--bp-small);
    z-index: 1;

    padding: 1px .5em;

    border-radius: var(--br-small);
    overflow: hidden;

    color: $_text-color;

    background-color: rgba(black, .3);
    backdrop-filter: blur(4px);

    transition: none $_transition-duration ease-in-out;

    &::after {
        content: "";

        display: block;

        position: absolute;
        inset: 0;
        z-index: -1;

        background: $_backdrop-color;
        opacity: .6;

        transition: inherit;
        transition-property: opacity;
    }

}

%figure-caption––hidden {
    @extend %figure-caption––floating;

    $padding: 4px;

    display: flex;
    padding: $padding;

    transition-property: max-width, max-height;
    transition-delay: $_transition-duration, 0s;

    overflow: hidden;

    @include apply-theme(default);

    &::after {
        transition-delay: 0s;
    }

    button {
        display: block;
        width: ($figure_copyright_size + 2 * $padding);
        height: ($figure_copyright_size + 2 * $padding);
        margin: (-1 * $padding);

        flex-shrink: 0;

        position: relative;
        z-index: 1;

        background: svg-url($figure_copyright_icon) center center no-repeat;

        text-indent: (2 * $figure_copyright_size);
        white-space: nowrap;
        overflow: hidden;

        outline: none;
    }

    .figure-copyright {
        display: block;

        line-height: $figure_copyright_size;
        padding-inline: $padding;

        transition: opacity $_transition-duration--in;
    }

    &:has(button) {
        max-width: (2 * $padding + $figure_copyright_size);
        max-height: (2 * $padding + $figure_copyright_size);

        .figure-copyright {
            opacity: 0;

            &::before {
                content: none;
            }

        }

    }

    &:focus-within {
        max-width: calc(100% - 2 * var(--bp-small));
        max-height: 100%;

        transition-duration: $_transition-duration !important;
        transition-delay: 0s, $_transition-duration;

        outline: none;

        .figure-copyright {
            opacity: 1;
            transition-delay: $_transition-duration;
        }

    }

}

%figure {
    position: relative;

    &-caption[data-floating="true"] {
        @extend %figure-caption––floating;
    }

    &-caption[data-hidden="true"] {
        @extend %figure-caption––hidden;
    }

    &:hover &-caption::after,
    &:focus-within &-caption::after {
        opacity: 1;
        transition-duration: $_transition-duration--in;
    }

    &-copyright {
        color: inherit;
    }

}
  • URL: /components/raw/figure/_figure.scss
  • Filesystem Path: components/02-elements/figure/_figure.scss
  • Size: 3.9 KB
  • Content: 
    $figure_background-color: transparent !default;

$figure_caption_styles: (
    text-size: small,
    color: $_minor-color,
) !default;

$figure_copyright_styles: (
    text-size: small,
    color: $_minor-color,
) !default;

$figure_aspect-ratio: math.div(3, 2) !default;
  • URL: /components/raw/figure/_figure.settings.scss
  • Filesystem Path: components/02-elements/figure/_figure.settings.scss
  • Size: 272 Bytes
  • Content: 
    %figure {
    $caption_gutter: 2ch;

    @include stack-spacing();
    max-width: 100%;

    --ratio: #{$figure_aspect-ratio};

    * {
        object-position: inherit;
    }

    img {
        display: block;
        width: 100%;

        aspect-ratio: var(--ratio, auto);
        object-fit: cover;

        pointer-events: none;
    }

    > a {
        display: block;
    }

    &[data-orientation="landscape"] {

        img {
            aspect-ratio: $figure_aspect-ratio;
        }

    }

    &[data-orientation="upright"] {

        img {
            aspect-ratio: math.div(1, $figure_aspect-ratio);
        }

    }

    &[data-intrinsic-ratio="true"] {

        img {
            aspect-ratio: auto;
        }

    }

    &-caption {
        @include stack-spacing(small);
        @include styles($figure_caption_styles);

        > span {
            padding-right: $caption_gutter;
        }

        @supports selector(:has(+ *)) {

            > span {
                padding-right: 0;

                &:has(+ %figure-copyright) {
                    padding-right: $caption_gutter;
                }

            }

        }

    }

    &-copyright {
        display: inline-block;
        width: max-content;
        max-width: 100%;

        @include styles($figure_copyright_styles);

        &::before {
           content: "\00a9\00a0";
        }

        a:link {
            color: inherit;
            text-decoration: underline;
        }

    }

}

.figure {
    @extend %figure;

    &-caption {
        @extend %figure-caption;
    }

    &-copyright {
        @extend %figure-copyright;
    }

}
  • URL: /components/raw/figure/_figure.styles.scss
  • Filesystem Path: components/02-elements/figure/_figure.styles.scss
  • Size: 1.6 KB