PSI Software SE Design Library

Media Inset

No notes defined.

<!-- Default -->
<div class="mediaInset">

    <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>


<!-- Upright -->
<div class="mediaInset">

    <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>


<!-- Fullwidth -->
<div class="mediaInset is-fullwidth">

    <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>


<!-- Graphic -->
<div class="mediaInset is-fullwidth">

    <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>


<!-- Graphic Upright -->
<div class="mediaInset">

    <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>


<!-- Video -->
<div class="mediaInset">

    <figure class="videoPlayer">

        <div class="videoPlayer-video">
            <video class="video" controls poster="../../videos/placeholder/dummy-video.jpg">
                <source src="../../videos/placeholder/dummy-video.mp4" type="video/mp4" />
            </video>

        </div>

        <figcaption class="videoPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="videoPlayer-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>

    </figure>

</div>


<!-- Video Fullwidth -->
<div class="mediaInset is-fullwidth">

    <figure class="videoPlayer">

        <div class="videoPlayer-video">
            <video class="video" controls poster="../../videos/placeholder/dummy-video.jpg">
                <source src="../../videos/placeholder/dummy-video.mp4" type="video/mp4" />
            </video>

        </div>

        <figcaption class="videoPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="videoPlayer-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>

    </figure>

</div>


<!-- Audio -->
<div class="mediaInset">

    <figure class="audioPlayer">

        <div class="audioPlayer-audio">
            <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

        </div>

        <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
    </figure>

</div>


<!-- Audio With Poster -->
<div class="mediaInset">

    <figure class="audioPlayer">

        <div class="audioPlayer-poster" aria-hidden="true">
            <img src="../../audios/placeholder/dummy-audio-poster.jpg" alt="" />
        </div>

        <div class="audioPlayer-audio">
            <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

        </div>

        <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
    </figure>

</div>


<!-- Doc Only -->
<section class="doc-section">

    <h2 class="doc-section-title">Bild</h2>

    <section class="doc-variant">

        <div class="mediaInset">

            <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 class="mediaInset">

            <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>

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

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

            <h3 class="doc-variant-title">In voller Breite</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>is-fullwidth</li>
                </ul>
            </div>

        </header>

        <div class="mediaInset is-fullwidth">

            <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>

    </section>

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

    <h2 class="doc-section-title">Grafik</h2>

    <section class="doc-variant">

        <div class="mediaInset is-fullwidth">

            <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 class="mediaInset">

            <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>

    </section>

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

    <h2 class="doc-section-title">Video</h2>

    <section class="doc-variant">

        <div class="mediaInset">

            <figure class="videoPlayer">

                <div class="videoPlayer-video">
                    <video class="video" controls poster="../../videos/placeholder/dummy-video.jpg">
                        <source src="../../videos/placeholder/dummy-video.mp4" type="video/mp4" />
                    </video>

                </div>

                <figcaption class="videoPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="videoPlayer-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>

            </figure>

        </div>

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

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

            <h3 class="doc-variant-title">In voller Breite</h3>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>is-fullwidth</li>
                </ul>
            </div>

        </header>

        <div class="mediaInset is-fullwidth">

            <figure class="videoPlayer">

                <div class="videoPlayer-video">
                    <video class="video" controls poster="../../videos/placeholder/dummy-video.jpg">
                        <source src="../../videos/placeholder/dummy-video.mp4" type="video/mp4" />
                    </video>

                </div>

                <figcaption class="videoPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="videoPlayer-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>

            </figure>

        </div>

    </section>

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

    <h2 class="doc-section-title">Audiodatei</h2>

    <section class="doc-variant">

        <div class="mediaInset">

            <figure class="audioPlayer">

                <div class="audioPlayer-audio">
                    <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

                </div>

                <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
            </figure>

        </div>

        <div class="mediaInset">

            <figure class="audioPlayer">

                <div class="audioPlayer-poster" aria-hidden="true">
                    <img src="../../audios/placeholder/dummy-audio-poster.jpg" alt="" />
                </div>

                <div class="audioPlayer-audio">
                    <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

                </div>

                <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
            </figure>

        </div>

    </section>

</section>


