Freie Grundschule Pfefferwerk - Frontend Design

Ce Media 

<div class="c-media o-space-b:default">
    <h2 class="u-typo:xl">Media Container</h2>
    <div class="c-media__content u-aspect-ratio-16x9">
        <!-- example youtube video -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/bNCzbzypWXY?rel=0"></iframe>
    </div>
    <figure class="c-figure">
        <figcaption class="c-media__figcaption u-typo:s">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</figcaption>
    </figure>
</div>
 
<div class="c-media {{spaceAfter}}">
    <h2 class="u-typo:xl">{{title}}</h2>
    <div class="c-media__content {{#if falVideo}}u-aspect-ratio-16x9{{/if}}">
        {{#if youtube}}
            <!-- example youtube video -->
            <iframe width="560" height="315" src="https://www.youtube.com/embed/bNCzbzypWXY?rel=0"></iframe>
        {{/if}}
        {{#if falImage}}
            {{render '@image--16x9'}}
        {{/if}}
    </div>
    {{#if falVideo}}
        <figure class="c-figure">
            <figcaption class="c-media__figcaption u-typo:s">{{caption}}</figcaption>
        </figure>
    {{/if}}
</div>
 
{
  "spaceAfter": "o-space-b:default",
  "title": "Media Container",
  "caption": "Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.",
  "falVideo": true,
  "youtube": true,
  "falImage": null
}

There are no notes for this item.