Swegon Component Library

Hero: Default 

<div class="hero theme--consumer theme--dark" style="background-image: url('/mocks/img/hero.jpg');">
    <img class="hero__image" src=/mocks/img/hero.jpg alt=a fancy buidling />
    <div class="hero__primary theme--consumer theme--dark">
        <div class="hero__text">
            <h1 class="headline-2 ">Vill du snabbt få förslag på rätt ventilation?</h1>
        </div>
    </div>
    <div class="hero__secondary">
        <p class="hero__image-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mauris ultricies elit suscipit porttitor.</p>
    </div>
</div>
 
<div class="hero{{#if theme}} theme--{{theme}}{{/if}}{{#if darkTheme}} theme--dark{{/if}}" style="background-image: url('{{image.src}}');">
    <img class="hero__image" src={{image.src}} alt={{image.alt}}  />
    <div class="hero__primary{{#if theme}} theme--{{theme}}{{/if}}{{#if darkTheme}} theme--dark{{/if}}">
        <div class="hero__text">
            <h1 class="headline-2 {{#if textColor}} h-text-color-{{textColor}}{{/if}}">{{title}}</h1>
            {{#if link}}
                <a class="button button--ghost" href={{link.href}}>{{link.text}}</a>
            {{/if}}
        </div>
    </div>
    <div class="hero__secondary">
        <p class="hero__image-text{{#if textColor}} h-text-color-{{textColor}}{{/if}}">{{imageText}}</p>
    </div>
    {{#if circularImage}}
        <div class="hero__image-circular" style="background-image: url({{circularImage.src}});"></div>
    {{/if}}
</div>
 
{
  "title": "Vill du snabbt få förslag på rätt ventilation?",
  "imageText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mauris ultricies elit suscipit porttitor.",
  "image": {
    "src": "/mocks/img/hero.jpg",
    "alt": "a fancy buidling"
  },
  "theme": "consumer",
  "darkTheme": true
}
  • Content: 
    $imageRatioDesktop: 436 / 1430;

.hero {
    position: relative;
    margin-bottom: size(2);

    @include breakpoint($m) {
        display: flex;
        min-height: #{$imageRatioDesktop * 100}vw;
        min-width: #{$imageRatioDesktop * 100}vw;
        background-size: cover;
        background-position: left center;
    }

    @include breakpoint($xxl) {
        min-height: #{$imageRatioDesktop * 1430}px;
    }
}

.hero__primary {
    padding: size(8) size(4);

    @include breakpoint($m) {
        width: percentage(6 / 12);
    }

    @include breakpoint($l) {
        border-right: size(1) solid $color-white;
        display: flex;
        width: col-span(4);
        padding: size(8) size(4);
    }

    @include color-theme {
        background: $arg-theme-color;
    }

    // IE 11 height fix
    @include breakpoint($m) {
        min-height: #{$imageRatioDesktop * 100}vw;
    }

    @include breakpoint($xxl) {
        min-height: #{$imageRatioDesktop * 1430}px;
    }
}

.hero__secondary {
    display: none;
    flex: 1;
    padding: size(2) size(2);
    border-left: size(1) solid $color-white;

    @include breakpoint($m) {
        display: block;
    }
}

.hero__image-text {
    color: $color-white;
    text-align: right;
}

.hero__image-circular {
    display: none;
    width: size(17);
    height: size(17);
    position: absolute;
    border-radius: 100%;
    right: size(4);
    bottom: size(-8.5);
    object-fit: cover;
    z-index: 1;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;

    @include breakpoint($m) {
        display: block;
    }
}

.hero__image {
    display: block;
    min-height: 30vh;
    min-width: 30vw;
    object-fit: cover;

    @include breakpoint($m) {
        display: none;
    }
}

.hero-logotypes-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.hero-logotypes-wrapper-inner {
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 24px;
    gap: 16px;
}

.hero-logotypes-wrapper-inner div {
    display: flex;
    width: calc(50% - 8px);
    align-items: center;
}

.hero-logotypes-wrapper-inner img {
    margin: auto;
    max-height: 72px;
}

@include breakpoint($m) {
    .hero-logotypes-wrapper-inner {
        max-width: 1075px;
        justify-content: flex-end;
    }

    .hero-logotypes-wrapper-inner div {
        min-height: 72px;
        width: 232px;
    }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: src/components/hero/hero.scss
  • Size: 2.5 KB

No notes defined.