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. Display
3. Visibility
4. Margin
5. Padding
6. Vertical Alignment
7. Typography
8. Color
9. Width
10. Height
11. Max-width
12. Min-width
13. Position
14. Overflow
15. Background
16. Border
17. Border Radius
18. Box Shadow
19. Media Wrapper
20. Float
21. 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:

Classes for flex items:

Flex gap: set a gap among flex items using one of the .flex-gap-{size} classes:

Example:

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 speficif breakpoint using [email protected]{breakpoint}:

Vertical Alignment #

Vertical alignment utility classes:

Typography #

Typography utility classes:

Text size:

Text alignment:

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

Example:

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

Modify the vertical spacing (margins) of the .text-component:

Color #

Color utility classes:

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 have different max-widths at different breakpoints, you can use one of the .max-width-adaptive-{size} classes (example):

Min-width #

Min-width utility classes:

Position #

Position utility classes:

Overflow #

Overflow utility classes:

Background #

Background color utility classes:

Border #

Border utility classes:

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: