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. Justify Content
3. Align Items
4. Order
5. Display
6. Visibility
7. Margin
8. Padding
9. Vertical Align
10. Typography
11. White Space
12. Color
13. Width
14. Height
15. Max-width
16. Min-width
17. Position
18. Z-Index
19. Overflow
20. Opacity
21. Background
22. Border
23. Border Radius
24. Box Shadow
25. Media Wrapper
26. Float
27. Object Fit

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 .flex-gap-{size} classes:

Example:

Justify Content #

justify-content utility classes:

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

Align Items #

align-items utility classes:

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

Order #

Order utility classes:

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

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>

Visibility #

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

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

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

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

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

Vertical Alignment #

Vertical alignment utility classes:

Typography #

Typography utility classes.

Font size #

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 #

White Space #

white-space 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.

Width#

Width utility classes:

Height#

Height utility classes:

Max-width #

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

If you want to set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{size} classes (example):

Min-width #

Min-width utility classes:

Position #

Position utility classes:

Z-Index #

z-index utility classes:

Overflow #

Overflow utility classes:

Opacity #

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

Media Wrapper #

Media Wrapper utility classes:

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

Float #

Float utility classes:

Object Fit #

Object fit utility classes: