BCSS Vars & Classes Reference

Spacings & Widths

Vars

Spacings

var(--space-xs) …
var(--space-s) …
var(--space-m) …
var(--space-l) …
var(--space-xl) …
var(--space-xxl) …

Gaps

var(--container-gap) …
var(--content-gap) …
var(--content-gap-s) …
var(--content-gap-l) …
var(--grid-gap) …
var(--grid-gap-s) …
var(--grid-gap-l) …

Section Spacings

var(--section-space-xs) …
var(--section-space-s) …
var(--section-space-m) …
var(--section-space-l) …
var(--section-space-xl) …
var(--section-space-xxl) …
var(--section-gutter) …

Widths

var(--width-xs) …
var(--width-s) …
var(--width-m) …
var(--width-l) …
var(--width-xl) …
var(--width-xxl) …
var(--width-full) …
var(--content-width) …

Classes

Paddings

.padding-xs
.padding-s
.padding-m
.padding-l
.padding-xl
.padding-xxl

Gaps

.container-gap
.content-gap
.content-gap-s
.content-gap-l
.grid-gap
.grid-gap-s
.grid-gap-l

Section Paddings (top/bottom)

.padding-section-xs
.padding-section-s
.padding-section-m
.padding-section-l
.padding-section-xl
.padding-section-xxl
.padding-section-none
.padding-section-none-top
.padding-section-none-bottom

Widths - Tokens

.width-xs
.width-s
.width-m
.width-l
.width-xl
.width-xxl
.width-full

Widths - MaxWidth

.max-width-320
.max-width-400
.max-width-480
.max-width-560
.max-width-640
.max-width-720
.max-width-800
.max-width-880
.max-width-960
.max-width-1040
.max-width-1120
.max-width-1200
.max-width-1280

Headings

Vars

Headings - Sizes

var(--h1) …
var(--h2) …
var(--h3) …
var(--h4) …
var(--h5) …
var(--h6) …

Headings - Global Tokens

var(--heading-font-family) …
var(--heading-color) …
var(--heading-line-height) …
var(--heading-font-weight) …
var(--heading-font-style) …
var(--heading-letter-spacing) …
var(--heading-text-transform) …
var(--heading-text-wrap) …
var(--heading-max-width) …

Headings - H1

var(--h1-font-family) …
var(--h1-color) …
var(--h1-line-height) …
var(--h1-font-weight) …
var(--h1-font-style) …
var(--h1-letter-spacing) …
var(--h1-text-transform) …
var(--h1-max-width) …

Headings - H2

var(--h2-font-family) …
var(--h2-color) …
var(--h2-line-height) …
var(--h2-font-weight) …
var(--h2-font-style) …
var(--h2-letter-spacing) …
var(--h2-text-transform) …
var(--h2-max-width) …

Headings - H3

var(--h3-font-family) …
var(--h3-color) …
var(--h3-line-height) …
var(--h3-font-weight) …
var(--h3-font-style) …
var(--h3-letter-spacing) …
var(--h3-text-transform) …
var(--h3-max-width) …

Headings - H4

var(--h4-font-family) …
var(--h4-color) …
var(--h4-line-height) …
var(--h4-font-weight) …
var(--h4-font-style) …
var(--h4-letter-spacing) …
var(--h4-text-transform) …
var(--h4-max-width) …

Headings - H5

var(--h5-font-family) …
var(--h5-color) …
var(--h5-line-height) …
var(--h5-font-weight) …
var(--h5-font-style) …
var(--h5-letter-spacing) …
var(--h5-text-transform) …
var(--h5-max-width) …

Headings - H6

var(--h6-font-family) …
var(--h6-color) …
var(--h6-line-height) …
var(--h6-font-weight) …
var(--h6-font-style) …
var(--h6-letter-spacing) …
var(--h6-text-transform) …
var(--h6-max-width) …

Classes

Headings - Sizes

.h1
.h2
.h3
.h4
.h5
.h6

Texts

Vars

Texts - Sizes

var(--text-xs) …
var(--text-s) …
var(--text-m) …
var(--text-l) …
var(--text-xl) …
var(--text-xxl) …

Texts - Global Tokens

var(--text-font-family) …
var(--text-color) …
var(--text-line-height) …
var(--text-font-weight) …
var(--text-font-style) …
var(--text-letter-spacing) …
var(--text-text-transform) …
var(--text-text-wrap) …
var(--text-max-width) …

Texts - XS

var(--text-xs-font-family) …
var(--text-xs-color) …
var(--text-xs-line-height) …
var(--text-xs-font-weight) …
var(--text-xs-font-style) …
var(--text-xs-letter-spacing) …
var(--text-xs-text-transform) …
var(--text-xs-max-width) …

