<div class="banner--footer">
    <div class="banner--footer__wrapper">
        <div class="banner--footer__text">
            <div class="banner--footer__text--left">
                <h3 class="banner--footer__text--heading--first">
                    <span>Kom langs in</span>
                    <span class="banner--footer__text--color">onze Fysieke winkel</span>
                </h3>
            </div>
            <div class="banner--footer__text--right">
                <div class="banner--footer__text--description">
                    Kom ook langs in de grootste vechtsport winkel van Europa! Wij hebben het meest uitgebreide accessoirtiment aan Vechtsport artikelen en beleef
                </div>
                <a class="button button--skew" href="#" title="I am a link button">
                    Skew button
                </a>

            </div>

        </div>
    </div>
    <div class="banner--footer__background">
        <picture class="image ">

            <img class="" src="https://images.prismic.io/vechtsportonline/0ae9b2a9-273c-42f0-904d-96bc74a663bd_9fe9fe38-4ec4-4e4d-aedd-fe74a3ec3dbc.JPG?auto&#x3D;compress,format" alt="" loading="lazy" />
        </picture>

    </div>
</div>
<div class="banner--footer">
    <div class="banner--footer__wrapper">
        <div class="banner--footer__text">
            <div class="banner--footer__text--left">
                <h3 class="banner--footer__text--heading--first">
                    <span>{{ footerTitle1 }}</span>
                    <span class="banner--footer__text--color">{{ footerTitle2 }}</span>
                </h3>
            </div>
            <div class="banner--footer__text--right">
                <div class="banner--footer__text--description">
                    {{ footerDescription }}
                </div>
                {{ render '@button--skew' skew }}
            </div>


        </div>
    </div>
    <div class="banner--footer__background">
        {{ render '@image--background' bannerBackground }}
    </div>
</div>
{
  "link": "#",
  "attributes": "aria-label=\"descriptive text about banner action and / or image\"",
  "infoBannerImage": {
    "dataSrc": "https://images.prismic.io/vechtsportonline/447ce158-4544-490e-9590-3e5d437ed50b_fysieke_winkel_vso_semmy_schild_remy_bonjasky.jpg?auto=compress,format\""
  },
  "bannerBackground": {
    "src": "https://images.prismic.io/vechtsportonline/0ae9b2a9-273c-42f0-904d-96bc74a663bd_9fe9fe38-4ec4-4e4d-aedd-fe74a3ec3dbc.JPG?auto=compress,format"
  },
  "footerTitle1": "Kom langs in",
  "footerTitle2": "onze Fysieke winkel",
  "footerDescription": "Kom ook langs in de grootste vechtsport winkel van Europa! Wij hebben het meest uitgebreide accessoirtiment aan Vechtsport artikelen  en beleef",
  "image": {
    "defaultSrc": "/images/banner/banner-320_176.jpg",
    "sources": [
      {
        "src": "/images/banner/banner-320_176.jpg",
        "mediaQuery": "(max-width: 480px)"
      },
      {
        "src": "/images/banner/banner-768_416.jpg",
        "mediaQuery": "(max-width: 960px)"
      },
      {
        "src": "/images/banner/banner-1024_416.jpg",
        "mediaQuery": "(max-width: 1328px)"
      },
      {
        "src": "/images/banner/banner-1920_512.jpg",
        "mediaQuery": ""
      }
    ],
    "alt": "banner-image"
  },
  "variants": [
    {
      "name": "footer",
      "title": "banner--footer",
      "context": {}
    }
  ]
}
  • Content:
    $banner--footer__heading--font-style                    : $font-style-italic !default;
    $banner--footer__heading--font-weight                   : $font-weight-normal !default;
    $banner--footer__heading--font-size                     : 55px !default;
    $banner--footer__heading--line-height                   : 140% !default;
    $banner--footer__heading--color                         : $color-tertiary !default;
    .banner {
        display: grid;
        background: rgb(0, 0, 0);
        height: 400px;
        margin: 0 0 $spacer--15 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
    
        @include mq($screen-m) {
            background-position: right;
        }
        & .banner__gradient {
            width: 100%;
            height: 100%;
            position: absolute;
    
            background-image: linear-gradient(100deg, rgba(0, 0, 0, 1) 20%, rgba(0, 154, 125, 0) 100%);
    
            @include mq($screen-m) {
                background: linear-gradient(100deg, rgba(0, 0, 0, 1) 0%, rgba(0, 154, 125, 0) 100%);
            }
    
            @include mq($screen-l) {
                background: linear-gradient(100deg, rgba(0, 0, 0, 1) 20%, rgba(0, 154, 125, 0) 100%);
            }
    
            @include mq($screen-xl) {
                background: linear-gradient(100deg, rgba(0, 0, 0, 1) 40%, rgba(0, 154, 125, 0) 100%);
            }
    
            @include mq($screen-xxl) {
                background: linear-gradient(100deg, rgba(0, 0, 0, 1) 50%, rgba(0, 154, 125, 0) 100%);
            }
        }
    
        & .banner__content {
            position: relative;
            z-index: 10;
            padding-top: $spacer--4;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    
        & .banner__inner {
            background-repeat: no-repeat;
            background-position: right;
        }
    
        & .banner__title {
            font-size: $font-size-xxl;
            color: $color-tertiary;
            font-style: $font-style-italic;
            font-weight: $font-weight-normal;
            max-width: 384px;
            margin-bottom: $spacer--1;
        }
    
        & .banner__description {
            max-width: 384px;
            margin-bottom: $spacer--2;
    
            font-weight: $font-weight-normal;
            font-size: $font-size-base;
            color: $gray-lightest;
    
            @include mq($screen-m) {
                font-size: 15px;
            }
        }
        &--footer {
            display: grid;
            grid-template-areas: "overflow";
            height: auto;
    
            @include mq($screen-m) {
                height: 515px;
            }
            &__text {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin: 0 auto;
                max-width: 400px;
                @include mq($screen-m) {
                    margin: 0 40% 0 0;
                    max-width: 600px;
                    padding: $spacer--25;
                    background: rgba(0, 0, 0, 0.5);
                }
                &--heading--first {
                    background: transparent;
                    font-style: $banner--footer__heading--font-style;
                    font-weight: $banner--footer__heading--font-weight;
                    font-size: $banner--footer__heading--font-size;
                    line-height: $banner--footer__heading--line-height;
                    color: $banner--footer__heading--color;
                    display: flex;
                    flex-direction: column;
                    transform: skewX(-6deg);
                }
                &--description {
                    color: $white;
                    font-size: 19px;
                    line-height: 1.7;
                    font-weight: 400;
                    margin-bottom: $spacer--25;
                    font-style: italic;
                    text-transform: none;
                }
                &--heading--second {
                    font-family: $font-family-saira;
                    font-size: $font-size-medium;
                    line-height: $banner--footer__heading--line-height;
                    color: $gray-light;
                }
    
                &--color {
                    font-style: $banner--footer__heading--font-style;
                    font-weight: $banner--footer__heading--font-weight;
                    font-size: $banner--footer__heading--font-size;
                    line-height: $banner--footer__heading--line-height;
                    -webkit-text-fill-color: transparent; // sass-lint:disable-line no-vendor-prefixes
                    -webkit-text-stroke-width: 1px; // sass-lint:disable-line no-vendor-prefixes
                    -webkit-text-stroke-color: $color-tertiary; // sass-lint:disable-line no-vendor-prefixes
                }
            }
    
            &__image {
                display: none;
    
                @include mq($screen-m) {
                    display: block;
                }
            }
    
            &__background {
                grid-area: overflow;
                height: inherit;
    
                & .image {
                    object-fit: cover;
                    object-position: top;
                    height: 100%;
                }
            }
            &__wrapper {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                background: transparent;
                grid-area: overflow;
                position: relative;
                padding: $spacer--l;
                @include mq($screen-m) {
                    flex-direction: row;
                }
            }
            &__background {
                grid-area: overflow;
                height: inherit;
    
                & .image {
                    object-fit: cover;
                    object-position: center;
                    height: 100%;
                }
            }
        }
    
    }
    
  • URL: /components/raw/banner/_banner.scss
  • Filesystem Path: build/components/02-elements/banner/_banner.scss
  • Size: 5.6 KB

There are no notes for this item.