Swegon Component Library

Panel: With Image Overlay 

<section class="panel 
    panel--image-background-m 
    panel--image-overlay 
    panel--no-padding-top-m-down ">
    <figure class="panel__figure">
        <img src="/mocks/img/hero-startpage.jpg" alt="" class="panel__image">
    </figure>
    <div class="panel__inner">
        <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>

                <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>
            </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": [
    "image-background-m",
    "image-overlay",
    "no-padding-top-m-down"
  ],
  "image": {
    "src": "/mocks/img/hero-startpage.jpg",
    "alt": ""
  }
}
  • 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.