Banner: Button

No notes defined.

<div class="sds-banner -btn">

    <img class="sds-banner__img" src="../../media/snet/illustrations/sdsillu-financialmarkets.svg" alt="">

    <div class="sds-banner__content">

        <p class="sds-banner__title h4">Accéder aux marchés financiers</p>
        <p>{Description}</p>

    </div>

    <a href="" class="sds-btn -btnSecondary">

        <span class="sds-btn__text">button text</span>

    </a>

</div>
{% if externalImg %}
	{% set mediaPath = "" %}
{% endif %}
<{{ eltType }}{% if eltType === "a" %} href="{{ href }}"{% endif %} class="{{ namespace }}banner{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% if noImage %}
	{% else %}
		<img class="{{ namespace }}banner__img" src="{{ (mediaPath+img) | path }}" alt="">
	{% endif %}
	<div class="{{ namespace }}banner__content">
		{% if bannerSubheading %}
			{% if bannerHeadingSize === "large" %}
				{% render "@heading--h3-subtext", {
					classes: [namespace + "banner__title"],
					text: title,
					subText: text
				}, true %}
			{% else %}
				{% render "@heading--h4-subtext", {
					classes: [namespace + "banner__title"],
					text: title,
					subText: text
				}, true %}
			{% endif %}
			{% else %}
				<p class="{{ namespace }}banner__title{% if bannerHeadingSize === "large" %} h3{% else %} h4{% endif %}">{{ title }}</p>
				<p>{{ text }}</p>
		{% endif %}
	</div>
	{% if button %}
		{% render '@btn-secondary', {
			eltType: "a"
		}, true %}
	{% else %}
		{% render '@icon-circle-regular--secondary-10',{
			icon: icon,
			classes: [namespace +  "hoverContentSecondary__icon"]
		}, true %}
	{% endif %}
</{{ 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