Swegon Component Library

Two Column Block: With Video Player 

<div class="row ">
    <div class="col col--span-12 col--span-l-6 col--bottom-gutter-l col--no-gutter col--gutter-right-l">
        <section class="panel 
    panel--no-padding 
    panel--min-height-l h-full-height">
            <div class="video-player video-player--cover video-player--full-height" data-video-id=tMRqsKzuMd4 aria-busy="false">
                <div class="video-player__youtube"></div>
                <button class="video-player__cover" style="background-image: url(/mocks/img/video-cover.jpg);">
                    <span class="video-player__label">
                        Play video (2 min)
                    </span>
                </button>
                <div class="video-player__overlay">
                    <div class="video-player__overlay-content">
                        <p>Du måste godkänna <a href="#">cookies för marknadsföring</a> om du vill visa den här typen av innehåll från Swegon.</p>
                        <button class="button button--cover button--full-height video-player__overlay-button ">
                            <span class="button__label">Jag godkänner</span>
                        </button>
                    </div>
                    <div class="progress-indicator video-player__loader"></div>
                </div>
            </div>
        </section>
    </div>
    <div class="col col--span-12 col--span-l-6 col--bottom-gutter-l col--no-gutter col--gutter-left-l">
        <section class="panel 
    panel--compact 
    panel--min-height-l h-full-height">
            <div class="panel__inner">
                <div class="main-content">
                    <h2>Du är inte ensam</h2>
                    <h6 class="">
                        Bloggen för privatpersoner
                    </h6>
                    <p>Många har suttit i samma sits som du och frågat sig ”Hur gör vi med ventilationen?”. <a href="#">Och många tusentals har sedan</a> valt Swegon. Därför finns det massor av berättelser, till exempel om tekniska utmaningar som lösts, eller hur driftsekonomin blivit en glad överraskning. Referenserna är helt enkelt bevis på att vi levererar det vi utlovar – eller lite till.</p>
                    <a href="#" class="button ">
                        Guider
                    </a>
                </div>
            </div>
        </section>
    </div>
</div>
 
<div class="row {{#if reverse}}row--direction-row-reverse{{/if}}">
    <div class="col col--span-12 col--span-l-6 col--bottom-gutter-l col--no-gutter col--gutter-{{#if reverse}}left{{else}}right{{/if}}-l">
        {{#> @panel firstColumn}}
            <div class="main-content">
                {{#if title}}
                    <h2>{{{title}}}</h2>
                {{/if}}
                {{#if subtitle}}
                    <h6 class="{{#if subTitleColor}}h-text-color-{{subTitleColor}}{{/if}}">
                        {{{subtitle}}}
                    </h6>
                {{/if}}
                {{#if paragraph}}
                    {{{paragraph}}}
                {{/if}}
                {{#if cta}}
                    <a href="#" class="button {{#if buttonModifier}}{{buttonModifier}}{{/if}}">
                        {{cta}}
                    </a>
                {{/if}}
                {{#> @partial-block}}
                {{/@partial-block}}
            </div>
        {{/@panel}}
    </div>
    <div class="col col--span-12 col--span-l-6 col--bottom-gutter-l col--no-gutter col--gutter-{{#if reverse}}right{{else}}left{{/if}}-l">
        {{#> @panel secondColumn }}
            <div class="main-content">
                {{#if title}}
                    <h2>{{{title}}}</h2>
                {{/if}}
                {{#if subtitle}}
                    <h6 class="{{#if subTitleColor}}h-text-color-{{subTitleColor}}{{/if}}">
                        {{{subtitle}}}
                    </h6>
                {{/if}}
                {{#if paragraph}}
                    {{{paragraph}}}
                {{/if}}
                {{#if cta}}
                    <a href="#" class="button {{#if buttonModifier}}{{buttonModifier}}{{/if}}">
                        {{cta}}
                    </a>
                {{/if}}
                {{#> @partial-block}}
                {{/@partial-block}}
            </div>
        {{/@panel}}
    </div>
</div>
 
{
  "firstColumn": {
    "modifiers": [
      "no-padding",
      "min-height-l"
    ],
    "additionalClasses": "h-full-height",
    "withoutContent": true,
    "panelVideo": {
      "coverImageUrl": "/mocks/img/video-cover.jpg",
      "videoId": "tMRqsKzuMd4",
      "label": "Play video (2 min)",
      "modifiers": [
        "cover",
        "full-height"
      ]
    }
  },
  "secondColumn": {
    "additionalClasses": "h-full-height",
    "modifiers": [
      "compact",
      "min-height-l"
    ],
    "title": "Du är inte ensam",
    "subtitle": "Bloggen för privatpersoner",
    "paragraph": "<p>Många har suttit i samma sits som du och frågat sig ”Hur gör vi med ventilationen?”. <a href=\"#\">Och många tusentals har sedan</a> valt Swegon. Därför finns det massor av berättelser, till exempel om tekniska utmaningar som lösts, eller hur driftsekonomin blivit en glad överraskning. Referenserna är helt enkelt bevis på att vi levererar det vi utlovar – eller lite till.</p>",
    "cta": "Guider"
  }
}

No notes defined.