Section

Components that live in the bootstrap grid should be placed inside a container that lives at the sds-contentSection__inner level of the content section element. The container will set the horizontal padding inside the content section.

Modifiers

The following classes can be added as modifiers to the content section:

  • -sectionSunken: give a background different from the body background
  • -sectionInverted: : give a background different from the body background, darker than -sectionSunken
  • -sectionNoInsetBlockStart: : remove top vertical spacing
  • -sectionNoInsetBlock: : remove all vertical spacing
  • -sectionOverflowHidden: add an overflow hidden behaviour to the content section in case a slider that stretches out of bounds is added inside of it
  • -sectionLeaseOfferWrapper: to be used if the content section is used as a wrapper for a lease offer highlight card

Content Color

The following classes can be used to alter the content section's textual background. This is limited to elements that are direct children of it

  • sds-contentSection__textColor: makes text legible, no matter the content section's background

Data attribute usage

First you need to describe which type of wrapper you need to form an elevation context. For boxes, use : [data-scope-wrapper="section"].

The available types for now are:

  • [data-scope="flat"]
  • [data-scope="sunken"]
  • [data-scope="inverted"]
<!-- Default -->
<section class="sds-section">
    <div class="sds-section__innerWrapper">
        <div class="sds-section__inner">
            <p class="sds-section__textColor">Example text that changes color depending on content section type.</p>
        </div>
    </div>
</section>

<!-- Sunken -->
<section class="sds-section -sectionSunken">
    <div class="sds-section__innerWrapper">
        <div class="sds-section__inner">
            <p class="sds-section__textColor">Example text that changes color depending on content section type.</p>
        </div>
    </div>
</section>

<!-- Inverted -->
<section class="sds-section -sectionSunken -sectionInverted">
    <div class="sds-section__innerWrapper">
        <div class="sds-section__inner">
            <p class="sds-section__textColor">Example text that changes color depending on content section type.</p>
        </div>
    </div>
</section>

<section class="{{ namespace }}section{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<p class="{{ namespace }}section__textColor">Example text that changes color depending on content section type.</p>
		</div>
	</div>
