Swegon Component Library

Iframes Example Page 

<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <h2>Iframe 16:9 aspect ratio</h2>
            </div>
        </div>
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <div class="h-ratio h-ratio--16x9">
                    <iframe src="https://iframe.dacast.com/live/37b983f5-3e94-9865-8bf7-b0590e84a63a/c0ee15d2-5ce8-f8d9-6f83-276ac2fb4c2c"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <h2>Iframe 4:3 aspect ratio</h2>
            </div>
        </div>
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <div class="h-ratio h-ratio--4x3">
                    <iframe src="https://www.swegon.com/sv/"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <h2>Iframe 1:1 apsect ratio (default)</h2>
            </div>
        </div>
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <div class="h-ratio ">
                    <iframe src="https://www.swegon.com/sv/produkter/"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
 
{{#each iframes}}
    {{#> @panel theme="grey" modifiers="compact"}}
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <h2>{{title}}</h2>
            </div>
        </div>
        <div class="row row--justify-around h-text-align-center-m">
            <div class="col col--span-12 col--span-s-8">
                <div class="h-ratio {{getmodifiers ../modifiers 'h-ratio'}}">
                    <iframe src="{{src}}"></iframe>
                </div>
            </div>
        </div>
    {{/@panel}}
{{/each}}
 
{
  "marketSelectorModal": {
    "id": "market-selector",
    "closeLabel": "Stäng"
  },
  "iframes": [
    {
      "title": "Iframe 16:9 aspect ratio",
      "modifiers": "16x9",
      "src": "https://iframe.dacast.com/live/37b983f5-3e94-9865-8bf7-b0590e84a63a/c0ee15d2-5ce8-f8d9-6f83-276ac2fb4c2c"
    },
    {
      "title": "Iframe 4:3 aspect ratio",
      "modifiers": "4x3",
      "src": "https://www.swegon.com/sv/"
    },
    {
      "title": "Iframe 1:1 apsect ratio (default)",
      "src": "https://www.swegon.com/sv/produkter/"
    }
  ]
}

No notes defined.