<!-- Default -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Upright -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Fullwidth -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Graphic -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Graphic Upright -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Video -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Video Fullwidth -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Audio -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Audio With Poster -->
<div class="mediaInset{{#if description}} is-detailed{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    {{#figure}}
        {{render '@figure' (contextData '@mediainset' this) merge=true}}
    {{/figure}}

    {{#videoplayer}}
        {{render '@videoplayer' (contextData '@mediainset' this) merge=false}}
    {{/videoplayer}}

    {{#audioplayer}}
        {{render '@audioplayer' (contextData '@mediainset' this) merge=false}}
    {{/audioplayer}}

</div>

<!-- Doc Only -->
{{#sections}}
<section class="doc-section">

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

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

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

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

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

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

        </header>
            {{/if}}

        {{#samples}}
            {{render '@mediainset' (contextData '@mediainset' this) merge=true}}
        {{/samples}}

    </section>
        {{/variants}}

</section>
    {{/sections}}
 
/* Default */
{
  "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>"
  }
}


/* Upright */
{
  "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 …"
    }
  }
}


/* Fullwidth */
{
  "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>"
  },
  "modifier": "is-fullwidth"
}


/* Graphic */
{
  "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
  },
  "modifier": "is-fullwidth"
}


/* Graphic 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"
  }
}


/* Video */
{
  "figure": null,
  "videoplayer": {
    "video": {
      "poster": "/videos/placeholder/dummy-video.jpg",
      "sources": [
        {
          "type": "video/mp4",
          "src": "/videos/placeholder/dummy-video.mp4"
        }
      ]
    },
    "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
    "copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>"
  }
}


/* Video Fullwidth */
{
  "figure": null,
  "modifier": "is-fullwidth",
  "videoplayer": {
    "video": {
      "poster": "/videos/placeholder/dummy-video.jpg",
      "sources": [
        {
          "type": "video/mp4",
          "src": "/videos/placeholder/dummy-video.mp4"
        }
      ]
    },
    "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
    "copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>"
  }
}


/* Audio */
{
  "figure": null,
  "audioplayer": {
    "audio": {
      "show-controls": true,
      "src": "/audios/placeholder/dummy-audio.mp3"
    },
    "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
    "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>"
  }
}


/* Audio With Poster */
{
  "figure": null,
  "audioplayer": {
    "audio": {
      "show-controls": true,
      "src": "/audios/placeholder/dummy-audio.mp3"
    },
    "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
    "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
    "poster": "/audios/placeholder/dummy-audio-poster.jpg"
  }
}


/* Doc Only */
{
  "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>"
  },
  "sections": [
    {
      "title": "Bild",
      "variants": [
        {
          "samples": [
            {
              "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>"
              }
            },
            {
              "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": "In voller Breite",
          "modifiers": "is-fullwidth",
          "samples": [
            {
              "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>"
              },
              "modifier": "is-fullwidth"
            }
          ]
        }
      ]
    },
    {
      "title": "Grafik",
      "variants": [
        {
          "samples": [
            {
              "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
              },
              "modifier": "is-fullwidth"
            },
            {
              "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": "Video",
      "variants": [
        {
          "samples": [
            {
              "figure": null,
              "videoplayer": {
                "video": {
                  "poster": "/videos/placeholder/dummy-video.jpg",
                  "sources": [
                    {
                      "type": "video/mp4",
                      "src": "/videos/placeholder/dummy-video.mp4"
                    }
                  ]
                },
                "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
                "copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>"
              }
            }
          ]
        },
        {
          "title": "In voller Breite",
          "modifiers": "is-fullwidth",
          "samples": [
            {
              "figure": null,
              "modifier": "is-fullwidth",
              "videoplayer": {
                "video": {
                  "poster": "/videos/placeholder/dummy-video.jpg",
                  "sources": [
                    {
                      "type": "video/mp4",
                      "src": "/videos/placeholder/dummy-video.mp4"
                    }
                  ]
                },
                "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
                "copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>"
              }
            }
          ]
        }
      ]
    },
    {
      "title": "Audiodatei",
      "variants": [
        {
          "samples": [
            {
              "figure": null,
              "audioplayer": {
                "audio": {
                  "show-controls": true,
                  "src": "/audios/placeholder/dummy-audio.mp3"
                },
                "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
                "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>"
              }
            },
            {
              "figure": null,
              "audioplayer": {
                "audio": {
                  "show-controls": true,
                  "src": "/audios/placeholder/dummy-audio.mp3"
                },
                "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
                "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
                "poster": "/audios/placeholder/dummy-audio-poster.jpg"
              }
            }
          ]
        }
      ]
    }
  ]
}
  • Content: 
    %mediaInset {
    @include stack-spacing(section);

    .figure,
    .audioPlayer,
    .videoPlayer {
        margin-left: auto;
        margin-right: auto;
    }

    @include not-on-desktop(){

        .figure[data-orientation="upright"] {
            width: (math.div(2, 3) * 100%);
        }

    }

    @include only-on-desktop(){

        .figure,
        .audioPlayer,
        .videoPlayer {
            width: get-columns-width(8, 12);

            &[data-orientation="upright"] {
                width: get-columns-width(5, 12);
            }

        }

        &.is-fullwidth {

            .figure,
            .videoPlayer {
                width: 100%;

                &:not([data-intrinsic-ratio="true"]) img {
                    aspect-ratio: $mediaInset_fullwidth_aspect-ratio;
                }

            }

        }

    }

}

.mediaInset {
    @extend %mediaInset;
}
  • URL: /components/raw/mediainset/_mediaInset.styles.scss
  • Filesystem Path: components/04-modules/mediaInset/_mediaInset.styles.scss
  • Size: 893 Bytes