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
Margin
Padding
Typography
Color
Width and Height
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-row`	flex-direction: row;
`.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 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:

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

_

Typography #

Typography utility classes:

Class	Description
`.text-truncate`	truncate text if it exceeds its parent (example)
`.text-replace`	replace text with img

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:

_

Miscellaneous:

Class	Description
`.link`	apply same style of link elements
`.text-bold`	font-weight: bold;
`.text-underline`	text-decoration: underline;

Color #

Color utility classes:

Class	Description
`.color-inherit`	color: inherit;
`.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 and Height #

Width and height utility classes:

Class	Description
`.width-100%`	width: 100%;
`.height-100%`	height: 100%;

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