Utilities (CSS)

The 📁base/_util.scss file contains a set of utility classes used across multiple components.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

🔍 On this page:

Flexbox
Display
Visibility
Margin
Padding
Vertical Alignment
Typography
Color
Width
Height
Max-width
Min-width
Background
Border
Border Radius
Box Shadow
Misc

Flexbox #

The flexbox utility classes help you align content and create 2D layouts:

Class	Description
`.flex`	display: flex;
`.inline-flex`	display: inline-flex;
`.flex-wrap`	flex-wrap: wrap;
`.flex-column`	flex-direction: column;
`.flex-column-reverse`	flex-direction: column-reverse;
`.flex-row`	flex-direction: row;
`.flex-row-reverse`	flex-direction: row-reverse;
`.flex-center`	justify-content: center; align-items: center;
`.justify-start`	justify-content: flex-start;
`.justify-end`	justify-content: flex-end;
`.justify-center`	justify-content: center;
`.justify-between`	justify-content: space-between;
`.items-center`	align-items: center;
`.items-start`	align-items: flex-start;
`.items-end`	align-items: flex-end;

Edit the flexbox utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

_

Classes for flex items:

Class	Description
`.flex-grow`	flex-grow: 1;
`.flex-shrink-0`	flex-shrink: 0;
`.flex-basis-0`	flex-basis: 0;

Flex gap: set a gap among flex items using one of the .flex-gap-{size} classes:

Class	Description
`.flex-gap-xxxs`	set gap equal to var(--space-xxxs)
`.flex-gap-xxs`	set gap equal to var(--space-xxs)
`.flex-gap-xs`	set gap equal to var(--space-xs)
`.flex-gap-sm`	set gap equal to var(--space-sm)
`.flex-gap-md`	set gap equal to var(--space-md)
`.flex-gap-lg`	set gap equal to var(--space-lg)
`.flex-gap-xl`	set gap equal to var(--space-xl)
`.flex-gap-xxl`	set gap equal to var(--space-xxl)
`.flex-gap-xxxl`	set gap equal to var(--space-xxxl)

Example:

Display #

Display utility classes:

Class	Description
`.block`	display: block;
`.flex`	display: flex;
`.inline-block`	display: inline-block;
`.inline-flex`	display: inline-flex;
`.inline`	display: inline;

Edit the display utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

<h1>Line one, <span class="[email protected]">line two at 'medium' media query.</span></h1>

Visibility #

Visibility utility classes. More information on how these classes work on the Visibility documentation page.

Class	Description
`[email protected]`	hide element until breakpoint 'xs'
`[email protected]`	hide element until breakpoint 'sm'
`[email protected]`	hide element until breakpoint 'md'
`[email protected]`	hide element until breakpoint 'lg'
`[email protected]`	hide element until breakpoint 'xl'
`[email protected]`	hide element at breakpoint 'xs'
`[email protected]`	hide element at breakpoint 'sm'
`[email protected]`	hide element at breakpoint 'md'
`[email protected]`	hide element at breakpoint 'lg'
`[email protected]`	hide element at breakpoint 'xl'

Margin #

Margin utility classes:

Class	Description
`.margin-xxxxs`	margin: var(--space-xxxxs);
`.margin-xxxs`	margin: var(--space-xxxs);
`.margin-xxs`	margin: var(--space-xxs);
`.margin-xs`	margin: var(--space-xs);
`.margin-sm`	margin: var(--space-sm);
`.margin-md`	margin: var(--space-md);
`.margin-lg`	margin: var(--space-lg);
`.margin-xl`	margin: var(--space-xl);
`.margin-xxl`	margin: var(--space-xxl);
`.margin-xxxl`	margin: var(--space-xxxl);
`.margin-xxxxl`	margin: var(--space-xxxxl);
`.margin-auto`	margin: auto;

Target a specific side using .margin-{side}-{size}:

Class	Description
`.margin-top-xs`	margin-top: var(--space-xs);
`.margin-bottom-xl`	margin-bottom: var(--space-xl);
`.margin-right-auto`	margin-right: auto;
`.margin-left-md`	margin-left: var(--space-md);

Target left and right using .margin-x-{size}:

Class	Description
`.margin-x-sm`	margin-left: var(--space-sm); margin-right: var(--space-sm);

Target top and bottom using .margin-y-{size}:

Class	Description
`.margin-y-md`	margin-top: var(--space-md); margin-bottom: var(--space-md);

Specify that margin is active only past a specific breakpoint using [email protected]{breakpoint}:

_

Padding #

Padding utility classes:

Class	Description
`.padding-xxxxs`	padding: var(--space-xxxxs);
`.padding-xxxs`	padding: var(--space-xxxs);
`.padding-xxs`	padding: var(--space-xxs);
`.padding-xs`	padding: var(--space-xs);
`.padding-sm`	padding: var(--space-sm);
`.padding-md`	padding: var(--space-md);
`.padding-lg`	padding: var(--space-lg);
`.padding-xl`	padding: var(--space-xl);
`.padding-xxl`	padding: var(--space-xxl);
`.padding-xxxl`	padding: var(--space-xxxl);
`.padding-xxxxl`	padding: var(--space-xxxxl);
`.padding-component`	padding: var(--component-padding);

Target a specific side using .padding-{side}-{size}:

Class	Description
`.padding-top-sm`	padding-top: var(--space-sm);
`.padding-bottom-xl`	padding-bottom: var(--space-xl);
`.padding-right-xs`	padding-right: var(--space-xs);
`.padding-left-component`	padding-left: var(--component-padding);

Target left and right using .padding-x-{size}:

Class	Description
`.padding-x-sm`	padding-left: var(--space-sm); padding-right: var(--space-sm);

Target top and bottom using .padding-y-{size}:

Class	Description
`.padding-y-xs`	padding-top: var(--space-xs); padding-bottom: var(--space-xs);

Specify that padding is active only past a speficif breakpoint using [email protected]{breakpoint}:

_

Vertical Alignment #

Vertical alignment utility classes:

Class	Description
`.align-baseline`	vertical-align: baseline;
`.align-top`	vertical-align: top;
`.align-middle`	vertical-align: middle;
`.align-bottom`	vertical-align: bottom;

Typography #

Typography utility classes:

Class	Description
`.link`	apply same style of link elements
`.text-bold`	font-weight: bold;
`.text-underline`	text-decoration: underline;
`.text-truncate`	truncate text if it exceeds its parent (example)
`.text-replace`	replace text with img
`.text-nowrap`	white-space: nowrap;

Text size:

Class	Description
`.text-xs`	font-size: var(--text-xs);
`.text-sm`	font-size: var(--text-sm);
`.text-md`	font-size: var(--text-md);
`.text-lg`	font-size: var(--text-lg);
`.text-xl`	font-size: var(--text-xl);
`.text-xxl`	font-size: var(--text-xxl);
`.text-xxxl`	font-size: var(--text-xxxl);

Text alignment:

Class	Description
`.text-center`	text-align: center;
`.text-left`	text-align: left;
`.text-right`	text-align: right;

Edit the text alignment classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

_

Modify the line-height of the .text-component:

Class	Description
`.line-height-xs`	--heading-line-height: 1; --body-line-height: 1;
`.line-height-sm`	--heading-line-height: 1.1; --body-line-height: 1.2;
`.line-height-md`	--heading-line-height: 1.15; --body-line-height: 1.4;
`.line-height-lg`	--heading-line-height: 1.22; --body-line-height: 1.58;
`.line-height-xl`	--heading-line-height: 1.3; --body-line-height: 1.72;

Modify the vertical spacing (margins) of the .text-component:

Class	Description
`.v-space-xxs`	--text-vspace-multiplier: 0.25;
`.v-space-xs`	--text-vspace-multiplier: 0.5;
`.v-space-sm`	--text-vspace-multiplier: 0.75;
`.v-space-md`	--text-vspace-multiplier: 1.25;
`.v-space-lg`	--text-vspace-multiplier: 1.5;
`.v-space-xl`	--text-vspace-multiplier: 1.75;
`.v-space-xxl`	--text-vspace-multiplier: 2;

Color #

Color utility classes:

Class	Description
`.color-inherit`	color: inherit;
`.color-bg`	color: var(--color-bg);
`.color-contrast-lower`	color: var(--color-contrast-lower);
`.color-contrast-low`	color: var(--color-contrast-low);
`.color-contrast-medium`	color: var(--color-contrast-medium);
`.color-contrast-high`	color: var(--color-contrast-high);
`.color-contrast-higher`	color: var(--color-contrast-higher);
`.color-primary`	color: var(--color-primary);
`.color-accent`	color: var(--color-accent);
`.color-success`	color: var(--color-success);
`.color-warning`	color: var(--color-warning);
`.color-error`	color: var(--color-error);

Width#

Width utility classes:

Class	Description
`.width-xxxxs`	width: 0.25rem; (~4px)
`.width-xxxs`	width: 0.5rem; (~8px)
`.width-xxs`	width: 0.75rem; (~12px)
`.width-xs`	width: 1rem; (~16px)
`.width-sm`	width: 1.25rem; (~24px)
`.width-md`	width: 2rem; (~32px)
`.width-lg`	width: 3rem; (~48px)
`.width-xl`	width: 4rem; (~64px)
`.width-xxl`	width: 6rem; (~96px)
`.width-xxxl`	width: 8rem; (~128px)
`.width-xxxxl`	width: 16rem; (~256px)
`.width-10%`	width: 10%;
`.width-20%`	width: 20%;
`.width-25%`	width: 25%;
`.width-30%`	width: 30%;
`.width-33%`	width: calc(100% / 3);
`.width-40%`	width: 40%;
`.width-50%`	width: 50%;
`.width-60%`	width: 60%;
`.width-66%`	width: calc(100% / 1.5);
`.width-70%`	width: 70%;
`.width-75%`	width: 75%;
`.width-80%`	width: 80%;
`.width-90%`	width: 90%;
`.width-100%`	width: 100%;

Height#

Height utility classes:

Class	Description
`.height-xxxxs`	height: 0.25rem; (~4px)
`.height-xxxs`	height: 0.5rem; (~8px)
`.height-xxs`	height: 0.75rem; (~12px)
`.height-xs`	height: 1rem; (~16px)
`.height-sm`	height: 1.25rem; (~24px)
`.height-md`	height: 2rem; (~32px)
`.height-lg`	height: 3rem; (~48px)
`.height-xl`	height: 4rem; (~64px)
`.height-xxl`	height: 6rem; (~96px)
`.height-xxxl`	height: 8rem; (~128px)
`.height-xxxxl`	height: 16rem; (~256px)
`.height-10%`	height: 10%;
`.height-20%`	height: 20%;
`.height-25%`	height: 25%;
`.height-30%`	height: 30%;
`.height-33%`	height: calc(100% / 3);
`.height-40%`	height: 40%;
`.height-50%`	height: 50%;
`.height-60%`	height: 60%;
`.height-66%`	height: calc(100% / 1.5);
`.height-70%`	height: 70%;
`.height-75%`	height: 75%;
`.height-80%`	height: 80%;
`.height-90%`	height: 90%;
`.height-100%`	height: 100%;

Max-width #

The .max-width-{size} classes can be used to set the max-width of an element:

Class	Description
`.max-width-xxxxs`	set max-width equal to 20rem (~320px)
`.max-width-xxxs`	set max-width equal to 26rem (~416px)
`.max-width-xxs`	set max-width equal to 32rem (~512px)
`.max-width-xs`	set max-width equal to 38rem (~608px)
`.max-width-sm`	set max-width equal to 48rem (~768px)
`.max-width-md`	set max-width equal to 64rem (~1024px)
`.max-width-lg`	set max-width equal to 80rem (~1280px)
`.max-width-xl`	set max-width equal to 90rem (~1440px)
`.max-width-xxl`	set max-width equal to 100rem (~1600px)
`.max-width-xxxl`	set max-width equal to 120rem (~1920px)
`.max-width-xxxxl`	set max-width equal to 150rem (~2400px)

If you want to have different max-widths at different breakpoints, you can use one of the .max-width-adaptive-{size} classes (example):

Class	Description
`.max-width-adaptive-sm`	set max-width equal to 48rem (~768px) at breakpoint md
`.max-width-adaptive-md`	set max-width equal to 64rem (~1024px) at breakpoint md
`.max-width-adaptive-lg`	set max-width equal to 64rem (~1024px) at breakpoint md and to 80rem (~1280px) at breakpoint xl
`.max-width-adaptive-xl`	set max-width equal to 64rem (~1024px) at breakpoint md and to 90rem (~1440px) at breakpoint xl

Min-width #

Min-width utility classes:

Class	Description
`.min-width-0`	min-width: 0;
`.min-width-25%`	min-width: 25%;
`.min-width-33%`	min-width: calc(100% / 3);
`.min-width-50%`	min-width: 50%;
`.min-width-66%`	min-width: calc(100% / 1.5);
`.min-width-75%`	min-width: 75%;
`.min-width-100%`	min-width: 100%

Background #

Background color utility classes:

Class	Description
`.bg-inherit`	background-color: inherit;
`.bg`	background-color: var(--color-bg, hsl(0, 0%, 100%));
`.bg-contrast-lower`	background-color: var(--color-contrast-lower, hsl(0, 0%, 95%));
`.bg-contrast-low`	background-color: var(--color-contrast-low, hsl(240, 1%, 83%));
`.bg-contrast-medium`	background-color: var(--color-contrast-medium, hsl(240, 1%, 48%));
`.bg-contrast-high`	background-color: var(--color-contrast-high, hsl(240, 4%, 20%));
`.bg-contrast-higher`	background-color: var(--color-contrast-higher, hsl(240, 8%, 12%));
`.bg-primary`	background-color: var(--color-primary, hsl(220, 90%, 56%));
`.bg-accent`	background-color: var(--color-accent, hsl(355, 90%, 61%));
`.bg-success`	background-color: var(--color-success, hsl(94, 48%, 56%));
`.bg-warning`	background-color: var(--color-warning, hsl(46, 100%, 61%));
`.bg-error`	background-color: var(--color-error, hsl(355, 90%, 61%));
`.bg-white`	background-color: var(--color-white, white);
`.bg-black`	background-color: var(--color-black, black);

Border #

Border utility classes:

Class	Description
`.border`	border: 1px solid var(--color-contrast-low);
`.border-top`	border-top: 1px solid var(--color-contrast-low);
`.border-bottom`	border-bottom: 1px solid var(--color-contrast-low);
`.border-left`	border-left: 1px solid var(--color-contrast-low);
`.border-right`	border-right: 1px solid var(--color-contrast-low);
`.border-2`	border-width: 2px;
`.border-contrast-lower`	border-color: var(--color-contrast-lower);
`.border-contrast-medium`	border-color: var(--color-contrast-medium);

Border Radius #

Border radius utility classes:

Class	Description
`.radius-sm`	border-radius: var(--radius-sm);
`.radius-md`	border-radius: var(--radius-md);
`.radius-lg`	border-radius: var(--radius-lg);

Box Shadow #

Box shadow utility classes:

Class	Description
`.shadow-xs`	box-shadow: var(--shadow-xs);
`.shadow-sm`	box-shadow: var(--shadow-sm);
`.shadow-md`	box-shadow: var(--shadow-md);
`.shadow-lg`	box-shadow: var(--shadow-lg);
`.shadow-xl`	box-shadow: var(--shadow-xl);

Misc #

Class	Description
`.media-wrapper`	make iframe responsive + prevent img jump when page loads. Default ratio is 16:9 (example).
`.media-wrapper--4:3`	set 4:3 ratio
`.clearfix`	clear float of child elements