Swegon Component Library

Panel: With Video 

<section class="panel 
    panel--no-padding ">
    <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>
 
<section
    class="panel{{#if darkTheme}} theme--dark{{/if}}{{#if theme}} theme--{{theme}}{{/if}} {{ getmodifiers modifiers "
    panel" }} {{ additionalClasses }}">
    {{#if image}}
    <figure class="panel__figure">
        <img src="{{image.src}}" alt="{{image.alt}}" class="panel__image">
    </figure>
    {{/if}}
    {{#if panelVideo}}
    {{> @youtube-player panelVideo}}
    {{/if}}
    {{#unless withoutContent}}
    <div class="panel__inner">
        {{#> @partial-block }}
        <div class="row row--justify-around">
            <div class="col col--span-12 col--span-m-8 col--span-l-8  col--span-xl-8">
                <h1>Rumsprodukter</h1>

                {{#if expandedRte }}
                <div class="preamble">Vårt breda utbud av rumsprodukter gör det enkelt att hitta den perfekta lösningen
                    för varje typ av lokal. På så vis säkrar vi ett gott inomhusklimat, med rätt mängd frisk luft och
                    rätt temperatur,</div>
                <button type="button" class="rte-expanded-btn" aria-controls="expanded-block"
                    id="{{ rtePanelId }}-trigger" data-show-more="Show More" data-show-less="Show Less">Show
                    More</button>
                {{else}}
                <p>Vårt breda utbud av rumsprodukter gör det enkelt att hitta den perfekta lösningen för varje typ av
                    lokal. På så vis säkrar vi ett gott inomhusklimat, med rätt mängd frisk luft och rätt temperatur,
                    utan störande ljud och kalldrag. Tack vare stilren design smälter de dessutom in väl i miljöerna –
                    helst ska du inte ens märka av dem!</p>
                {{/if}}
            </div>
        </div>
        {{/@partial-block }}
    </div>
    {{/unless}}
</section>
 
{
  "content": "\n        <div class='row row--justify-around'>\n            <div class='col col--span-12 col--span-m-8 col--span-l-8  col--span-xl-8'>\n                <h1>Rumsprodukter</h1>\n                <p>Vårt breda utbud av rumsprodukter gör det enkelt att hitta den perfekta lösningen för varje typ av lokal. På så vis säkrar vi ett gott inomhusklimat, med rätt mängd frisk luft och rätt temperatur, utan störande ljud och kalldrag. Tack vare stilren design smälter de dessutom in väl i miljöerna – helst ska du inte ens märka av dem!</p>\n            </div>\n        </div>\n        ",
  "modifiers": [
    "no-padding"
  ],
  "panelVideo": {
    "coverImageUrl": "/mocks/img/video-cover.jpg",
    "videoId": "tMRqsKzuMd4",
    "label": "Play video (2 min)",
    "modifiers": [
      "cover",
      "full-height"
    ]
  },
  "withoutContent": true
}
  • Content: 
    import ObjectFitImages from 'object-fit-images';
const images = document.querySelectorAll('.panel__image');

ObjectFitImages(images);
  • URL: /components/raw/panel/index.js
  • Filesystem Path: src/components/panel/index.js
  • Size: 134 Bytes
  • Content: 
    .panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: size(5);
    padding-bottom: size(6);

    @include breakpoint($l) {
        padding-top: size(10);
        padding-bottom: size(10);
    }

    // exception to make li-elements left aligned at all times
    li {
        text-align: left;
    }

    &--margin-bottom {
        @include breakpoint-classes {
            margin-bottom: size(2);
        }
    }

    &--margin-bottom-3 {
        @include breakpoint-classes {
            margin-bottom: size(3);
        }
    }

    &--margin-vertical {
        @include breakpoint-classes {
            margin: size(2) 0;
        }
    }

    &--margin-bottom-small {
        @include breakpoint-classes {
            margin-bottom: size(2);
        }
    }

    &--margin-bottom-medium {
        @include breakpoint-classes {
            margin-bottom: size(2);

            @include breakpoint($m) {
                margin-bottom: size(3);
            }

            @include breakpoint($l) {
                margin-bottom: size(8);
            }
        }
    }

    &--margin-bottom-large {
        @include breakpoint-classes {
            margin-bottom: size(9);

            @include breakpoint($m) {
                margin-bottom: size(12);
            }

            @include breakpoint($l) {
                margin-bottom: size(14.5);
            }
        }
    }

    &--no-padding-top {
        @include breakpoint-classes-down {
            padding-top: 0;
        }
    }

    &--no-padding-bottom {
        padding-bottom: 0;
    }

    &--no-padding-vertical {
        @include breakpoint-classes-down {
            padding-top: 0;
            padding-bottom: 0;
        }
    }

    &--no-padding {
        padding: 0;
    }

    &--no-spacing-bottom {
        @include breakpoint-classes {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }

    &--min-height {
        @include breakpoint-classes {
            height: 100%;
            min-height: size(56);
        }
    }

    &--compact {
        @include spacing-main-inner
    }

    &--desktop-width-extension {
        @include breakpoint($m) {
            width: auto;
            margin-right: 32px;
            margin-left: 32px;
        }
    }

    &--padding-bottom-medium {
        @include breakpoint-classes {
            padding-bottom: size(2);

            @include breakpoint($m) {
                padding-bottom: size(3);
            }

            @include breakpoint($l) {
                padding-bottom: size(8);
            }
        }
    }

    &--padding-bottom-large {
        @include breakpoint-classes {
            padding-bottom: size(9);

            @include breakpoint($m) {
                padding-bottom: size(12);
            }

            @include breakpoint($l) {
                padding-bottom: size(14.5);
            }
        }
    }

    &--fixed-column-button {
        .panel__inner {
            @include breakpoint($m) {
                display: flex;
                flex-grow: 1;
            }
        }

        .main-content {
            @include breakpoint($m) {
                padding: 0 0 80px;
                position: relative;
                flex-grow: 1;
            }

            .button {
                @include breakpoint($m) {
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }

    &--full-width-extend-right {
        width: auto;
        margin: 0 -16px 0 0;

        @include breakpoint($m) {
            margin: 0 -48px 0 0;
        }

        .custom-scroller {
            .mb-track-x {
                width: calc(100% - 16px);

                @include breakpoint($m) {
                    width: calc(100% - 48px);
                }
            }
        }
    }

    &--tiny-padding-vertical {
        @include breakpoint-classes {
            padding-top: size(1);
            padding-bottom: size(1);
        }
    }

    &--border {
        border: 1px solid $color-gray-2;
    }

    &--image-overlay {

        .panel__figure {
            &:before {
                @include breakpoint($m) {
                    position: absolute;
                    content: '';
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    background: $color-black;
                    opacity: .4;
                    z-index: 1;
                }
            }
        }

        &.panel--image-background-static {
            .panel__figure {
                &:before {
                    position: absolute;
                    content: '';
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    background: $color-black;
                    opacity: .4;
                    z-index: 1;
                }
            }
        }
    }

    &--image-overlay.hero__secondary {

        position: relative;

        &:before {
            @include breakpoint($m) {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: $color-black;
                opacity: .4;
                z-index: 1;
            }
        }

        // Moves text, button to the front
        p {
            position: relative;
            z-index: 2;
        }
    }
}

.panel__figure {
    position: relative;
    margin: 0 0 size(2);
    display: block;
    height: 36vw;

    .panel--no-margin-image & {
        margin: 0;
    }

    @include breakpoint($l) {
        height: auto;
    }

    .panel--compact & {
        @include spacing-main-inner(margin, true)
    }
}

.panel--image-background {
    @include breakpoint-classes {
        .panel__figure {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: $z-neutral;
            margin: 0;

            &:after {
                padding-bottom: 36.5%;
            }
        }
    }
}

.panel--image-background-l,
.panel--image-background-m {
    @include breakpoint($m) {
        min-height: 240px;
    }

    @include breakpoint($l) {
        min-height: 300px;
    }
}

.panel--image-background-static {
    @include breakpoint($m) {
        min-height: 240px;
    }

    @include breakpoint($l) {
        min-height: 300px;
    }

    .panel__figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: $z-neutral;
        margin: 0;

        &:after {
            padding-bottom: 36.5%;
        }
    }
}

.panel--image-fullsize {
    @include breakpoint-classes-down {
        .panel__figure {
            height: auto;

            &:after {
                display: none;
            }
        }

        .panel__image {
            position: relative;
        }
    }
}

.panel__image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover;";
}

.panel-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: $color-black;
    opacity: .4;
    z-index: 1;
    display: none;
}

.panel__inner {
    position: relative;
    -ms-overflow-x: hidden;
}

.panel:has(.hero-logotypes-wrapper) {
    padding-bottom: 24px;
}
  • URL: /components/raw/panel/panel.scss
  • Filesystem Path: src/components/panel/panel.scss
  • Size: 7.8 KB

No notes defined.