Content 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:

  • -elevated: give a background different from the body background
  • -elevatedInverted: : give a background different from the body background, darker than elevated
  • -spacingInsetBlockSmaller: : give a smaller vertical spacing to the content section
  • -noInsetBlockStart: : remove top vertical spacing
  • -noInsetBlock: : remove all vertical spacing
  • -overflowHidden: add an overflow hidden behaviour to the content section in case a slider that stretches out of bounds is added inside of it
  • -leaseOfferWrapper: 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
<!-- Default -->
<section class="sds-contentSection">
    <div class="sds-contentSection__innerWrapper">
        <div class="sds-contentSection__inner">
            <p class="sds-contentSection__textColor">Example text that changes color depending on content section type.</p>
        </div>
    </div>
</section>

<!-- Elevated -->
<section class="sds-contentSection -elevated">
    <div class="sds-contentSection__innerWrapper">
        <div class="sds-contentSection__inner">
            <p class="sds-contentSection__textColor">Example text that changes color depending on content section type.</p>
        </div>
    </div>
</section>

<!-- Elevated Inverted -->
<section class="sds-contentSection -elevated -elevatedInverted">
    <div class="sds-contentSection__innerWrapper">
        <div class="sds-contentSection__inner">
            <p class="sds-contentSection__textColor">Example text that changes color depending on content section type.</p>
        </div>
    </div>
</section>

<section class="{{ namespace }}contentSection{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}contentSection__innerWrapper">
		<div class="{{ namespace }}contentSection__inner">
			<p class="{{ namespace }}contentSection__textColor">Example text that changes color depending on content section type.</p>
		</div>
	</div>
</section>
  • Handle: @content-section
  • Preview:
  • Filesystem Path: components/token-based/content/content-section/content-section.njk
  • 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 -elevated
    	&.-elevated {
    
    		//@include custom-prop-fallback-override("comp-button-secondary-background-color","comp-button-secondary-background-color");
    
    		@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 {
    
    			padding-top: 0;
    
    		}
    
    		&.-noInsetBlock {
    
    			padding-top: 0;
    			padding-bottom: 0;
    
    		}
    
    	}
    
    	// contentSection -elevatedInverted
    	&.-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/content-section/_content-section.scss
  • Filesystem Path: components/token-based/content/content-section/_content-section.scss
  • Size: 3.1 KB