</section>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}contentSection {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	/* 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 */
    
    	// contentSection__innerWrapper
    	&__innerWrapper {
    
    		@include containerPaddingInline();
    		padding-left: 0;
    		padding-right: 0;
    
    	}
    
    	// contentSection__inner
    	&__inner {
    
    		// follows same logic as parent
    		@include contentSectionPaddingBlock();
    		@include contentSectionDimensions();
    		@include custom-prop-fallback("background-color", "comp-section-background-color")
    
    	}
    
    
    	/* modifiers */
    
    	// contentSection -sectionSunken
    	&.-elevated {
    
    		@include contentSectionPaddingBlock();
    
    		#{$self}__innerWrapper {
    
    			@include containerPaddingInline();
    
    		}
    
    		// follows same logic as base element
    
    		#{$self}__inner {
    
    			border-radius: map-deep-get($token-radius-map, "24");
    
    			@include styles-without-custom-props() {
    				background-color: map-deep-get($design-tokens, "sys-color-elevation-surface-sunken");
    			}
    		}
    
    		&.-noInsetBlockStart,
    		&.-sectionNoInsetBlockStart {
    
    			padding-top: 0;
    
    		}
    
    		&.-noInsetBlock,
    		&.-sectionNoInsetBlock {
    
    			padding-top: 0;
    			padding-bottom: 0;
    
    		}
    
    	}
    
    	// contentSection -sectionInverted
    	&.-elevatedInverted {
    
    		// follows same logic as base element
    
    		#{$self}__inner {
    			@include styles-without-custom-props() {
    				background-color: map-deep-get($design-tokens, "sys-color-background-primary-140");
    			}
    		}
    
    		#{$self}__textColor {
    
    			@include styles-without-custom-props() {
    				color: map-deep-get($design-tokens, "sys-color-text-primary-inverse");
    			}
    			@include custom-prop-fallback("color","comp-heading-text-color");
    
    			> * {
    
    				color: inherit;
    
    			}
    
    		}
    
    	}
    
    	&.-overflowHidden {
    
    		#{$self}__innerWrapper {
    			overflow: hidden;
    		}
    
    	}
    
    	&.-leaseOfferWrapper {
    
    		#{$self}__inner {
    
    			@include contentSectionPaddingBlock("lg");
    
    		}
    
    	}
    
    	&:not(.-elevated) {
    
    		&.-noInsetBlockStart {
    
    			#{$self}__inner {
    
    				padding-top: 0;
    
    			}
    
    		}
    
    		&.-noInsetBlock {
    
    			#{$self}__inner {
    
    				padding-top: 0;
    				padding-bottom: 0;
    
    			}
    		}
    
    	}
    
    
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* This is an edge case where all nested content sections should be stripped of their padding AND background colors */
    
    	& & {
    
    		padding: 0 !important;
    
    		#{$self}__innerWrapper {
    
    			padding: 0 !important;
    
    		}
    
    		#{$self}__inner {
    
    			padding: 0 !important;
    			background-color: transparent !important;
    
    		}
    
    
    	}
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/section/_content-section.scss
  • Filesystem Path: components/token-based/content/section/_content-section.scss
  • Size: 3 KB
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}section {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	/* 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 */
    
    	// section__innerWrapper
    	&__innerWrapper {
    
    		@include containerPaddingInline();
    		padding-left: 0;
    		padding-right: 0;
    
    	}
    
    	// section__inner
    	&__inner {
    
    		// follows same logic as parent
    		@include contentSectionPaddingBlock();
    		@include contentSectionDimensions();
    		@include custom-prop-fallback("background-color", "comp-section-background-color")
    
    	}
    
    
    	/* modifiers */
    
    	// section -sectionSunken
    	&.-sectionSunken {
    
    		@include contentSectionPaddingBlock();
    
    		#{$self}__innerWrapper {
    
    			@include containerPaddingInline();
    
    		}
    
    		// follows same logic as base element
    
    		#{$self}__inner {
    
    			border-radius: map-deep-get($token-radius-map, "24");
    
    			@include styles-without-custom-props() {
    				background-color: map-deep-get($design-tokens, "sys-color-elevation-surface-sunken");
    			}
    		}
    
    		&.-sectionNoInsetBlockStart {
    
    			padding-top: 0;
    
    		}
    
    		&.-sectionNoInsetBlock {
    
    			padding-top: 0;
    			padding-bottom: 0;
    
    		}
    
    	}
    
    	// section -sectionInverted
    
    	&.-sectionInverted {
    
    		// follows same logic as base element
    
    		#{$self}__inner {
    			@include styles-without-custom-props() {
    				background-color: map-deep-get($design-tokens, "sys-color-background-primary-140");
    			}
    		}
    
    		#{$self}__textColor {
    
    			@include styles-without-custom-props() {
    				color: map-deep-get($design-tokens, "sys-color-text-primary-inverse");
    			}
    			@include custom-prop-fallback("color","comp-heading-text-color");
    
    			> * {
    
    				color: inherit;
    
    			}
    
    		}
    
    	}
    
    	&.-sectionOverflowHidden {
    
    		#{$self}__innerWrapper {
    			overflow: hidden;
    		}
    
    	}
    
    	&.-sectionLeaseOfferWrapper {
    
    		#{$self}__inner {
    
    			@include contentSectionPaddingBlock("lg");
    
    		}
    
    	}
    
    	&:not(.-sectionSunken) {
    
    		&.-sectionNoInsetBlockStart {
    
    			#{$self}__inner {
    
    				padding-top: 0;
    
    			}
    
    		}
    
    		&.-sectionNoInsetBlock {
    
    			#{$self}__inner {
    
    				padding-top: 0;
    				padding-bottom: 0;
    
    			}
    		}
    
    	}
    
    
    
    	/* random parent element */
    	/*
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* This is an edge case where all nested content sections should be stripped of their padding AND background colors */
    
    	& & {
    
    		padding: 0 !important;
    
    		#{$self}__innerWrapper {
    
    			padding: 0 !important;
    
    		}
    
    		#{$self}__inner {
    
    			padding: 0 !important;
    			background-color: transparent !important;
    
    		}
    
    
    	}
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/section/_section.scss
  • Filesystem Path: components/token-based/content/section/_section.scss
  • Size: 2.9 KB