Content Box

When using an outline variant, be sure to change the rendered icon btn's classes. Full background is icon btn cta secondary, outlined is icon btn base.

<!-- Default -->
<div class="sds-contentBox">

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

    </div>

</div>

<!-- Info -->
<div class="sds-contentBox -info">

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

    </div>

</div>

<!-- Important -->
<div class="sds-contentBox -important">

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

    </div>

</div>

<!-- Success -->
<div class="sds-contentBox -success">

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

    </div>

</div>

<!-- Warning -->
<div class="sds-contentBox -warning">

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

    </div>

</div>

<!-- Link -->
<a href="" class="sds-contentBox">

    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">

        <span class="sds-icon sds-icon-arrownext"></span>

    </span>

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

    </div>

</a>

<!-- Modal -->
<button type="button" class="sds-contentBox" data-toggle="modal" data-target="##modalID">

    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">

        <span class="sds-icon sds-icon-infocircleborder"></span>

    </span>

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

    </div>

</button>

<!-- Info Outline -->
<a href="" class="sds-contentBox -info -outline">

    <span class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-arrownext"></span>

    </span>

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

    </div>

</a>

<!-- Important Outline -->
<a href="" class="sds-contentBox -important -outline">

    <span class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-arrownext"></span>

    </span>

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

    </div>

</a>

<!-- Success Outline -->
<a href="" class="sds-contentBox -success -outline">

    <span class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-arrownext"></span>

    </span>

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

    </div>

</a>

<!-- Warning Outline -->
<a href="" class="sds-contentBox -warning -outline">

    <span class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-arrownext"></span>

    </span>

    <div class="sds-contentBox__text sds-stackSm">
        <div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>

    </div>

</a>

<{{ eltType}} {% if eltType === "a" %} href="{{ href }}"{% elseif eltType === "button" %} type="button"{%- endif -%} class="{{ namespace }}contentBox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if modal %} data-toggle="modal" data-target="#{{ modal }}"{% endif %}>
	{% if eltType === "a" or eltType === "button" %}
		{% if outline %}
			{% render "@icon-btn-secondary--smaller",{eltType: "span", icon: icon},true %}
		{% else %}
			{% render "@icon-btn-secondary-inverse--smaller",{eltType: "span", icon: icon},true %}
		{% endif %}
	{% endif %}
	<div class="{{ namespace }}contentBox__text {{ namespace }}stackSm">
		<div class="{% if titleSmall %}h4{% else %}h3{% endif %}">{{ title }}</div>
		{% if text %}
		<p>
			{{ text }}
		</p>
		{% endif %}
	</div>
	{% if haslinkBtn %}
		<div class="align-self-center flex-shrink-0">
			{% render "@btn-secondary-inverse",{
				text: btnText
			},true %}
		</div>
	{% endif %}
</{{ eltType}}>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}contentBox {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	display: flex;
    	align-items: stretch;
    	@include custom-prop-fallback("background-color", "comp-alert-banner-primary-background-color");
    	@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-primary-heading-text-color");
    
    	width: 100%; // for button elements
    	text-align: left;
    
    	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 media-breakpoint-up(lg) {
    		padding: map-deep-get($token-spacer-inset-map, "lg");
    	}
    
    	/* 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 */
    
    	// contentBox__text
    	&__text {
    
    		// follows same logic as parent
    
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: flex-start;
    		@include custom-prop-fallback("color", "comp-heading-text-color");
    		flex-grow: 1;
    		flex-shrink: 1;
    	}
    
    
    	/* modifiers */
    
    	// contentBox -inverted
    
    	&.-info {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("background-color", "comp-alert-banner-info-background-color");
    		@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-info-heading-text-color");
    
    		&.-outline {
    
    			@include custom-prop-fallback("border-color", "sys-color-border-status-info-strong");
    
    		}
    
    	}
    
    	&.-important {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("background-color", "comp-alert-banner-danger-background-color");
    		@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-danger-heading-text-color");
    
    		&.-outline {
    
    			@include custom-prop-fallback("border-color", "sys-color-border-status-danger-strong");
    		}
    
    	}
    
    	&.-success {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("background-color", "comp-alert-banner-success-background-color");
    		@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-success-heading-text-color");
    
    		&.-outline {
    
    			@include custom-prop-fallback("border-color", "sys-color-border-status-success-strong");
    		}
    
    	}
    
    	&.-warning {
    
    		// follows same logic as base element
    
    		@include custom-prop-fallback("background-color", "comp-alert-banner-warning-background-color");
    		@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-warning-heading-text-color");
    
    		&.-outline {
    
    			@include custom-prop-fallback("border-color", "sys-color-border-status-warning-strong");
    		}
    
    	}
    
    	&.-outline {
    
    		border: $border-width*2 solid;
    		@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
    		@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-primary-heading-text-color");
    
    	}
    
    	&.-hasLinkBtn {
    
    		flex-wrap: wrap;
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/spk-content-box/_content-box.scss
  • Filesystem Path: components/spuerkeess-site/molecules/content-box/_content-box.scss
  • Size: 3.5 KB