Texts - S

var(--text-s-font-family) …
var(--text-s-color) …
var(--text-s-line-height) …
var(--text-s-font-weight) …
var(--text-s-font-style) …
var(--text-s-letter-spacing) …
var(--text-s-text-transform) …
var(--text-s-max-width) …

Texts - M

var(--text-m-font-family) …
var(--text-m-color) …
var(--text-m-line-height) …
var(--text-m-font-weight) …
var(--text-m-font-style) …
var(--text-m-letter-spacing) …
var(--text-m-text-transform) …
var(--text-m-max-width) …

Texts - L

var(--text-l-font-family) …
var(--text-l-color) …
var(--text-l-line-height) …
var(--text-l-font-weight) …
var(--text-l-font-style) …
var(--text-l-letter-spacing) …
var(--text-l-text-transform) …
var(--text-l-max-width) …

Texts - XL

var(--text-xl-font-family) …
var(--text-xl-color) …
var(--text-xl-line-height) …
var(--text-xl-font-weight) …
var(--text-xl-font-style) …
var(--text-xl-letter-spacing) …
var(--text-xl-text-transform) …
var(--text-xl-max-width) …

Texts - XXL

var(--text-xxl-font-family) …
var(--text-xxl-color) …
var(--text-xxl-line-height) …
var(--text-xxl-font-weight) …
var(--text-xxl-font-style) …
var(--text-xxl-letter-spacing) …
var(--text-xxl-text-transform) …
var(--text-xxl-max-width) …

Smart Spacing

var(--flow-spacing) …
var(--paragraph-spacing) …
var(--list-indent-spacing) …
var(--list-item-spacing) …
var(--list-spacing-top) …
var(--nested-list-indent-spacing) …
var(--nested-list-item-spacing) …
var(--nested-list-spacing-top) …
var(--nested-list-spacing-bottom) …
var(--heading-spacing) …
var(--h2-spacing) …
var(--h3-spacing) …
var(--h4-spacing) …
var(--h5-spacing) …
var(--h6-spacing) …

Classes

Texts - Sizes

.text-xs
.text-s
.text-m
.text-l
.text-xl
.text-xxl

Text - Styles

.text--underline

Smart Spacing

.smart-spacing

Grids

Vars

Grids - Symmetric

var(--grid-1) …
var(--grid-2) …
var(--grid-3) …
var(--grid-4) …
var(--grid-5) …
var(--grid-6) …
var(--grid-7) …
var(--grid-8) …
var(--grid-9) …
var(--grid-10) …
var(--grid-11) …
var(--grid-12) …

Grids - Assymetric

var(--grid-1-2) …
var(--grid-2-1) …
var(--grid-1-3) …
var(--grid-3-1) …
var(--grid-2-3) …
var(--grid-3-2) …

Grids - Auto-Fit (cards stretch)

var(--grid-autofit-xs) …
var(--grid-autofit-s) …
var(--grid-autofit-m) …
var(--grid-autofit-l) …
var(--grid-autofit-xl) …

Grids - Auto-Fill (empty spaces)

var(--grid-autofill-xs) …
var(--grid-autofill-s) …
var(--grid-autofill-m) …
var(--grid-autofill-l) …
var(--grid-autofill-xl) …

Grids - Min Column Size (for Autofit/Autofill)

var(--min-col-size) …
var(--min-col-size-xs) …
var(--min-col-size-s) …
var(--min-col-size-m) …
var(--min-col-size-l) …
var(--min-col-size-xl) …

Content Grids - Zones

var(--content-grid-width) …
var(--feature-width) …
var(--feature-max-width) …
var(--full) …

Classes

Grids - Symmetric

.grid-1
.grid-2
.grid-3
.grid-4
.grid-5
.grid-6

Grids - Assymetric

.grid-1-2
.grid-2-1
.grid-1-3
.grid-3-1
.grid-2-3
.grid-3-2

Grids - for Breakpoints

.grid-xs-1
.grid-xs-2
.grid-xs-3
.grid-xs-4
.grid-s-1
.grid-s-2
.grid-s-3
.grid-s-4
.grid-m-1
.grid-m-2
.grid-m-3
.grid-m-4
.grid-l-1
.grid-l-2
.grid-l-3
.grid-l-4
.grid-l-5
.grid-xl-1
.grid-xl-2
.grid-xl-3
.grid-xl-4
.grid-xl-5
.grid-xxl-1
.grid-xxl-2
.grid-xxl-3
.grid-xxl-4
.grid-xxl-5
.grid-xxl-6

