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:

  1. Flexbox
  2. Margin
  3. Padding
  4. Typography
  5. Color
  6. Width and Height
  7. Misc

Flexbox #

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

Set the display value:

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

Alignment classes based on flexbox:

Class Description
.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 alignment classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).


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)


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).



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