Utilities (CSS)

Align Items #

Align-items utility classes:

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

Backdrop Filter #

Apply graphical effects to the area behind an element using the backdrop-filter utility classes:

Background #

Background color utility classes:

If you use a background color utility class, you can modify the background opacity using one of the following classes:

Usage example:

<div class="bg-primary bg-opacity-50%"> <!-- content --> </div> 

How to create custom background opacity classes:

.bg-opacity-075\% {
  --bg-o: 0.075;
}

.bg-opacity-15\% {
  --bg-o: 0.15;
}

⚠️ The background opacity utility classes are based on CSS variables and work only in modern browsers.

Background size and background position utility classes:

Border #

Border utility classes:

If you use a border utility class, you can modify the border opacity using one of the following classes:

Usage example:

<div class="border border-2 border-opacity-70%"> <!-- content --> </div> 

How to create custom border opacity classes:

.border-opacity-075\% {
  --border-o: 0.075;
}

.border-opacity-15\% {
  --border-o: 0.15;
}

⚠️ The border opacity utility classes are based on CSS variables and work only in modern browsers.

Border Radius #

Border radius utility classes:

Optionally, you can update the default border radius variables in the 📁 custom-style/_shared-styles.scss file:

:root {
  --radius: 0.25em; // border radius base size
  --radius-sm: calc(var(--radius)/2);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius)*2);
}

Box Shadow #

Box shadow utility classes:

Optionally, you can update the default shadow variables in the 📁 custom-style/_shared-styles.scss file:

:root {
  --shadow-xs:  0 0.1px 0.3px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm:  0 0.3px 0.4px rgba(0, 0, 0, 0.025),
                0 0.9px 1.5px rgba(0, 0, 0, 0.05), 
                0 3.5px 6px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 0.9px 1.5px rgba(0, 0, 0, 0.03), 
                0 3.1px 5.5px rgba(0, 0, 0, 0.08), 
                0 14px 25px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 
                0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 
                0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 
                0 30px 42px -1px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 
                0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 
                0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 
                0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 
                0 46px 60px -6px rgba(0, 0, 0, 0.2);
}

Color #

Color utility classes:

If you use a color utility class, you can modify the color opacity using one of the following classes:

Usage example:

<p class="color-primary color-opacity-50%">Lorem ipsum dolor.</p>

How to create custom color opacity classes:

.color-opacity-075\% {
  --color-o: 0.075;
}

.color-opacity-15\% {
  --color-o: 0.15;
}

⚠️ The color-opacity utility classes are based on CSS variables and work only in modern browsers.

Cursor #

Display #

Display utility classes:

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>

Flexbox #

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

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

Example:

Flex Items #

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

Example:

<div class="[email protected]">
  <!-- ... -->
</div>

Flex gap #

Set a gap among flex items using one of the .gap-{size} classes.

Use the .gap-{size}@{breakpoint} variations to modify the gap at a specific breakpoint (e.g., [email protected]).

Use the .gap-y-{size}/.gap-x-{size} classes to modify only the vertical/horizontal gap (e.g., [email protected]). 

Example:

Float #

Float utility classes:

Height #

Height utility classes:

Optionally, you can update the default height variables by adding your own in the 📁 custom-style/_util.scss file:

:root {
  // size - scale used to set width/height values 
  --size-xxxxs: 0.25rem; // ~4px
  --size-xxxs:  0.5rem;  // ~8px
  --size-xxs:   0.75rem; // ~12px
  --size-xs:    1rem;    // ~16px
  --size-sm:    1.5rem;  // ~24px
  --size-md:    2rem;    // ~32px
  --size-lg:    3rem;    // ~48px
  --size-xl:    4rem;    // ~64px
  --size-xxl:   6rem;    // ~96px
  --size-xxxl:  8rem;    // ~128px
  --size-xxxxl: 16rem;   // ~256px
}

Edit the height at a specific breakpoint adding the @{breakpoint} suffix to the height utility classes:

<div class="height-100vh [email protected]">
  <!-- ... -->
</div>

Justify Content #

justify-content utility classes:

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

Max-height #

Man-height utility classes:

Max-width #

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

