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:

Example:

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

⚠️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:

Example:

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

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

Border Radius #

Border radius utility classes:

Box Shadow #

Box shadow utility classes:

Color #

Color utility classes:

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

Example:

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

⚠️ 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 .flex-grow and .flex-shrink-0 at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

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

Example:

Float #

Float utility classes:

Height #

Height utility classes:

Justify Content #

justify-content utility classes:

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

Margin #

Margin utility classes:

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.

Max-height #

Man-height utility classes:

Max-width #

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

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

Min-height #

Min-height utility classes:

Min-width #

Min-width 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:

Padding #

Padding utility classes:

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.

Pointer Events #

Pointer-events utility classes:

Position #

Position 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 weight #

Font family #

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

Text align #

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

Example:

Text Transform #

Letter Spacing #

Text Decoration #

Line Height #

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

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:

Z-Index #

z-index utility classes: