πŸŽ‰ Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

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

Align Items #

Align-items utility classes:

Class Description
.items-center align-items: center;
.items-start align-items: flex-start;
.items-end align-items: flex-end;
.items-baseline align-items: baseline;

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:

Class Description
.backdrop-blur-10 backdrop-filter: blur(10px);
.backdrop-blur-20 backdrop-filter: blur(20px);

Background #

Background color utility classes:

Class Description
.bg-transparent background-color: transparent;
.bg-inherit background-color: inherit;
.bg background-color: var(--color-bg);
.bg-contrast-lower background-color: var(--color-contrast-lower);
.bg-contrast-low background-color: var(--color-contrast-low);
.bg-contrast-medium background-color: var(--color-contrast-medium);
.bg-contrast-high background-color: var(--color-contrast-high);
.bg-contrast-higher background-color: var(--color-contrast-higher);
.bg-primary-darker background-color: var(--color-primary-darker);
.bg-primary-dark background-color: var(--color-primary-dark);
.bg-primary background-color: var(--color-primary);
.bg-primary-light background-color: var(--color-primary-light);
.bg-primary-lighter background-color: var(--color-primary-lighter);
.bg-accent-darker background-color: var(--color-accent-darker);
.bg-accent-dark background-color: var(--color-accent-dark);
.bg-accent background-color: var(--color-accent);
.bg-accent-light background-color: var(--color-accent-light);
.bg-accent-lighter background-color: var(--color-accent-lighter);
.bg-success-darker background-color: var(--color-success-darker);
.bg-success-dark background-color: var(--color-success-dark);
.bg-success background-color: var(--color-success);
.bg-success-light background-color: var(--color-success-light);
.bg-success-lighter background-color: var(--color-success-lighter);
.bg-warning-darker background-color: var(--color-warning-darker);
.bg-warning-dark background-color: var(--color-warning-dark);
.bg-warning background-color: var(--color-warning);
.bg-warning-light background-color: var(--color-warning-light);
.bg-warning-lighter background-color: var(--color-warning-lighter);
.bg-error-darker background-color: var(--color-error-darker);
.bg-error-dark background-color: var(--color-error-dark);
.bg-error background-color: var(--color-error);
.bg-error-light background-color: var(--color-error-light);
.bg-error-lighter background-color: var(--color-error-lighter);
.bg-white background-color: var(--color-white, white);
.bg-black background-color: var(--color-black, black);

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

Class Description
.bg-opacity-10% background opacity 10%
.bg-opacity-20% background opacity 20%
.bg-opacity-30% background opacity 30%
.bg-opacity-40% background opacity 40%
.bg-opacity-50% background opacity 50%
.bg-opacity-60% background opacity 60%
.bg-opacity-70% background opacity 70%
.bg-opacity-80% background opacity 80%
.bg-opacity-90% background opacity 90%

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:

Class Description
.bg-cover background-size: cover;
.bg-center background-position: center;
.bg-no-repeat background-repeat: no-repeat;

Border #

Border utility classes:

Class Description
.border border: 1px solid var(--color-contrast-low);
.border-top border-top: 1px solid var(--color-contrast-low);
.border-bottom border-bottom: 1px solid var(--color-contrast-low);
.border-left border-left: 1px solid var(--color-contrast-low);
.border-right border-right: 1px solid var(--color-contrast-low);
.border-2 border-width: 2px;
.border-3 border-width: 3px;
.border-4 border-width: 4px;
.border-contrast-lower border-color: var(--color-contrast-lower);
.border-contrast-low border-color: var(--color-contrast-low);
.border-contrast-medium border-color: var(--color-contrast-medium);
.border-contrast-high border-color: var(--color-contrast-high);
.border-contrast-higher border-color: var(--color-contrast-higher);
.border-primary-darker border-color: var(--color-primary-darker);
.border-primary-dark border-color: var(--color-primary-dark);
.border-primary border-color: var(--color-primary);
.border-primary-light border-color: var(--color-primary-light);
.border-primary-lighter border-color: var(--color-primary-lighter);
.border-accent-darker border-color: var(--color-accent-darker);
.border-accent-dark border-color: var(--color-accent-dark);
.border-accent border-color: var(--color-accent);
.border-accent-light border-color: var(--color-accent-light);
.border-accent-lighter border-color: var(--color-accent-lighter);
.border-success-darker border-color: var(--color-success-darker);
.border-success-dark border-color: var(--color-success-dark);
.border-success border-color: var(--color-success);
.border-success-light border-color: var(--color-success-light);
.border-success-lighter border-color: var(--color-success-lighter);
.border-warning-darker border-color: var(--color-warning-darker);
.border-warning-dark border-color: var(--color-warning-dark);
.border-warning border-color: var(--color-warning);
.border-warning-light border-color: var(--color-warning-light);
.border-warning-lighter border-color: var(--color-warning-lighter);
.border-error-darker border-color: var(--color-error-darker);
.border-error-dark border-color: var(--color-error-dark);
.border-error border-color: var(--color-error);
.border-error-light border-color: var(--color-error-light);
.border-error-lighter border-color: var(--color-error-lighter);
.border-white border-color: var(--color-white);
.border-black border-color: var(--color-black);

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

Class Description
.border-opacity-10% border opacity 10%
.border-opacity-20% border opacity 20%
.border-opacity-30% border opacity 30%
.border-opacity-40% border opacity 40%
.border-opacity-50% border opacity 50%
.border-opacity-60% border opacity 60%
.border-opacity-70% border opacity 70%
.border-opacity-80% border opacity 80%
.border-opacity-90% border opacity 90%

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:

Class Description
.radius-sm border-radius: var(--radius-sm);
.radius-md border-radius: var(--radius-md);
.radius-lg border-radius: var(--radius-lg);
.radius-50% border-radius: 50%;

Box Shadow #

Box shadow utility classes:

Class Description
.shadow-xs box-shadow: var(--shadow-xs);
.shadow-sm box-shadow: var(--shadow-sm);
.shadow-md box-shadow: var(--shadow-md);
.shadow-lg box-shadow: var(--shadow-lg);
.shadow-xl box-shadow: var(--shadow-xl);

Color #

Color utility classes:

Class Description
.color-inherit color: inherit;
.color-bg color: var(--color-bg);
.color-contrast-lower color: var(--color-contrast-lower);
.color-contrast-low color: var(--color-contrast-low);
.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-darker color: var(--color-primary-darker);
.color-primary-dark color: var(--color-primary-dark);
.color-primary color: var(--color-primary);
.color-primary-light color: var(--color-primary-light);
.color-primary-lighter color: var(--color-primary-lighter);
.color-accent-darker color: var(--color-accent-darker);
.color-accent-dark color: var(--color-accent-dark);
.color-accent color: var(--color-accent);
.color-accent-light color: var(--color-accent-light);
.color-accent-lighter color: var(--color-accent-lighter);
.color-success-darker color: var(--color-success-darker);
.color-success-dark color: var(--color-success-dark);
.color-success color: var(--color-success);
.color-success-light color: var(--color-success-light);
.color-success-lighter color: var(--color-success-lighter);
.color-warning-darker color: var(--color-warning-darker);
.color-warning-dark color: var(--color-warning-dark);
.color-warning color: var(--color-warning);
.color-warning-light color: var(--color-warning-light);
.color-warning-lighter color: var(--color-warning-lighter);
.color-error-darker color: var(--color-error-darker);
.color-error-dark color: var(--color-error-dark);
.color-error color: var(--color-error);
.color-error-light color: var(--color-error-light);
.color-error-lighter color: var(--color-error-lighter);
.color-white color: var(--color-white);
.color-black color: var(--color-black);

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

Class Description
.color-opacity-10% color opacity 10%
.color-opacity-20% color opacity 20%
.color-opacity-30% color opacity 30%
.color-opacity-40% color opacity 40%
.color-opacity-50% color opacity 50%
.color-opacity-60% color opacity 60%
.color-opacity-70% color opacity 70%
.color-opacity-80% color opacity 80%
.color-opacity-90% color opacity 90%

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 #

Cursor utility classes:

Class Description
.cursor-pointer cursor: pointer;

Display #

Display utility classes:

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

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:

Class Description
.flex display: flex;
.inline-flex display: inline-flex;
.flex-wrap flex-wrap: wrap;
.flex-column flex-direction: column;
.flex-column-reverse flex-direction: column-reverse;
.flex-row flex-direction: row;
.flex-row-reverse flex-direction: row-reverse;
.flex-center justify-content: center; align-items: center;

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

Example:

Flex Items #

Class Description
.flex-grow flex-grow: 1;
.flex-shrink-0 flex-shrink: 0;
.flex-basis-0 flex-basis: 0;

Edit .flex-grow and .flex-shrink-0 at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

Class Description
[email protected] flex-grow: 0; if viewport >= breakpoint 'sm'
[email protected] flex-grow: 1; if viewport >= breakpoint 'sm'
[email protected] flex-shrink: 0; if viewport >= breakpoint 'sm'
[email protected] flex-shrink: 1; if viewport >= breakpoint 'sm'

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

Class Description
.gap-xxxxs set gap equal to var(--space-xxxxs)
.gap-xxxs set gap equal to var(--space-xxxs)
.gap-xxs set gap equal to var(--space-xxs)
.gap-xs set gap equal to var(--space-xs)
.gap-sm set gap equal to var(--space-sm)
.gap-md set gap equal to var(--space-md)
.gap-lg set gap equal to var(--space-lg)
.gap-xl set gap equal to var(--space-xl)
.gap-xxl set gap equal to var(--space-xxl)
.gap-xxxl set gap equal to var(--space-xxxl)
.gap-xxxxl set gap equal to var(--space-xxxxl)
.gap-0 set gap equal to 0px

Example:

Float #

Float utility classes:

Class Description
.float-left float: left;
.float-right float: right;
.clearfix clear float of child elements

Height #

Height utility classes:

Class Description
.height-xxxxs height: 0.25rem; (~4px)
.height-xxxs height: 0.5rem; (~8px)
.height-xxs height: 0.75rem; (~12px)
.height-xs height: 1rem; (~16px)
.height-sm height: 1.25rem; (~24px)
.height-md height: 2rem; (~32px)
.height-lg height: 3rem; (~48px)
.height-xl height: 4rem; (~64px)
.height-xxl height: 6rem; (~96px)
.height-xxxl height: 8rem; (~128px)
.height-xxxxl height: 16rem; (~256px)
.height-10% height: 10%;
.height-20% height: 20%;
.height-25% height: 25%;
.height-30% height: 30%;
.height-33% height: calc(100% / 3);
.height-40% height: 40%;
.height-50% height: 50%;
.height-60% height: 60%;
.height-66% height: calc(100% / 1.5);
.height-70% height: 70%;
.height-75% height: 75%;
.height-80% height: 80%;
.height-90% height: 90%;
.height-100% height: 100%;
.height-100vh height: 100vh;
.height-auto height: auto;

Justify Content #

justify-content utility classes:

Class Description
.justify-start justify-content: flex-start;
.justify-end justify-content: flex-end;
.justify-center justify-content: center;
.justify-between justify-content: space-between;

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

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;
.margin-0 margin: 0;

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

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:

Class Description
.max-height-100% max-height: 100%;
.max-height-100vh max-height: 100vh;

Max-width #

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

Class Description
.max-width-xxxxs set max-width equal to 20rem (~320px)
.max-width-xxxs set max-width equal to 26rem (~416px)
.max-width-xxs set max-width equal to 32rem (~512px)
.max-width-xs set max-width equal to 38rem (~608px)
.max-width-sm set max-width equal to 48rem (~768px)
.max-width-md set max-width equal to 64rem (~1024px)
.max-width-lg set max-width equal to 80rem (~1280px)
.max-width-xl set max-width equal to 90rem (~1440px)
.max-width-xxl set max-width equal to 100rem (~1600px)
.max-width-xxxl set max-width equal to 120rem (~1920px)
.max-width-xxxxl set max-width equal to 150rem (~2400px)
.max-width-100% set max-width equal to 100%

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

Class Description
.max-width-adaptive-sm set max-width equal to 512px by default, and 768px at breakpoint sm
.max-width-adaptive-md set max-width equal to 512px by default, 768px at breakpoint sm, and 1024px at breakpoint md
.max-width-adaptive-lg set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, and 1280px at breakpoint lg
.max-width-adaptive-xl set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, 1280px at breakpoint lg, and 1440px at breakpoint xl

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

Class Description
.media-wrapper set 16:9 ratio
.media-wrapper--4:3 set 4:3 ratio
.media-wrapper--1:1 set 1:1 ratio (square)

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:

Class Description
.min-height-100% min-height: 100%;
.min-height-100vh min-height: 100vh;

Min-width #

Min-width utility classes:

Class Description
.min-width-0 min-width: 0;
.min-width-25% min-width: 25%;
.min-width-33% min-width: calc(100% / 3);
.min-width-50% min-width: 50%;
.min-width-66% min-width: calc(100% / 1.5);
.min-width-75% min-width: 75%;
.min-width-100% min-width: 100%
.min-width-100vw min-width: 100vw

Object Fit #

Object fit utility classes:

Class Description
.object-contain object-fit: contain;
.object-cover object-fit: cover;

Opacity #

Opacity utility classes:

Class Description
.opacity-0 opacity: 0;
.opacity-10% opacity: 0.1;
.opacity-20% opacity: 0.2;
.opacity-30% opacity: 0.3;
.opacity-40% opacity: 0.4;
.opacity-50% opacity: 0.5;
.opacity-60% opacity: 0.6;
.opacity-70% opacity: 0.7;
.opacity-80% opacity: 0.8;
.opacity-90% opacity: 0.9;

Order #

Order utility classes:

Class Description
.order-1 order: 1;
.order-2 order: 2;
.order-3 order: 3;

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

Overflow #

Overflow utility classes:

Class Description
.overflow-hidden overflow: hidden;
.overflow-auto overflow: auto;

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);
.padding-0 padding: 0;

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

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:

Class Description
.pointer-events-none pointer-events: none;

Position #

Position utility classes:

Class Description
.position-relative position: relative;
.position-absolute position: absolute;
.position-fixed position: fixed;
.position-sticky position: sticky;
.top-0 top: 0;
.bottom-0 bottom: 0;
.left-0 left: 0;
.right-0 right: 0;

Typography #

Typography utility classes.

Font size #

Class Description
.text-xs font-size: var(--text-xs);
.text-sm font-size: var(--text-sm);
.text-base font-size: 1em;
.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);

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 #

Class Description
.font-light font-weight: 300;
.font-normal font-weight: 400;
.font-medium font-weight: 500;
.font-semibold font-weight: 600;
.font-bold font-weight: 700;

Font family #

Class Description
.font-primary font-family: var(--font-primary);

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

Text align #

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

Example:

Text Transform #

Class Description
.text-uppercase text-transform: uppercase;
.text-capitalize text-transform: capitalize;

Letter Spacing #

Class Description
.letter-spacing-sm letter-spacing: -0.05em;
.letter-spacing-md letter-spacing: 0.05em;
.letter-spacing-lg letter-spacing: 0.1em;

Text Decoration #

Class Description
.text-line-through text-decoration: line-through;
.text-underline text-decoration: underline;
.text-decoration-none text-decoration: none;

Line Height #

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

Class Description
.line-height-xs --heading-line-height: 1; --body-line-height: 1;
.line-height-sm --heading-line-height: 1.1; --body-line-height: 1.2;
.line-height-md --heading-line-height: 1.15; --body-line-height: 1.4;
.line-height-lg --heading-line-height: 1.22; --body-line-height: 1.58;
.line-height-xl --heading-line-height: 1.3; --body-line-height: 1.72;

Vertical Spacing #

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

Class Description
.v-space-xxs --text-vspace-multiplier: 0.25;
.v-space-xs --text-vspace-multiplier: 0.5;
.v-space-sm --text-vspace-multiplier: 0.75;
.v-space-md --text-vspace-multiplier: 1.25;
.v-space-lg --text-vspace-multiplier: 1.5;
.v-space-xl --text-vspace-multiplier: 1.75;
.v-space-xxl --text-vspace-multiplier: 2;

Misc #

Class Description
.link apply same style of link elements
.text-truncate truncate text if it exceeds its parent (example)
.text-replace replace text with background image
.font-smooth -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

User Select #

User select utility classes:

Class Description
.user-select-none user-select: none;
.user-select-all user-select: all;

Vertical Alignment #

Vertical alignment utility classes:

Class Description
.align-baseline vertical-align: baseline;
.align-top vertical-align: top;
.align-middle vertical-align: middle;
.align-bottom vertical-align: bottom;

Visibility #

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

Class Description
.is-visible display an element
.is-hidden hide an element
.no-js:is-hidden hide an element if JavaScript is disabled
[email protected] hide element until breakpoint 'xs'
[email protected] hide element until breakpoint 'sm'
[email protected] hide element until breakpoint 'md'
[email protected] hide element until breakpoint 'lg'
[email protected] hide element until breakpoint 'xl'
[email protected] hide element at breakpoint 'xs'
[email protected] hide element at breakpoint 'sm'
[email protected] hide element at breakpoint 'md'
[email protected] hide element at breakpoint 'lg'
[email protected] hide element at breakpoint 'xl'

White Space #

white-space utility classes:

Class Description
.ws-nowrap white-space: nowrap;

Width #

Width utility classes:

Class Description
.width-xxxxs width: 0.25rem; (~4px)
.width-xxxs width: 0.5rem; (~8px)
.width-xxs width: 0.75rem; (~12px)
.width-xs width: 1rem; (~16px)
.width-sm width: 1.25rem; (~24px)
.width-md width: 2rem; (~32px)
.width-lg width: 3rem; (~48px)
.width-xl width: 4rem; (~64px)
.width-xxl width: 6rem; (~96px)
.width-xxxl width: 8rem; (~128px)
.width-xxxxl width: 16rem; (~256px)
.width-10% width: 10%;
.width-20% width: 20%;
.width-25% width: 25%;
.width-30% width: 30%;
.width-33% width: calc(100% / 3);
.width-40% width: 40%;
.width-50% width: 50%;
.width-60% width: 60%;
.width-66% width: calc(100% / 1.5);
.width-70% width: 70%;
.width-75% width: 75%;
.width-80% width: 80%;
.width-90% width: 90%;
.width-100% width: 100%;
.width-100vw width: 100vw;
.width-auto width: auto;

Z-Index #

z-index utility classes:

Class Description
.z-index-1 z-index: 1;
.z-index-2 z-index: 2;
.z-index-3 z-index: 3;

βœ… Project duplicated

βœ… Project created

There was an error while trying to export your project. Please try again or contact us