Grids - Auto-Fit (cards stretch)

.grid-autofit-xs
.grid-autofit-s
.grid-autofit-m
.grid-autofit-l
.grid-autofit-xl

Grids - Auto-Fill (empty spaces)

.grid-autofill-xs
.grid-autofill-s
.grid-autofill-m
.grid-autofill-l
.grid-autofill-xl

Grid - Order

.order-first
.order-last
.order-xs-first
.order-xs-last
.order-s-first
.order-s-last
.order-m-first
.order-m-last
.order-l-first
.order-l-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Col-Span (incl. Breakpoints)

.col-span-2
.col-span-3
.col-span-4
.col-span-5
.col-span-6
.col-span-all
.col-span-xs-1
.col-span-xs-2
.col-span-xs-3
.col-span-xs-4
.col-span-s-1
.col-span-s-2
.col-span-s-3
.col-span-s-4
.col-span-m-1
.col-span-m-2
.col-span-m-3
.col-span-m-4
.col-span-l-1
.col-span-l-2
.col-span-l-3
.col-span-l-4
.col-span-l-5
.col-span-xl-1
.col-span-xl-2
.col-span-xl-3
.col-span-xl-4
.col-span-xl-5
.col-span-xxl-1
.col-span-xxl-2
.col-span-xxl-3
.col-span-xxl-4
.col-span-xxl-5
.col-span-xxl-6

Row-Span (incl. Breakpoints)

.row-span-2
.row-span-3
.row-span-4
.row-span-5
.row-span-6
.row-span-xs-1
.row-span-xs-2
.row-span-xs-3
.row-span-xs-4
.row-span-s-1
.row-span-s-2
.row-span-s-3
.row-span-s-4
.row-span-m-1
.row-span-m-2
.row-span-m-3
.row-span-m-4
.row-span-l-1
.row-span-l-2
.row-span-l-3
.row-span-l-4
.row-span-l-5
.row-span-xl-1
.row-span-xl-2
.row-span-xl-3
.row-span-xl-4
.row-span-xl-5
.row-span-xxl-1
.row-span-xxl-2
.row-span-xxl-3
.row-span-xxl-4
.row-span-xxl-5
.row-span-xxl-6

Flex Grids (incl. Breakpoints)

.flex-grid-1
.flex-grid-2
.flex-grid-3
.flex-grid-4
.flex-grid-5
.flex-grid-6
.flex-grid-grow
.flex-grid-stretch
.flex-grid-xs-1
.flex-grid-xs-2
.flex-grid-xs-3
.flex-grid-xs-4
.flex-grid-s-1
.flex-grid-s-2
.flex-grid-s-3
.flex-grid-s-4
.flex-grid-m-1
.flex-grid-m-2
.flex-grid-m-3
.flex-grid-m-4
.flex-grid-l-1
.flex-grid-l-2
.flex-grid-l-3
.flex-grid-l-4
.flex-grid-l-5
.flex-grid-xl-1
.flex-grid-xl-2
.flex-grid-xl-3
.flex-grid-xl-4
.flex-grid-xl-5
.flex-grid-xxl-1
.flex-grid-xxl-2
.flex-grid-xxl-3
.flex-grid-xxl-4
.flex-grid-xxl-5
.flex-grid-xxl-6

Grids - Modifiers

.list-none
.stretch

Content Grids - Zones

.content-grid
.content-feature
.content-feature-max
.content-full
.content-full-safe
.content-breakout-left-without-gap
.content-breakout-left-with-gap
.content-breakout-right-without-gap
.content-breakout-right-with-gap
.container-full-viewport
.content-absolute-div-set-content-width
.padding-section-none-inline

Colors — Contextual

Vars

Colors - Website Background & Text

var(--body-bg-color) …
var(--text-color) …

Colors - Contextual Backgrounds

var(--bg-ultra-light) …
var(--bg-light) …
var(--bg-dark) …
var(--bg-ultra-dark) …

Colors - Contextual Texts

var(--text-light) …
var(--text-light-muted) …
var(--text-dark-muted) …
var(--text-dark) …

Classes

Colors - Contextual Links

.link-light
.link-dark

Colors — Simple

Vars

Full - Primary

var(--primary) …
var(--primary-ultra-light) …
var(--primary-light) …
var(--primary-semi-light) …
var(--primary-medium) …
var(--primary-semi-dark) …
var(--primary-dark) …
var(--primary-ultra-dark) …
var(--primary-hover) …

Full - Secondary

var(--secondary) …
var(--secondary-ultra-light) …
var(--secondary-light) …
var(--secondary-semi-light) …
var(--secondary-medium) …
var(--secondary-semi-dark) …
var(--secondary-dark) …
var(--secondary-ultra-dark) …
var(--secondary-hover) …

