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.
The following classes can be added as modifiers to the content section:
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
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:
<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>
/* 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 {
}
}
/* 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 {
}
}