:root {
  --max-width-xxxxs: 20rem;  // ~320px
  --max-width-xxxs:  26rem;  // ~416px
  --max-width-xxs:   32rem;  // ~512px
  --max-width-xs:    38rem;  // ~608px
  --max-width-sm:    48rem;  // ~768px
  --max-width-md:    64rem;  // ~1024px
  --max-width-lg:    80rem;  // ~1280px
  --max-width-xl:    90rem;  // ~1440px
  --max-width-xxl:   100rem; // ~1600px
  --max-width-xxxl:  120rem; // ~1920px
  --max-width-xxxxl: 150rem; // ~2400px
}

Media Wrapper #

Set the aspect ratio of an element by adding the .media-wrapper class to its parent (e.g., use this class to make an iframe responsive - example):

To create additional .media-wrapper--x:y classes, define your custom $media-wrapper-aspect-ratios SASS map and import it before the 'base' and 'custom-style' files of the framework.

$media-wrapper-aspect-ratios: (
  (4 3),
  (1 1),
  (21 9) // custom ratio
);

@import 'base';
@import 'custom-style';

Make sure to include the ratios 4/3 and 1/1 when defining your custom $media-wrapper-aspect-ratios map (as shown in the snippet above).

Alternatively, you can create an _util.scss file inside the /custom-style folder, and add your custom ratios. Here's an example:

.media-wrapper--4\:5 { 
  padding-bottom: 125%; // calc(5/4*100)
}

Min-height #

Min-height utility classes:

Min-width #

Min-width utility classes:

Mix-blend-mode #

Mix-blend-mode utility classes:

Object Fit #

Object fit utility classes:

Opacity #

Opacity utility classes:

Order #

Order utility classes:

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

Overflow #

Overflow utility classes:

Pointer Events #

Pointer-events utility classes:

Position #

Position utility classes:

Edit the position at a specific breakpoint adding the @{breakpoint} suffix to the position utility classes:

<div class="[email protected] [email protected]">
  <!-- ... -->
</div>

Margin #

Margin utility classes (based on the spacing variables):

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

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

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

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

Example:

<div class="margin-md [email protected]"><!-- content --></div>

⚠️ The margin responsive modifiers work only in modern browsers.

Padding #

Padding utility classes (based on the spacing variables):

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

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

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

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

Example:

<div class="[email protected]"><!-- content --></div>

⚠️ The padding responsive modifiers work only in modern browsers.

Transform#

Transform utility classes:

Typography #

Typography utility classes.

Font Size #

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

Example:

<p class="text-lg [email protected]"><!-- content --></p>

⚠️ The font-size responsive modifiers work only in modern browsers.

Font Size Unit #

Change the font-size unit on a component level.

Font Weight #

Font Family #

If you're using the Typography editor, it'll automatically generate utility classes for additional font families. 

Font Style #

Text Align #

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

Example:

Text Shadow #

Text Transform #

Letter Spacing #

Text Decoration #

Line Height #

Line-height utility classes:

When you use a line-height utility class on the .text-component:

Vertical Spacing #

Modify the vertical spacing (margins top/bottom) of the .text-component class:

Misc #

User Select #

User select utility classes:

Vertical Alignment #

Vertical alignment utility classes:

Visibility #

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

White Space #

white-space utility classes:

Width #

Width utility classes:

Optionally, you can update the default width variables by adding your own in the 📁 custom-style/_util.scss file:

:root {
  // size - scale used to set width/height values 
  --size-xxxxs: 0.25rem; // ~4px
  --size-xxxs:  0.5rem;  // ~8px
  --size-xxs:   0.75rem; // ~12px
  --size-xs:    1rem;    // ~16px
  --size-sm:    1.5rem;  // ~24px
  --size-md:    2rem;    // ~32px
  --size-lg:    3rem;    // ~48px
  --size-xl:    4rem;    // ~64px
  --size-xxl:   6rem;    // ~96px
  --size-xxxl:  8rem;    // ~128px
  --size-xxxxl: 16rem;   // ~256px
}

Edit the width at a specific breakpoint adding the @{breakpoint} suffix to the width utility classes:

<div class="width-100% [email protected]">
  <!-- ... -->
</div>

Z-Index #

z-index utility classes:

Optionally, you can overwrite the default z-index variables and set your own in the 📁 custom-style folder (e.g., you can create a _z-index.scss file to store them):

:root {
  --zindex-header: 3; // e.g., main header
  --zindex-popover: 5; // e.g., tooltips and dropdown
  --zindex-fixed-element: 10; // e.g., 'back to top' button
  --zindex-overlay: 15; // e.g., modals and dialogs
}