Banner: Page Cover

No notes defined.

<div class="sds-banner -background -pageCover">
    <div class="row align-items-center no-bottom-gutter">
        <div class="col-12 col-md-6">
            <div class="sds-banner__content">
                <div class="sds-stackXl">
                    <div class="sds-heroHeading sds-colorInherit">
                        <h1 class="sds-heroHeading__separator h1">Vos conditions de faveur auprès de Spuerkeess</h1>

                        <p class="sds-heroHeading__sub  sds-textBodyLg">Spuerkeess vous propose des produits et services bancaires à des conditions privilégiées sur votre compte individuel ou votre compte-joint.</p>

                    </div>
                    <a href="" class="sds-btn -btnPrimary">

                        <span class="sds-btn__text">Découvrir</span>

                    </a>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 text-center">
            <img src="https://design.spuerkeess.lu/media/illustrations/png750x560/hero/sdsillu-packagefull.png" alt="" class="img-fluid">
        </div>
    </div>
    </a>
<div class="{{ namespace }}banner{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="row align-items-center no-bottom-gutter">
		<div class="col-12 col-md-6">
			<div class="{{ namespace }}banner__content">
				<div class="{{ namespace }}stackXl">
					{% render "@hero-heading",{
						classes: [namespace + "colorInherit"],
						main: false,
						headingLvl: "h1",
						title: title,
						subTitle: text,
						subEltType: "p",
						subHeadingLvl: namespace + "textBodyLg"
					},true %}
					{% render '@btn-primary',{
						eltType: "a",
						text: "Découvrir"
					}, true %}
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6 text-center">
			<img src="https://design.spuerkeess.lu/media/illustrations/png750x560/hero/sdsillu-packagefull.png" alt="" class="img-fluid">
		</div>
	</div>
</{{ eltType }}>
  • Content:
    /* variables specific to current element */
    
    $image-width: map-deep-get($token-sizes-unit-map, "96");
    $image-width-large: map-deep-get($token-sizes-unit-map, "8")*18;
    
    .#{$namespace}banner {
    
        /* Save root element context for easy access if nesting is needed */
    
        $self: &;
    
    
        /* properties of current element  + media queries */
        display: flex;
        align-items: center;
        gap: map-deep-get($token-spacer-inline-map, "md");
        padding: map-deep-get($token-spacer-inset-map, "md");
        border-radius: map-deep-get($token-radius-map, "16");
    	@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
    
    
    	/* Pseudo Elements */
    
        &::before {
        }
    
        &::after {
        }
    
        /*
        Include elements that are linked to the current element but have to reside at the root level of the stylesheet
        (e.g: keyframes)
        */
        @at-root {
        }
    
    
        /* children - write selector in full in comments in order to facilitate search */
    
        // banner__img
        &__img {
    
            width: $image-width;
    
        }
    
    	// banner__content
        &__content {
    
            flex-grow: 1;
            @include spacer-component-stack("xs");
    
        }
    
        /* modifiers */
    
        // banner -btn
        &.-btn {
            &:hover {
                @media (hover: hover) {
    
    				@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
    
                }
            }
        }
    
        &.-background {
    
    
    		@include gradient-x-three-colors(map-deep-get($token-color-brand-map, "highlight", "140"), map-deep-get($token-color-brand-map, "highlight", "100"), map-deep-get($token-color-brand-map, "highlight", "60"), 30%, 82%, 100%, 45deg);
    		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
    
    		#{$self}__title {
    
    			color: inherit;
    
            }
    
            #{$self}__content {
    
                > * + * {
    
                    margin-top: 0 !important;
    
                }
    
            }
    
        }
    
    	&.-pageCover {
    
    		display: block;
    
    		#{$self}__content {
    
    			padding: map-deep-get($token-spacer-inset-map, "lg");
    
    			@include media-breakpoint-up("lg") {
    
    				padding: map-deep-get($token-spacer-inset-map, "xl");
    
    			}
    
    		}
    		
    	}
    
    	&.-insetLg {
    
    		padding: map-deep-get($token-spacer-inset-map, "lg");
    
    	}
    
    	&.-sizeLg {
    
    		gap: map-deep-get($token-spacer-inline-map, "xl");
    
    		#{$self}__img {
    
    			width: $image-width-large;
    
    		}
    
    	}
    
        &.-mobileCard {
    
    		@include spacer-component-stack("md");
            flex-direction: column;
            align-items: flex-start;
    
            > * {
    
                margin-right: 0;
    
            }
    
            @include media-breakpoint-up(md){
    
                flex-direction: row;
                align-items: center;
                @include spacer-component-inline("xl");
    
                > * + * {
    
                    margin-top: 0 !important;
    
                }
    
    
            }
    
            #{$self}__img {
    
                width: 100%;
    
                @include media-breakpoint-up(md) {
    
                    max-width: $image-width-large;
    
                }
    
            }
    
        }
    
        /* random parent element */
        /*
        *
        *   Syntax : .randomParentElt & {}
        *
        */
    
        /* Pseudo Classes */
    
        &:hover {
            @media (hover: hover) {
    
            }
        }
    
        &:focus {
        }
    
        &:active {
        }
    
        &:focus,
        &:active {
        }
    
    }
  • URL: /components/raw/snet-banner/_banner.scss
  • Filesystem Path: components/snet/molecules/banner/_banner.scss
  • Size: 3.2 KB