Full - Tertiary

var(--tertiary) …
var(--tertiary-ultra-light) …
var(--tertiary-light) …
var(--tertiary-semi-light) …
var(--tertiary-medium) …
var(--tertiary-semi-dark) …
var(--tertiary-dark) …
var(--tertiary-ultra-dark) …
var(--tertiary-hover) …

Full - Accent

var(--accent) …
var(--accent-ultra-light) …
var(--accent-light) …
var(--accent-semi-light) …
var(--accent-medium) …
var(--accent-semi-dark) …
var(--accent-dark) …
var(--accent-ultra-dark) …
var(--accent-hover) …

Full - Base

var(--base) …
var(--base-ultra-light) …
var(--base-light) …
var(--base-semi-light) …
var(--base-medium) …
var(--base-semi-dark) …
var(--base-dark) …
var(--base-ultra-dark) …
var(--base-hover) …

Full - Neutral

var(--neutral) …
var(--neutral-ultra-light) …
var(--neutral-light) …
var(--neutral-semi-light) …
var(--neutral-medium) …
var(--neutral-semi-dark) …
var(--neutral-dark) …
var(--neutral-ultra-dark) …
var(--neutral-hover) …

Full - Success

var(--success) …
var(--success-ultra-light) …
var(--success-light) …
var(--success-semi-light) …
var(--success-medium) …
var(--success-semi-dark) …
var(--success-dark) …
var(--success-ultra-dark) …
var(--success-hover) …

Full - Warning

var(--warning) …
var(--warning-ultra-light) …
var(--warning-light) …
var(--warning-semi-light) …
var(--warning-medium) …
var(--warning-semi-dark) …
var(--warning-dark) …
var(--warning-ultra-dark) …
var(--warning-hover) …

Full - Info

var(--info) …
var(--info-ultra-light) …
var(--info-light) …
var(--info-semi-light) …
var(--info-medium) …
var(--info-semi-dark) …
var(--info-dark) …
var(--info-ultra-dark) …
var(--info-hover) …

Full - Danger

var(--danger) …
var(--danger-ultra-light) …
var(--danger-light) …
var(--danger-semi-light) …
var(--danger-medium) …
var(--danger-semi-dark) …
var(--danger-dark) …
var(--danger-ultra-dark) …
var(--danger-hover) …

Full - Black & White

var(--black) …
var(--white) …

Classes

Keine spezifischen Klassen für diese Kategorie — nur Vars (Farben werden über CSS-Custom-Properties auf BEM-Klassen verwendet).

Colors — Transparent

Vars

Transparent - Primary

var(--primary-trans-10) …
var(--primary-trans-20) …
var(--primary-trans-30) …
var(--primary-trans-40) …
var(--primary-trans-50) …
var(--primary-trans-60) …
var(--primary-trans-70) …
var(--primary-trans-80) …
var(--primary-trans-90) …

Transparent - Secondary

var(--secondary-trans-10) …
var(--secondary-trans-20) …
var(--secondary-trans-30) …
var(--secondary-trans-40) …
var(--secondary-trans-50) …
var(--secondary-trans-60) …
var(--secondary-trans-70) …
var(--secondary-trans-80) …
var(--secondary-trans-90) …

Transparent - Tertiary

var(--tertiary-trans-10) …
var(--tertiary-trans-20) …
var(--tertiary-trans-30) …
var(--tertiary-trans-40) …
var(--tertiary-trans-50) …
var(--tertiary-trans-60) …
var(--tertiary-trans-70) …
var(--tertiary-trans-80) …
var(--tertiary-trans-90) …

Transparent - Accent

var(--accent-trans-10) …
var(--accent-trans-20) …
var(--accent-trans-30) …
var(--accent-trans-40) …
var(--accent-trans-50) …
var(--accent-trans-60) …
var(--accent-trans-70) …
var(--accent-trans-80) …
var(--accent-trans-90) …

Transparent - Base

var(--base-trans-10) …
var(--base-trans-20) …
var(--base-trans-30) …
var(--base-trans-40) …
var(--base-trans-50) …
var(--base-trans-60) …
var(--base-trans-70) …
var(--base-trans-80) …
var(--base-trans-90) …

Transparent - Neutral

var(--neutral-trans-03) …
var(--neutral-trans-05) …
var(--neutral-trans-10) …
var(--neutral-trans-20) …
var(--neutral-trans-30) …
var(--neutral-trans-40) …
var(--neutral-trans-50) …
var(--neutral-trans-60) …
var(--neutral-trans-70) …
var(--neutral-trans-80) …
var(--neutral-trans-90) …

Transparent - White

var(--white-trans-03) …
var(--white-trans-05) …
var(--white-trans-10) …
var(--white-trans-20) …
var(--white-trans-30) …
var(--white-trans-40) …
var(--white-trans-50) …
var(--white-trans-60) …
var(--white-trans-70) …
var(--white-trans-80) …
var(--white-trans-90) …
var(--white-trans-95) …

Transparent - Full

var(--transparent) …

Classes

Keine spezifischen Klassen für diese Kategorie — nur Vars (Farben werden über CSS-Custom-Properties auf BEM-Klassen verwendet).

Colors — Overlays

Vars

Colors - Overlays

var(--overlay-main-bg) …
var(--overlay-alt-bg) …

Classes

Colors - Overlays

.overlay-main
.overlay-alt

Borders & Radius

Vars

Borders - Radius

var(--radius) …
var(--radius-xs) …
var(--radius-s) …
var(--radius-m) …
var(--radius-l) …
var(--radius-xl) …
var(--radius-xxl) …
var(--radius-circle) …

Borders - Styles

var(--border) …
var(--border-width) …
var(--border-style) …

Borders - Colors

var(--border-color-light) …
var(--border-color-dark) …

Classes

Borders - Colors

.border-light
.border-dark

Box Shadows

Vars

Box Shadows

var(--box-shadow-m) …
var(--box-shadow-l) …
var(--box-shadow-xl) …

Classes

Box Shadows

.box-shadow-m
.box-shadow-l
.box-shadow-xl

Buttons

Vars

Buttons - Primary

var(--btn-primary-bg) …
var(--btn-primary-bg-active) …
var(--btn-primary-bg-hover) …
var(--btn-primary-text) …
var(--btn-primary-text-hover) …
var(--btn-primary-border) …
var(--btn-primary-border-hover) …
var(--btn-primary-focus-outline-color) …

Buttons - Primary Light

var(--btn-primary-light-bg) …
var(--btn-primary-light-bg-active) …
var(--btn-primary-light-bg-hover) …
var(--btn-primary-light-text) …
var(--btn-primary-light-text-hover) …
var(--btn-primary-light-border) …
var(--btn-primary-light-border-hover) …
var(--btn-primary-light-focus-outline-color) …

Buttons - Primary Dark

var(--btn-primary-dark-bg) …
var(--btn-primary-dark-bg-active) …
var(--btn-primary-dark-bg-hover) …
var(--btn-primary-dark-text) …
var(--btn-primary-dark-text-hover) …
var(--btn-primary-dark-border) …
var(--btn-primary-dark-border-hover) …
var(--btn-primary-dark-focus-outline-color) …

Buttons - Primary Outline

var(--btn-outline-primary-bg) …
var(--btn-outline-primary-bg-hover) …
var(--btn-outline-primary-text) …
var(--btn-outline-primary-text-hover) …
var(--btn-outline-primary-border) …
var(--btn-outline-primary-border-hover) …

Buttons - Primary Outline Light

var(--btn-outline-primary-light-bg) …
var(--btn-outline-primary-light-bg-hover) …
var(--btn-outline-primary-light-text) …
var(--btn-outline-primary-light-text-hover) …
var(--btn-outline-primary-light-border) …
var(--btn-outline-primary-light-border-hover) …

Buttons - Primary Outline Dark

var(--btn-outline-primary-dark-bg) …
var(--btn-outline-primary-dark-bg-hover) …
var(--btn-outline-primary-dark-text) …
var(--btn-outline-primary-dark-text-hover) …
var(--btn-outline-primary-dark-border) …
var(--btn-outline-primary-dark-border-hover) …

Buttons - Secondary

var(--btn-secondary-bg) …
var(--btn-secondary-bg-active) …
var(--btn-secondary-bg-hover) …
var(--btn-secondary-text) …
var(--btn-secondary-text-hover) …
var(--btn-secondary-border) …
var(--btn-secondary-border-hover) …
var(--btn-secondary-focus-outline-color) …

Buttons - Secondary Light

var(--btn-secondary-light-bg) …
var(--btn-secondary-light-bg-active) …
var(--btn-secondary-light-bg-hover) …
var(--btn-secondary-light-text) …
var(--btn-secondary-light-text-hover) …
var(--btn-secondary-light-border) …
var(--btn-secondary-light-border-hover) …
var(--btn-secondary-light-focus-outline-color) …

Buttons - Secondary Dark

var(--btn-secondary-dark-bg) …
var(--btn-secondary-dark-bg-active) …
var(--btn-secondary-dark-bg-hover) …
var(--btn-secondary-dark-text) …
var(--btn-secondary-dark-text-hover) …
var(--btn-secondary-dark-border) …
var(--btn-secondary-dark-border-hover) …
var(--btn-secondary-dark-focus-outline-color) …

Buttons - Secondary Outline

var(--btn-outline-secondary-bg) …
var(--btn-outline-secondary-bg-hover) …
var(--btn-outline-secondary-text) …
var(--btn-outline-secondary-text-hover) …
var(--btn-outline-secondary-border) …
var(--btn-outline-secondary-border-hover) …

Buttons - Secondary Outline Light

var(--btn-outline-secondary-light-bg) …
var(--btn-outline-secondary-light-bg-hover) …
var(--btn-outline-secondary-light-text) …
var(--btn-outline-secondary-light-text-hover) …
var(--btn-outline-secondary-light-border) …
var(--btn-outline-secondary-light-border-hover) …

Buttons - Secondary Outline Dark

var(--btn-outline-secondary-dark-bg) …
var(--btn-outline-secondary-dark-bg-hover) …
var(--btn-outline-secondary-dark-text) …
var(--btn-outline-secondary-dark-text-hover) …
var(--btn-outline-secondary-dark-border) …
var(--btn-outline-secondary-dark-border-hover) …

Buttons - Widths & Heights

var(--btn-width-default) …
var(--btn-width-mobile) …
var(--btn-min-width) …
var(--btn-min-height) …

Buttons - Misc

var(--btn-border-radius) …
var(--btn-border-style) …
var(--btn-border-width) …
var(--btn-disabled-cursor) …
var(--btn-disabled-opacity) …
var(--btn-focus-outline-offset) …
var(--btn-focus-outline-style) …
var(--btn-focus-outline-width) …
var(--btn-font-family) …
var(--btn-font-size) …
var(--btn-font-weight) …
var(--btn-icon-gap) …
var(--btn-icon-offset-top) …
var(--btn-icon-size) …
var(--btn-letter-spacing) …
var(--btn-line-height) …
var(--btn-padding-block) …
var(--btn-padding-inline) …
var(--btn-text-decoration) …
var(--btn-text-decoration-hover) …
var(--btn-text-transform) …
var(--btn-transform-hover) …
var(--btn-transition-duration) …
var(--btn-transition-timing) …

Classes

Buttons - Primary

.btn-primary
.btn-primary-light
.btn-primary-dark

Buttons - Primary Outline

.btn-outline-primary
.btn-outline-primary-light
.btn-outline-primary-dark

Buttons - Secondary

.btn-secondary
.btn-secondary-light
.btn-secondary-dark

Buttons - Secondary Outline

.btn-outline-secondary
.btn-outline-secondary-light
.btn-outline-secondary-dark

Buttons - Sizes

.btn
.btn-s
.btn-l

Buttons - Widths

.btn-width-fit-phone

Links

Vars

Links - Misc

var(--link-color) …
var(--link-color-hover) …
var(--link-decoration) …
var(--link-decoration-hover) …
var(--link-decoration-color) …
var(--link-decoration-color-hover) …
var(--link-decoration-thickness) …
var(--link-underline-offset) …
var(--link-weight) …
var(--link-icon-gap) …
var(--link-icon-size) …
var(--link-icon-scale) …
var(--link-icon-offset-top) …

Classes

Links - Colors

.link-secondary
.link-tertiary
.link-accent

Links - Resets

.link-reset

Miscellaneous

Vars

Animations

var(--animation-fade-distance) …

Columns & Rows

var(--col-gap) …
var(--row-gap) …

Focus

var(--focus-color) …
var(--focus-color-light) …
var(--focus-style) …
var(--focus-width) …
var(--focus-offset) …

Image Captions

var(--image-border-radius) …
var(--image-caption-below-bg-color) …
var(--image-caption-below-border-radius) …
var(--image-caption-below-color) …
var(--image-caption-below-font-size) …
var(--image-caption-below-font-weight) …
var(--image-caption-below-margin-block-start) …
var(--image-caption-below-padding-block) …
var(--image-caption-below-padding-inline) …
var(--image-caption-below-text-align) …
var(--image-caption-overlay-bg) …
var(--image-caption-overlay-bg-color) …
var(--image-caption-overlay-border-radius) …
var(--image-caption-overlay-color) …
var(--image-caption-overlay-font-size) …
var(--image-caption-overlay-font-weight) …
var(--image-caption-overlay-margin-block-start) …
var(--image-caption-overlay-padding-block) …
var(--image-caption-overlay-padding-inline) …
var(--image-caption-overlay-text-align) …

Selection

var(--selection-bg) …
var(--selection-color) …
var(--selection-bg-alt) …
var(--selection-color-alt) …
var(--selection-bg-heading) …
var(--selection-color-heading) …

Sticky - Columns Offset

var(--sticky-offset) …
var(--sticky-top-s) …
var(--sticky-top-m) …
var(--sticky-top-l) …

Sticky - Header Heights & Scroll-To-Hash Offset

var(--header-height) …
var(--offset) …

Transitions

var(--transition-main) …
var(--transition-fast) …
var(--transition-slow) …
var(--transition-timing) …

Classes

Accessibility (A11y)

.skip-link
.sr-only
.sr-only-focusable

Animations

.animation-fade-up

Display - None

.display-none-all-sizes
.display-none-xs
.display-none-s
.display-none-m
.display-none-l
.display-none-xl
.display-none-xxl
.display-none-base
.display-none-base-large

Focus & Clickable

.focus-color-light
.focus-parent
.clickable-parent

Image Captions

.image-caption
.image-caption--overlay

Ribbons

.ribbon
.ribbon-top-left
.ribbon-top-right

Selection

.selection-alt

Silbentrennung (Hyphens)

.hyphens-add-manual
.hyphens-remove-manual
.word-break-anywhere

Sticky - Columns Offset

.sticky
.sticky-top-s
.sticky-top-m
.sticky-top-l

Transitions

.transition-main
.transition-fast
.transition-slow

Auto-Detected 1

.sub-menu

Forms

Vars

Forms - Shared

var(--form-error-margin-top) …
var(--form-error-size) …
var(--form-error-weight) …
var(--form-field-margin-bottom) …
var(--form-fieldset-margin-bottom) …
var(--form-grid-gutter) …
var(--form-help-line-height) …
var(--form-help-margin-block) …
var(--form-help-size-desktop) …
var(--form-help-size-mobile) …
var(--form-help-weight) …
var(--form-input-border-radius) …
var(--form-input-border-style) …
var(--form-input-border-width-block) …
var(--form-input-border-width-inline) …
var(--form-input-height) …
var(--form-input-padding-block) …
var(--form-input-padding-inline) …
var(--form-input-size-desktop) …
var(--form-input-size-mobile) …
var(--form-input-weight) …
var(--form-label-line-height) …
var(--form-label-margin-bottom) …
var(--form-label-size-desktop) …
var(--form-label-size-mobile) …
var(--form-label-transform) …
var(--form-label-weight) …
var(--form-legend-line-height) …
var(--form-legend-margin-bottom) …
var(--form-legend-size-desktop) …
var(--form-legend-size-mobile) …
var(--form-legend-weight) …
var(--form-option-icon-size) …
var(--form-option-line-height) …
var(--form-option-size-desktop) …
var(--form-option-size-mobile) …
var(--form-option-spacing) …
var(--form-option-weight) …
var(--form-option-wrapper-label-margin-bottom) …
var(--form-option-wrapper-padding-bottom) …
var(--form-progress-height) …
var(--form-success-align) …
var(--form-success-border-radius) …
var(--form-success-border-style) …
var(--form-success-border-width) …
var(--form-success-padding-block) …
var(--form-success-padding-inline) …
var(--form-success-size) …
var(--form-success-weight) …
var(--form-tab-group-margin-bottom) …
var(--form-tab-padding-block) …
var(--form-tab-padding-inline) …
var(--form-tab-size-desktop) …
var(--form-tab-size-mobile) …
var(--form-tab-weight) …
var(--form-tab-weight-active) …
var(--wsf-btn-clear-bg) …
var(--wsf-btn-clear-bg-hover) …
var(--wsf-btn-clear-border) …
var(--wsf-btn-clear-border-hover) …
var(--wsf-btn-clear-text) …
var(--wsf-btn-clear-text-hover) …
var(--wsf-btn-next-bg) …
var(--wsf-btn-next-bg-hover) …
var(--wsf-btn-next-border) …
var(--wsf-btn-next-border-hover) …
var(--wsf-btn-next-text) …
var(--wsf-btn-next-text-hover) …
var(--wsf-btn-previous-bg) …
var(--wsf-btn-previous-bg-hover) …
var(--wsf-btn-previous-border) …
var(--wsf-btn-previous-border-hover) …
var(--wsf-btn-previous-text) …
var(--wsf-btn-previous-text-hover) …
var(--wsf-btn-primary-bg) …
var(--wsf-btn-primary-bg-hover) …
var(--wsf-btn-primary-border) …
var(--wsf-btn-primary-border-hover) …
var(--wsf-btn-primary-text) …
var(--wsf-btn-primary-text-hover) …
var(--wsf-btn-reset-bg) …
var(--wsf-btn-reset-bg-hover) …
var(--wsf-btn-reset-border) …
var(--wsf-btn-reset-border-hover) …
var(--wsf-btn-reset-text) …
var(--wsf-btn-reset-text-hover) …
var(--wsf-btn-save-bg) …
var(--wsf-btn-save-bg-hover) …
var(--wsf-btn-save-border) …
var(--wsf-btn-save-border-hover) …
var(--wsf-btn-save-text) …
var(--wsf-btn-save-text-hover) …
var(--wsf-btn-secondary-bg) …
var(--wsf-btn-secondary-bg-hover) …
var(--wsf-btn-secondary-border) …
var(--wsf-btn-secondary-border-hover) …
var(--wsf-btn-secondary-text) …
var(--wsf-btn-secondary-text-hover) …
var(--wsf-color-lower-track) …
var(--wsf-color-upper-track) …
var(--wsf-field-border) …
var(--wsf-field-border-color) …
var(--wsf-field-border-color-focus) …
var(--wsf-field-border-color-hover) …
var(--wsf-field-border-radius) …
var(--wsf-field-checkbox-checked-color-background) …
var(--wsf-field-checkbox-checked-switch-color-background) …
var(--wsf-field-checkbox-gap-horizontal) …
var(--wsf-field-checkbox-size) …
var(--wsf-field-color) …
var(--wsf-field-color-background) …
var(--wsf-field-color-background-focus) …
var(--wsf-field-color-background-hover) …
var(--wsf-field-color-focus) …
var(--wsf-field-color-hover) …
var(--wsf-field-color-placeholder) …
var(--wsf-field-color-placeholder-hover) …
var(--wsf-field-file-dropzonejs-border-color) …
var(--wsf-field-file-dropzonejs-border-style) …
var(--wsf-field-file-dropzonejs-color-background) …
var(--wsf-field-radio-checked-color) …
var(--wsf-field-radio-checked-switch-color-background) …
var(--wsf-field-radio-color-background) …
var(--wsf-field-radio-size) …
var(--wsf-form-transition) …
var(--wsf-group-li-border-color-disabled) …
var(--wsf-group-li-color-disabled) …
var(--wsf-group-ul-color-background-disabled) …

Forms - Light

var(--form-light-asterisk-color) …
var(--form-light-error-message-color) …
var(--form-light-focus-color) …
var(--form-light-focus-opacity) …
var(--form-light-help-color) …
var(--form-light-input-bg) …
var(--form-light-input-bg-hover) …
var(--form-light-input-border) …
var(--form-light-input-border-hover) …
var(--form-light-input-color) …
var(--form-light-input-placeholder) …
var(--form-light-label-color) …
var(--form-light-legend-color) …
var(--form-light-option-action) …
var(--form-light-progress-bg) …
var(--form-light-progress-fill) …
var(--form-light-success-color) …

Forms - Dark

var(--form-dark-asterisk-color) …
var(--form-dark-error-message-color) …
var(--form-dark-focus-color) …
var(--form-dark-focus-opacity) …
var(--form-dark-help-color) …
var(--form-dark-input-bg) …
var(--form-dark-input-bg-hover) …
var(--form-dark-input-border) …
var(--form-dark-input-border-hover) …
var(--form-dark-input-color) …
var(--form-dark-input-placeholder) …
var(--form-dark-label-color) …
var(--form-dark-legend-color) …
var(--form-dark-option-action) …
var(--form-dark-progress-bg) …
var(--form-dark-progress-fill) …
var(--form-dark-success-color) …

Classes

Forms - Light/Dark

.form-light
.form-dark

Cookies

Vars

Cookies - Banner

var(--cookie-banner-bg-color) …
var(--cookie-banner-text-color) …
var(--cookie-banner-padding) …
var(--cookie-banner-border-radius) …
var(--cookie-banner-z-index) …

Classes

Cookies - Banner

.cookie-banner

BCSS Vars/Classes & BEM-Classes

Spacings & Widths

Vars

Classes

Headings

Vars

Classes

Texts

Vars

Classes

Grids

Vars

Classes

Colors — Contextual

Vars

Classes

Colors — Simple

Vars

Classes

Colors — Transparent

Vars

Classes

Colors — Overlays

Vars

Classes

Borders & Radius

Vars

Classes

Box Shadows

Vars

Classes

Buttons

Vars

Classes

Links

Vars

Classes

Miscellaneous

Vars

Classes

Forms

Vars

Classes

Cookies

Vars

Classes

Header & Footer

Pages

Content Collections

OffCanvas