Reference

Oracle APEX Utility CSS Framework Reference

A practical, token-based CSS framework for Oracle APEX applications.

Use focused u- utilities to compose layout, spacing, typography, and visual states directly in markup. The framework is organized by CSS intent, and designed to complement declarative APEX features rather than replace them.

Using the framework

The framework is already included in APEX pages, including App Builder pages. Use its u-* utility classes directly in Page Designer, component attributes, templates, or authored markup. No application installation, download, or stylesheet registration is required.

Start with the built-in APEX controls and components. Use Theme Roller for application-wide theme changes, and use Template Options or the appropriate CSS Classes attribute in Page Designer for component-level adjustments. Add small, focused utility classes to the attribute that targets the rendered element you want to change. Use markup directly when authoring a region, template, or other HTML content.

<div class="u-display-flex u-align-items-center u-gap-3 u-padding-4">
  <span class="u-text-lg u-font-semibold">Account settings</span>
</div>

Where to apply utilities in APEX

A utility affects the rendered element that receives the class. In Page Designer, choose the field that maps to that element—not necessarily the nearest similarly named field.

Page or region

Use page-level classes for broad layout or page presentation. Use Region > CSS Classes for the region container, such as u-bg-surface-base or u-padding-4.

Region attributes

Use region attributes when the class must reach a specific generated element or template hook. A container utility usually belongs on the element that owns the layout.

Items and columns

Use item classes for the item wrapper or control, and report column classes when styling individual cells or values. A layout class on the report region will not change a column’s inner element.

When a class appears not to work: inspect the rendered HTML and check that the class is attached to the element whose property you want to change. Use markup or a template when Page Designer cannot target that element directly.

Accessibility

Utilities for controlling screen-reader visibility and accessible helper text.

APEX usage: Apply to the specific text or label that needs the accessibility behavior, such as an icon-only button label.

Screen Reader Only

ClassStyles
u-vh 
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;

Unset Screen Reader Styles

ClassStyles
u-no-vh 
position: static;
inline-size: auto;
block-size: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;

Background

Utilities for controlling background images, size, position, and repeat behavior.

APEX usage: Apply to the region, component wrapper, or markup element whose background should change.

Background Behavior

ClassStyles
u-bg-repeat 
background-repeat: repeat;
u-bg-repeat-x 
background-repeat: repeat-x;
u-bg-repeat-y 
background-repeat: repeat-y;
u-bg-none 
background: none;
u-bg-transparent 
background-color: transparent;
u-bg-cover 
background-size: cover;
u-bg-contain 
background-size: contain;
u-bg-top 
background-position: top;
u-bg-bottom 
background-position: bottom;
u-bg-left 
background-position: left;
u-bg-right 
background-position: right;
u-bg-top-left 
background-position: top left;
u-bg-top-right 
background-position: top right;
u-bg-bottom-left 
background-position: bottom left;
u-bg-bottom-right 
background-position: bottom right;

Background image and color properties

ClassStyles
u-bg-no-repeat 
background-repeat: no-repeat;

Background Size

ClassStyles
u-bg-auto 
background-size: auto;

Background Position (sides and corners)

ClassStyles
u-bg-center 
background-position: center;

Border

Utilities for controlling borders, radius, and corner shape.

APEX usage: Apply to the region, card, item, input, or other element whose boundary should change.

Border Width (numeric scale; tokenized with fallbacks)

ClassStyles
u-border-0 
border-width: 0;

Borders, Radius, and Shape

ClassStyles
u-border-1 
border-width: var(--u-border-w-1, 1px);
border-style: solid;
u-border-2 
border-width: var(--u-border-w-2, 0.125rem);
border-style: solid;
u-border-4 
border-width: var(--u-border-w-4, 0.25rem);
border-style: solid;
u-border-block-1 
border-block-width: var(--u-border-w-1, 1px);
border-block-style: solid;
u-border-block-2 
border-block-width: var(--u-border-w-2, 0.125rem);
border-block-style: solid;
u-border-block-4 
border-block-width: var(--u-border-w-4, 0.25rem);
border-block-style: solid;
u-border-inline-0 
border-inline-width: 0;
u-border-inline-1 
border-inline-width: var(--u-border-w-1, 1px);
border-inline-style: solid;
u-border-inline-2 
border-inline-width: var(--u-border-w-2, 0.125rem);
border-inline-style: solid;
u-border-inline-4 
border-inline-width: var(--u-border-w-4, 0.25rem);
border-inline-style: solid;
u-border-block-start-1 
border-block-start-width: var(--u-border-w-1, 1px);
border-block-start-style: solid;
u-border-block-start-2 
border-block-start-width: var(--u-border-w-2, 0.125rem);
border-block-start-style: solid;
u-border-block-start-4 
border-block-start-width: var(--u-border-w-4, 0.25rem);
border-block-start-style: solid;
u-border-block-end-0 
border-block-end-width: 0;
u-border-block-end-1 
border-block-end-width: var(--u-border-w-1, 0.0625rem);
border-block-end-style: solid;
u-border-block-end-2 
border-block-end-width: var(--u-border-w-2, 0.125rem);
border-block-end-style: solid;
u-border-block-end-4 
border-block-end-width: var(--u-border-w-4, 0.25rem);
border-block-end-style: solid;
u-border-inline-start-0 
border-inline-start-width: 0;
u-border-inline-start-1 
border-inline-start-width: var(--u-border-w-1, 1px);
border-inline-start-style: solid;
u-border-inline-start-2 
border-inline-start-width: var(--u-border-w-2, 0.125rem);
border-inline-start-style: solid;
u-border-inline-start-4 
border-inline-start-width: var(--u-border-w-4, 0.25rem);
border-inline-start-style: solid;
u-border-inline-end-0 
border-inline-end-width: 0;
u-border-inline-end-1 
border-inline-end-width: var(--u-border-w-1, 1px);
border-inline-end-style: solid;
u-border-inline-end-2 
border-inline-end-width: var(--u-border-w-2, 0.125rem);
border-inline-end-style: solid;
u-border-inline-end-4 
border-inline-end-width: var(--u-border-w-4, 0.25rem);
border-inline-end-style: solid;
u-border 
border-width: var(--u-border-w-1, 1px);
border-style: solid;
u-border-md 
border-width: var(--u-border-w-2, 0.125rem);
border-style: solid;
u-border-lg 
border-width: var(--u-border-w-4, 0.25rem);
border-style: solid;
u-border-block-start 
border-block-start-width: var(--u-border-w-1, 1px);
border-block-start-style: solid;
u-border-block-end 
border-block-end-width: var(--u-border-w-1, 1px);
border-block-end-style: solid;
u-border-inline 
border-inline-width: var(--u-border-w-1, 1px);
border-inline-style: solid;
u-border-inline-start 
border-inline-start-width: var(--u-border-w-1, 1px);
border-inline-start-style: solid;
u-border-inline-end 
border-inline-end-width: var(--u-border-w-1, 1px);
border-inline-end-style: solid;
u-border-bottom 
border-block-end-width: var(--u-border-w-1, 1px);
border-block-end-style: solid;
u-border-left 
border-inline-start-width: var(--u-border-w-1, 1px);
border-inline-start-style: solid;
u-border-right 
border-inline-end-width: var(--u-border-w-1, 1px);
border-inline-end-style: solid;
u-border-inline-thin 
border-inline-width: var(--u-border-w-1, 1px);
border-inline-style: solid;
u-border-inline-md 
border-inline-width: var(--u-border-w-2, 0.125rem);
border-inline-style: solid;
u-border-style-dashed 
border-style: dashed;
u-border-style-dotted 
border-style: dotted;
u-border-style-double 
border-style: double;
u-border-style-none 
border-style: none;
u-rounded-xs 
border-radius: var(--u-radius-xs, 0.125rem);
u-rounded-sm 
border-radius: var(--u-radius-sm, 0.25rem);
u-rounded-md 
border-radius: var(--u-radius-md, 0.5rem);
u-rounded-lg 
border-radius: var(--u-radius-lg, 0.75rem);
u-rounded-xl 
border-radius: var(--u-radius-xl, 1rem);
u-rounded-2xl 
border-radius: var(--u-radius-2xl, 1.5rem);
u-rounded-3xl 
border-radius: var(--u-radius-3xl, 2rem);
u-rounded-full 
border-radius: var(--u-radius-full, 624.9375rem);
u-corner-shape-square 
corner-shape: square;
u-corner-shape-bevel 
corner-shape: bevel;
u-corner-shape-notch 
corner-shape: notch;
u-corner-shape-scoop 
corner-shape: scoop;
u-corner-shape-squircle 
corner-shape: squircle;
u-rounded-block-end 
border-end-start-radius: var(--u-radius-md, 0.5rem);
border-end-end-radius: var(--u-radius-md, 0.5rem);
u-rounded-inline-start 
border-start-start-radius: var(--u-radius-md, 0.5rem);
border-end-start-radius: var(--u-radius-md, 0.5rem);
u-rounded-inline-end 
border-start-end-radius: var(--u-radius-md, 0.5rem);
border-end-end-radius: var(--u-radius-md, 0.5rem);
u-rounded-tr 
border-start-end-radius: var(--u-radius-md, 0.5rem);
u-rounded-bl 
border-end-start-radius: var(--u-radius-md, 0.5rem);
u-rounded-br 
border-end-end-radius: var(--u-radius-md, 0.5rem);
u-rounded-tl-0 
border-start-start-radius: 0;
u-rounded-tr-0 
border-start-end-radius: 0;
u-rounded-bl-0 
border-end-start-radius: 0;
u-rounded-br-0 
border-end-end-radius: 0;

Border Logical Axes (Combined Sides)

ClassStyles
u-border-block-0 
border-block-width: 0;

Border Logical Edges (Individual Sides)

ClassStyles
u-border-block-start-0 
border-block-start-width: 0;

Border logical axis width aliases (compatibility)

ClassStyles
u-border-block 
border-block-width: var(--u-border-w-1, 1px);
border-block-style: solid;

Border physical aliases mapped to logical (compatibility)

ClassStyles
u-border-top 
border-block-start-width: var(--u-border-w-1, 1px);
border-block-start-style: solid;

Border Width Variants by Axis (Compatibility, Semantic)

ClassStyles
u-border-block-thin 
border-block-width: var(--u-border-w-1, 1px);
border-block-style: solid;

Border Style

ClassStyles
u-border-style-solid 
border-style: solid;

Border Radius

ClassStyles
u-rounded-none 
border-radius: 0;

Corner Shape

ClassStyles
u-corner-shape-round 
corner-shape: round;

Logical Edge Rounding (Pairs of Corners on Logical Edges)

ClassStyles
u-rounded-block-start 
border-start-start-radius: var(--u-radius-md, 0.5rem);
border-start-end-radius: var(--u-radius-md, 0.5rem);

Physical corner aliases

ClassStyles
u-rounded-tl 
border-start-start-radius: var(--u-radius-md, 0.5rem);

Color

Utilities for controlling text, icon, border, surface, and state colors.

APEX usage: Apply to the rendered element whose color should change; use the inner item or column target when component markup has a more specific color rule.

Page Background

ClassStyles
u-bg-page-background 
background-color: var(--u-page-background);

Semantic UI Roles

ClassStyles
u-bg-page-background-standard 
background-color: var(--u-page-background-standard);
u-bg-page-background-canvas 
background-color: var(--u-page-background-canvas);
u-bg-surface-alt 
background-color: var(--u-surface-alt);
u-bg-surface-subtle 
background-color: var(--u-surface-subtle);
u-bg-surface-sunken 
background-color: var(--u-surface-sunken);
u-bg-surface-raised 
background-color: var(--u-surface-raised);
u-bg-surface-popup 
background-color: var(--u-surface-popup);
u-bg-surface-dialog 
background-color: var(--u-surface-dialog);
u-bg-surface-overlay 
background-color: var(--u-surface-overlay);
u-bg-surface-footer 
background-color: var(--u-surface-footer);
u-bg-surface-sidebar 
background-color: var(--u-surface-sidebar);
u-bg-surface-canvas 
background-color: var(--u-surface-canvas);
u-bg-surface-scaffold 
background-color: var(--u-surface-scaffold);
u-bg-surface-card 
background-color: var(--u-surface-card);
u-bg-surface-region 
background-color: var(--u-surface-region);
u-bg-surface-field 
background-color: var(--u-surface-field);
u-bg-surface-editor 
background-color: var(--u-surface-editor);
u-bg-surface-toolbar-local 
background-color: var(--u-surface-toolbar-local);
u-text-secondary 
color: var(--u-text-secondary);
u-text-muted 
color: var(--u-text-muted);
u-text-disabled 
color: var(--u-text-disabled);
u-text-placeholder 
color: var(--u-text-placeholder);
u-text-body 
color: var(--u-text-body);
u-text-caption 
color: var(--u-text-caption);
u-text-label 
color: var(--u-text-label);
u-text-link-hover 
color: var(--u-text-link-hover);
u-text-link-active 
color: var(--u-text-link-active);
u-text-inverse-secondary 
color: var(--u-text-inverse-secondary);
u-text-inverse-muted 
color: var(--u-text-inverse-muted);
u-text-inverse-disabled 
color: var(--u-text-inverse-disabled);
u-text-inverse-placeholder 
color: var(--u-text-inverse-placeholder);
u-text-inverse-link 
color: var(--u-text-inverse-link);
u-text-inverse-link-hover 
color: var(--u-text-inverse-link-hover);
u-text-inverse-link-active 
color: var(--u-text-inverse-link-active);
u-icon-secondary 
color: var(--u-icon-secondary);
u-icon-muted 
color: var(--u-icon-muted);
u-icon-disabled 
color: var(--u-icon-disabled);
u-icon-link 
color: var(--u-icon-link);
u-icon-inverse-secondary 
color: var(--u-icon-inverse-secondary);
u-icon-inverse-muted 
color: var(--u-icon-inverse-muted);
u-icon-inverse-disabled 
color: var(--u-icon-inverse-disabled);
u-icon-inverse-link 
color: var(--u-icon-inverse-link);
u-border-subtle 
border-color: var(--u-border-subtle);
u-border-strong 
border-color: var(--u-border-strong);
u-border-disabled 
border-color: var(--u-border-disabled);
u-border-focus 
border-color: var(--u-border-focus);
u-border-selected 
border-color: var(--u-border-selected);
u-border-error 
border-color: var(--u-border-error);
u-border-card 
border-color: var(--u-border-card);
u-border-region 
border-color: var(--u-border-region);
u-border-inverse-subtle 
border-color: var(--u-border-inverse-subtle);
u-border-inverse-strong 
border-color: var(--u-border-inverse-strong);
u-divider-subtle 
border-color: var(--u-divider-subtle);
u-divider-strong 
border-color: var(--u-divider-strong);
u-divider-inverse-default 
border-color: var(--u-divider-inverse-default);
u-divider-inverse-subtle 
border-color: var(--u-divider-inverse-subtle);
u-divider-inverse-strong 
border-color: var(--u-divider-inverse-strong);
u-overlay-active 
background-color: var(--u-overlay-active);
u-overlay-selected 
background-color: var(--u-overlay-selected);
u-overlay-scrim 
background-color: var(--u-overlay-scrim);
u-border-state-success 
border-color: var(--u-state-success-border);
u-icon-state-success 
color: var(--u-state-success-icon);
u-bg-state-success-low 
background-color: var(--u-state-success-background-low);
u-bg-state-success-subtle 
background-color: var(--u-state-success-background-subtle);
u-bg-state-success-strong 
background-color: var(--u-state-success-background-strong);
u-border-state-info 
border-color: var(--u-state-info-border);
u-icon-state-info 
color: var(--u-state-info-icon);
u-bg-state-info-low 
background-color: var(--u-state-info-background-low);
u-bg-state-info-subtle 
background-color: var(--u-state-info-background-subtle);
u-bg-state-info-strong 
background-color: var(--u-state-info-background-strong);
u-border-state-warning 
border-color: var(--u-state-warning-border);
u-icon-state-warning 
color: var(--u-state-warning-icon);
u-bg-state-warning-low 
background-color: var(--u-state-warning-background-low);
u-bg-state-warning-subtle 
background-color: var(--u-state-warning-background-subtle);
u-bg-state-warning-strong 
background-color: var(--u-state-warning-background-strong);
u-border-state-danger 
border-color: var(--u-state-danger-border);
u-icon-state-danger 
color: var(--u-state-danger-icon);
u-bg-state-danger-low 
background-color: var(--u-state-danger-background-low);
u-bg-state-danger-subtle 
background-color: var(--u-state-danger-background-subtle);
u-bg-state-danger-strong 
background-color: var(--u-state-danger-background-strong);
u-border-state-neutral 
border-color: var(--u-state-neutral-border);
u-icon-state-neutral 
color: var(--u-state-neutral-icon);
u-bg-state-neutral-low 
background-color: var(--u-state-neutral-background-low);
u-bg-state-neutral-subtle 
background-color: var(--u-state-neutral-background-subtle);
u-bg-state-neutral-strong 
background-color: var(--u-state-neutral-background-strong);
u-on-surface-inverse 
color: var(--u-text-inverse-primary);
u-on-state-success 
color: var(--u-state-success-text);
u-on-state-info 
color: var(--u-state-info-text);
u-on-state-warning 
color: var(--u-state-warning-text);
u-on-state-danger 
color: var(--u-state-danger-text);
u-on-state-neutral 
color: var(--u-state-neutral-text);

Surface Background

ClassStyles
u-bg-surface-base 
background-color: var(--u-surface-base);

Surface Roles

ClassStyles
u-bg-surface-header 
background-color: var(--u-surface-header);

Toolbars

ClassStyles
u-bg-surface-toolbar-global 
background-color: var(--u-surface-toolbar-global);

Text Base

ClassStyles
u-text-primary 
color: var(--u-text-primary);

Text Roles

ClassStyles
u-text-heading 
color: var(--u-text-heading);

Text Link

ClassStyles
u-text-link 
color: var(--u-text-link);

Text Inverse

ClassStyles
u-text-inverse-primary 
color: var(--u-text-inverse-primary);

Icon Base

ClassStyles
u-icon-primary 
color: var(--u-icon-primary);

Icon Inverse

ClassStyles
u-icon-inverse-primary 
color: var(--u-icon-inverse-primary);

Border Base

ClassStyles
u-border-default 
border-color: var(--u-border-default);

Border Roles

ClassStyles
u-border-input 
border-color: var(--u-border-input);

Border Inverse

ClassStyles
u-border-inverse-default 
border-color: var(--u-border-inverse-default);

Divider

ClassStyles
u-divider-default 
border-color: var(--u-divider-default);

Overlay

ClassStyles
u-overlay-hover 
background-color: var(--u-overlay-hover);

State: Success

ClassStyles
u-text-state-success 
color: var(--u-state-success-text);

State: Info

ClassStyles
u-text-state-info 
color: var(--u-state-info-text);

State: Warning

ClassStyles
u-text-state-warning 
color: var(--u-state-warning-text);

State: Danger

ClassStyles
u-text-state-danger 
color: var(--u-state-danger-text);

State: Neutral

ClassStyles
u-text-state-neutral 
color: var(--u-state-neutral-text);

Optional “On” Helpers

ClassStyles
u-on-surface 
color: var(--u-text-primary);

Display

Utilities for controlling how an element participates in layout and document flow.

APEX usage: Apply to the element that should be shown, hidden, or used as the layout container.

Display Properties

ClassStyles
u-display-none 
display: none !important;

Display Values

ClassStyles
u-display-block 
display: block !important;
u-display-inline 
display: inline !important;
u-display-inline-block 
display: inline-block !important;
u-display-flex 
display: flex !important;
u-display-inline-flex 
display: inline-flex !important;
u-display-grid 
display: grid !important;
u-display-inline-grid 
display: inline-grid !important;

Effects

Utilities for controlling opacity, shadows, and visual filter effects.

APEX usage: Apply to the element or component surface that should receive the visual effect.

Shadow Effects

ClassStyles
u-shadow-0 
box-shadow: none;

Shadows, Opacity, and Blur

ClassStyles
u-shadow-1 
box-shadow: var(--u-shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.1));
u-shadow-2 
box-shadow: var(--u-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.1));
u-shadow-3 
box-shadow: var(--u-shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
u-shadow-4 
box-shadow: var(--u-shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.12));
u-shadow-5 
box-shadow: var(--u-shadow-xl, 0 12px 24px rgba(0, 0, 0, 0.14));
u-opacity-5 
opacity: 0.05;
u-opacity-10 
opacity: 0.1;
u-opacity-15 
opacity: 0.15;
u-opacity-20 
opacity: 0.2;
u-opacity-25 
opacity: 0.25;
u-opacity-30 
opacity: 0.3;
u-opacity-35 
opacity: 0.35;
u-opacity-40 
opacity: 0.4;
u-opacity-45 
opacity: 0.45;
u-opacity-50 
opacity: 0.5;
u-opacity-55 
opacity: 0.55;
u-opacity-60 
opacity: 0.6;
u-opacity-65 
opacity: 0.65;
u-opacity-70 
opacity: 0.7;
u-opacity-75 
opacity: 0.75;
u-opacity-80 
opacity: 0.8;
u-opacity-85 
opacity: 0.85;
u-opacity-90 
opacity: 0.9;
u-opacity-95 
opacity: 0.95;
u-opacity-100 
opacity: 1;
u-filter-blur 
filter: blur(var(--u-blur-md, 0.5rem));
u-filter-blur-lg 
filter: blur(var(--u-blur-lg, 1rem));

Opacity (complete scale)

ClassStyles
u-opacity-0 
opacity: 0;

Filters

ClassStyles
u-filter-none 
filter: none;

Blur (tokenized with rem fallbacks)

ClassStyles
u-filter-blur-sm 
filter: blur(var(--u-blur-sm, 0.25rem));

Flex

Utilities for controlling flex containers and flex items.

APEX usage: Apply container utilities to the parent that owns the layout; apply item utilities to an individual child within that flex container.

Flex Direction

ClassStyles
u-flex-row 
flex-direction: row;

Flex Layout Controls

ClassStyles
u-flex-row-reverse 
flex-direction: row-reverse;
u-flex-col 
flex-direction: column;
u-flex-col-reverse 
flex-direction: column-reverse;
u-flex-nowrap 
flex-wrap: nowrap;
u-flex-wrap-reverse 
flex-wrap: wrap-reverse;
u-align-items-end 
align-items: flex-end;
u-align-items-center 
align-items: center;
u-align-items-baseline 
align-items: baseline;
u-align-items-stretch 
align-items: stretch;
u-align-content-end 
align-content: flex-end;
u-align-content-center 
align-content: center;
u-align-content-between 
align-content: space-between;
u-align-content-around 
align-content: space-around;
u-align-content-evenly 
align-content: space-evenly;
u-align-self-start 
align-self: flex-start;
u-align-self-end 
align-self: flex-end;
u-align-self-center 
align-self: center;
u-align-self-stretch 
align-self: stretch;
u-align-self-baseline 
align-self: baseline;
u-justify-end 
justify-content: flex-end;
u-justify-center 
justify-content: center;
u-justify-between 
justify-content: space-between;
u-justify-around 
justify-content: space-around;
u-justify-evenly 
justify-content: space-evenly;
u-flex-auto 
flex: 1 1 auto;
u-flex-initial 
flex: 0 1 auto;
u-flex-none 
flex: none;
u-grow-0 
flex-grow: 0;
u-shrink 
flex-shrink: 1;
u-shrink-0 
flex-shrink: 0;
u-flex-basis-0 
flex-basis: 0;
u-flex-basis-1_2 
flex-basis: 50%;
u-flex-basis-1_3 
flex-basis: 33.333%;
u-flex-basis-1_4 
flex-basis: 25%;
u-flex-basis-full 
flex-basis: 100%;
u-order-1 
order: 1;
u-order-2 
order: 2;
u-order-3 
order: 3;
u-order-4 
order: 4;
u-order-5 
order: 5;

Flex Wrap

ClassStyles
u-flex-wrap 
flex-wrap: wrap;

Flex Align Items

ClassStyles
u-align-items-start 
align-items: flex-start;

Flex Align Content

ClassStyles
u-align-content-start 
align-content: flex-start;

Align Self

ClassStyles
u-align-self-auto 
align-self: auto;

Justify Content

ClassStyles
u-justify-start 
justify-content: flex-start;

Flex (shorthand)

ClassStyles
u-flex-1 
flex: 1 1 0%;

Flex Grow/Shrink

ClassStyles
u-grow 
flex-grow: 1;

Flex Basis

ClassStyles
u-flex-basis-auto 
flex-basis: auto;

Gap

Utilities for controlling space between flex and grid children.

APEX usage: Apply to the flex or grid container whose direct children should be spaced.

Gap (with axis aliases)

ClassStyles
u-gap-0 
gap: 0;

Spacing Scale

ClassStyles
u-column-gap-0 
column-gap: 0;
u-row-gap-0 
row-gap: 0;
u-gap-px 
gap: var(--u-space-px, 1px);
u-column-gap-px 
column-gap: var(--u-space-px, 1px);
u-row-gap-px 
row-gap: var(--u-space-px, 1px);
u-gap-0_5 
gap: var(--u-space-0_5, 0.125rem);
u-column-gap-0_5 
column-gap: var(--u-space-0_5, 0.125rem);
u-row-gap-0_5 
row-gap: var(--u-space-0_5, 0.125rem);
u-gap-1 
gap: var(--u-space-1, 0.25rem);
u-column-gap-1 
column-gap: var(--u-space-1, 0.25rem);
u-row-gap-1 
row-gap: var(--u-space-1, 0.25rem);
u-gap-1_5 
gap: var(--u-space-1_5, 0.375rem);
u-column-gap-1_5 
column-gap: var(--u-space-1_5, 0.375rem);
u-row-gap-1_5 
row-gap: var(--u-space-1_5, 0.375rem);
u-gap-2 
gap: var(--u-space-2, 0.5rem);
u-column-gap-2 
column-gap: var(--u-space-2, 0.5rem);
u-row-gap-2 
row-gap: var(--u-space-2, 0.5rem);
u-gap-2_5 
gap: var(--u-space-2_5, 0.625rem);
u-column-gap-2_5 
column-gap: var(--u-space-2_5, 0.625rem);
u-row-gap-2_5 
row-gap: var(--u-space-2_5, 0.625rem);
u-gap-3 
gap: var(--u-space-3, 0.75rem);
u-column-gap-3 
column-gap: var(--u-space-3, 0.75rem);
u-row-gap-3 
row-gap: var(--u-space-3, 0.75rem);
u-gap-3_5 
gap: var(--u-space-3_5, 0.875rem);
u-column-gap-3_5 
column-gap: var(--u-space-3_5, 0.875rem);
u-row-gap-3_5 
row-gap: var(--u-space-3_5, 0.875rem);
u-gap-4 
gap: var(--u-space-4, 1rem);
u-column-gap-4 
column-gap: var(--u-space-4, 1rem);
u-row-gap-4 
row-gap: var(--u-space-4, 1rem);
u-gap-5 
gap: var(--u-space-5, 1.25rem);
u-column-gap-5 
column-gap: var(--u-space-5, 1.25rem);
u-row-gap-5 
row-gap: var(--u-space-5, 1.25rem);
u-gap-6 
gap: var(--u-space-6, 1.5rem);
u-column-gap-6 
column-gap: var(--u-space-6, 1.5rem);
u-row-gap-6 
row-gap: var(--u-space-6, 1.5rem);
u-gap-7 
gap: var(--u-space-7, 1.75rem);
u-column-gap-7 
column-gap: var(--u-space-7, 1.75rem);
u-row-gap-7 
row-gap: var(--u-space-7, 1.75rem);
u-gap-8 
gap: var(--u-space-8, 2rem);
u-column-gap-8 
column-gap: var(--u-space-8, 2rem);
u-row-gap-8 
row-gap: var(--u-space-8, 2rem);
u-gap-9 
gap: var(--u-space-9, 2.25rem);
u-column-gap-9 
column-gap: var(--u-space-9, 2.25rem);
u-row-gap-9 
row-gap: var(--u-space-9, 2.25rem);
u-gap-10 
gap: var(--u-space-10, 2.5rem);
u-column-gap-10 
column-gap: var(--u-space-10, 2.5rem);
u-row-gap-10 
row-gap: var(--u-space-10, 2.5rem);
u-gap-11 
gap: var(--u-space-11, 2.75rem);
u-column-gap-11 
column-gap: var(--u-space-11, 2.75rem);
u-row-gap-11 
row-gap: var(--u-space-11, 2.75rem);
u-gap-12 
gap: var(--u-space-12, 3rem);
u-column-gap-12 
column-gap: var(--u-space-12, 3rem);
u-row-gap-12 
row-gap: var(--u-space-12, 3rem);
u-gap-14 
gap: var(--u-space-14, 3.5rem);
u-column-gap-14 
column-gap: var(--u-space-14, 3.5rem);
u-row-gap-14 
row-gap: var(--u-space-14, 3.5rem);
u-gap-16 
gap: var(--u-space-16, 4rem);
u-column-gap-16 
column-gap: var(--u-space-16, 4rem);
u-row-gap-16 
row-gap: var(--u-space-16, 4rem);
u-gap-20 
gap: var(--u-space-20, 5rem);
u-column-gap-20 
column-gap: var(--u-space-20, 5rem);
u-row-gap-20 
row-gap: var(--u-space-20, 5rem);
u-gap-24 
gap: var(--u-space-24, 6rem);
u-column-gap-24 
column-gap: var(--u-space-24, 6rem);
u-row-gap-24 
row-gap: var(--u-space-24, 6rem);
u-gap-28 
gap: var(--u-space-28, 7rem);
u-column-gap-28 
column-gap: var(--u-space-28, 7rem);
u-row-gap-28 
row-gap: var(--u-space-28, 7rem);
u-gap-32 
gap: var(--u-space-32, 8rem);
u-column-gap-32 
column-gap: var(--u-space-32, 8rem);
u-row-gap-32 
row-gap: var(--u-space-32, 8rem);
u-gap-36 
gap: var(--u-space-36, 9rem);
u-column-gap-36 
column-gap: var(--u-space-36, 9rem);
u-row-gap-36 
row-gap: var(--u-space-36, 9rem);
u-gap-40 
gap: var(--u-space-40, 10rem);
u-column-gap-40 
column-gap: var(--u-space-40, 10rem);
u-row-gap-40 
row-gap: var(--u-space-40, 10rem);
u-gap-48 
gap: var(--u-space-48, 12rem);
u-column-gap-48 
column-gap: var(--u-space-48, 12rem);
u-row-gap-48 
row-gap: var(--u-space-48, 12rem);
u-gap-56 
gap: var(--u-space-56, 14rem);
u-column-gap-56 
column-gap: var(--u-space-56, 14rem);
u-row-gap-56 
row-gap: var(--u-space-56, 14rem);
u-gap-64 
gap: var(--u-space-64, 16rem);
u-column-gap-64 
column-gap: var(--u-space-64, 16rem);
u-row-gap-64 
row-gap: var(--u-space-64, 16rem);
u-gap-72 
gap: var(--u-space-72, 18rem);
u-column-gap-72 
column-gap: var(--u-space-72, 18rem);
u-row-gap-72 
row-gap: var(--u-space-72, 18rem);
u-gap-80 
gap: var(--u-space-80, 20rem);
u-column-gap-80 
column-gap: var(--u-space-80, 20rem);
u-row-gap-80 
row-gap: var(--u-space-80, 20rem);
u-gap-96 
gap: var(--u-space-96, 24rem);
u-column-gap-96 
column-gap: var(--u-space-96, 24rem);
u-row-gap-96 
row-gap: var(--u-space-96, 24rem);

Grid

Utilities for controlling grid containers, tracks, placement, and alignment.

APEX usage: Apply container utilities to the grid parent and placement or span utilities to the individual grid child.

Grid Auto Flow

ClassStyles
u-grid-flow-row 
grid-auto-flow: row;

Grid Placement and Alignment

ClassStyles
u-grid-flow-col 
grid-auto-flow: column;
u-grid-flow-dense 
grid-auto-flow: dense;
u-grid-flow-row-dense 
grid-auto-flow: row dense;
u-grid-flow-col-dense 
grid-auto-flow: column dense;
u-grid-auto-rows 
grid-auto-rows: 1fr;
u-grid-cols-2 
grid-template-columns: repeat(2, minmax(0, 1fr));
u-grid-cols-3 
grid-template-columns: repeat(3, minmax(0, 1fr));
u-grid-cols-4 
grid-template-columns: repeat(4, minmax(0, 1fr));
u-grid-cols-5 
grid-template-columns: repeat(5, minmax(0, 1fr));
u-grid-cols-6 
grid-template-columns: repeat(6, minmax(0, 1fr));
u-grid-cols-7 
grid-template-columns: repeat(7, minmax(0, 1fr));
u-grid-cols-8 
grid-template-columns: repeat(8, minmax(0, 1fr));
u-grid-cols-9 
grid-template-columns: repeat(9, minmax(0, 1fr));
u-grid-cols-10 
grid-template-columns: repeat(10, minmax(0, 1fr));
u-grid-cols-11 
grid-template-columns: repeat(11, minmax(0, 1fr));
u-grid-cols-12 
grid-template-columns: repeat(12, minmax(0, 1fr));
u-grid-rows-2 
grid-template-rows: repeat(2, minmax(0, 1fr));
u-grid-rows-3 
grid-template-rows: repeat(3, minmax(0, 1fr));
u-grid-rows-4 
grid-template-rows: repeat(4, minmax(0, 1fr));
u-grid-rows-5 
grid-template-rows: repeat(5, minmax(0, 1fr));
u-grid-rows-6 
grid-template-rows: repeat(6, minmax(0, 1fr));
u-grid-rows-7 
grid-template-rows: repeat(7, minmax(0, 1fr));
u-grid-rows-8 
grid-template-rows: repeat(8, minmax(0, 1fr));
u-grid-rows-9 
grid-template-rows: repeat(9, minmax(0, 1fr));
u-grid-rows-10 
grid-template-rows: repeat(10, minmax(0, 1fr));
u-grid-rows-11 
grid-template-rows: repeat(11, minmax(0, 1fr));
u-grid-rows-12 
grid-template-rows: repeat(12, minmax(0, 1fr));
u-grid-rows-auto 
grid-template-rows: auto;
u-grid-cols-auto-fill 
grid-template-columns: repeat(auto-fill, minmax(var(--u-size-min, 10rem), 1fr));
u-col-span-2 
grid-column: span 2 / span 2;
u-col-span-3 
grid-column: span 3 / span 3;
u-col-span-4 
grid-column: span 4 / span 4;
u-col-span-5 
grid-column: span 5 / span 5;
u-col-span-6 
grid-column: span 6 / span 6;
u-col-span-7 
grid-column: span 7 / span 7;
u-col-span-8 
grid-column: span 8 / span 8;
u-col-span-9 
grid-column: span 9 / span 9;
u-col-span-10 
grid-column: span 10 / span 10;
u-col-span-11 
grid-column: span 11 / span 11;
u-col-span-12 
grid-column: span 12 / span 12;
u-col-span-full 
grid-column: 1 / -1;
u-row-span-2 
grid-row: span 2 / span 2;
u-row-span-3 
grid-row: span 3 / span 3;
u-row-span-4 
grid-row: span 4 / span 4;
u-row-span-5 
grid-row: span 5 / span 5;
u-row-span-6 
grid-row: span 6 / span 6;
u-row-span-7 
grid-row: span 7 / span 7;
u-row-span-8 
grid-row: span 8 / span 8;
u-row-span-9 
grid-row: span 9 / span 9;
u-row-span-10 
grid-row: span 10 / span 10;
u-row-span-11 
grid-row: span 11 / span 11;
u-row-span-12 
grid-row: span 12 / span 12;
u-row-span-full 
grid-row: 1 / -1;
u-col-start-2 
grid-column-start: 2;
u-col-start-3 
grid-column-start: 3;
u-col-start-4 
grid-column-start: 4;
u-col-start-5 
grid-column-start: 5;
u-col-start-6 
grid-column-start: 6;
u-col-start-7 
grid-column-start: 7;
u-col-start-8 
grid-column-start: 8;
u-col-start-9 
grid-column-start: 9;
u-col-start-10 
grid-column-start: 10;
u-col-start-11 
grid-column-start: 11;
u-col-start-12 
grid-column-start: 12;
u-col-start-13 
grid-column-start: 13;
u-col-start-auto 
grid-column-start: auto;
u-col-end-1 
grid-column-end: 1;
u-col-end-2 
grid-column-end: 2;
u-col-end-3 
grid-column-end: 3;
u-col-end-4 
grid-column-end: 4;
u-col-end-5 
grid-column-end: 5;
u-col-end-6 
grid-column-end: 6;
u-col-end-7 
grid-column-end: 7;
u-col-end-8 
grid-column-end: 8;
u-col-end-9 
grid-column-end: 9;
u-col-end-10 
grid-column-end: 10;
u-col-end-11 
grid-column-end: 11;
u-col-end-12 
grid-column-end: 12;
u-col-end-13 
grid-column-end: 13;
u-col-end-auto 
grid-column-end: auto;
u-row-start-2 
grid-row-start: 2;
u-row-start-3 
grid-row-start: 3;
u-row-start-4 
grid-row-start: 4;
u-row-start-5 
grid-row-start: 5;
u-row-start-6 
grid-row-start: 6;
u-row-start-7 
grid-row-start: 7;
u-row-start-8 
grid-row-start: 8;
u-row-start-9 
grid-row-start: 9;
u-row-start-10 
grid-row-start: 10;
u-row-start-11 
grid-row-start: 11;
u-row-start-12 
grid-row-start: 12;
u-row-start-13 
grid-row-start: 13;
u-row-start-auto 
grid-row-start: auto;
u-row-end-1 
grid-row-end: 1;
u-row-end-2 
grid-row-end: 2;
u-row-end-3 
grid-row-end: 3;
u-row-end-4 
grid-row-end: 4;
u-row-end-5 
grid-row-end: 5;
u-row-end-6 
grid-row-end: 6;
u-row-end-7 
grid-row-end: 7;
u-row-end-8 
grid-row-end: 8;
u-row-end-9 
grid-row-end: 9;
u-row-end-10 
grid-row-end: 10;
u-row-end-11 
grid-row-end: 11;
u-row-end-12 
grid-row-end: 12;
u-row-end-13 
grid-row-end: 13;
u-row-end-auto 
grid-row-end: auto;
u-place-content-end 
place-content: end;
u-place-content-center 
place-content: center;
u-place-content-stretch 
place-content: stretch;
u-place-content-between 
place-content: space-between;
u-place-content-around 
place-content: space-around;
u-place-content-evenly 
place-content: space-evenly;
u-place-items-start 
place-items: start;
u-place-items-end 
place-items: end;
u-place-items-center 
place-items: center;
u-place-items-stretch 
place-items: stretch;
u-place-items-baseline 
place-items: baseline;
u-place-self-auto 
place-self: auto;
u-place-self-start 
place-self: start;
u-place-self-end 
place-self: end;
u-place-self-center 
place-self: center;
u-place-self-stretch 
place-self: stretch;
u-place-self-baseline 
place-self: baseline;

Grid Auto 1fr

ClassStyles
u-grid-auto-cols 
grid-auto-columns: 1fr;

Grid Template Columns (1..12)

ClassStyles
u-grid-cols-1 
grid-template-columns: repeat(1, minmax(0, 1fr));

Grid Template Rows (1..12)

ClassStyles
u-grid-rows-1 
grid-template-rows: repeat(1, minmax(0, 1fr));

Grid Auto-fit/Auto-fill Columns (min size tokenized with fallback)

ClassStyles
u-grid-cols-auto-fit 
grid-template-columns: repeat(auto-fit, minmax(var(--u-size-min, 10rem), 1fr));

Grid Column Spans

ClassStyles
u-col-span-1 
grid-column: span 1 / span 1;

Grid Row Spans

ClassStyles
u-row-span-1 
grid-row: span 1 / span 1;

Grid Column Start/End Lines (1..13)

ClassStyles
u-col-start-1 
grid-column-start: 1;

Grid Row Start/End Lines (1..13)

ClassStyles
u-row-start-1 
grid-row-start: 1;

Place content/items/self: grid-friendly shorthands

ClassStyles
u-place-content-start 
place-content: start;

Interactivity

Utilities for controlling interaction behavior such as cursor, resize, selection, and scrolling.

APEX usage: Apply to the control or rendered element whose interaction behavior should change.

Cursor Interactivity

ClassStyles
u-cursor-pointer 
cursor: pointer;

Additional Cursor Types

ClassStyles
u-cursor-default 
cursor: default;
u-cursor-none 
cursor: none;

Interaction Controls

ClassStyles
u-cursor-move 
cursor: move;
u-pointer-events-auto 
pointer-events: auto;
u-select-text 
user-select: text;
u-select-none 
user-select: none;
u-appearance-auto 
appearance: auto;
u-resize-x 
resize: horizontal;
u-resize-y 
resize: vertical;
u-resize-none 
resize: none;
u-touch-action-none 
touch-action: none;

Pointer Events

ClassStyles
u-pointer-events-none 
pointer-events: none;

User Select

ClassStyles
u-select-all 
user-select: all;

Appearance

ClassStyles
u-appearance-none 
appearance: none;

Resize

ClassStyles
u-resize 
resize: both;

Layout

Utilities for controlling box model, alignment, and general layout behavior.

APEX usage: Apply to the element whose layout or alignment should change, checking whether the property belongs on its parent or child.

For Table Rows and Columns

ClassStyles
u-visibility-collapse 
visibility: collapse;

Vertical Alignment

ClassStyles
u-vertical-align-top 
vertical-align: top;
u-vertical-align-middle 
vertical-align: middle;
u-vertical-align-bottom 
vertical-align: bottom;

List

Utilities for controlling list markers, style, and placement.

APEX usage: Apply to the list element or its list items, depending on whether the utility changes the list or individual entries.

List Style Type

ClassStyles
u-list-none 
list-style-type: none;

List Markers and Position

ClassStyles
u-list-disc 
list-style-type: disc;
u-list-circle 
list-style-type: circle;
u-list-square 
list-style-type: square;
u-list-decimal 
list-style-type: decimal;
u-list-decimal-leading-zero 
list-style-type: decimal-leading-zero;
u-list-lower-alpha 
list-style-type: lower-alpha;
u-list-upper-alpha 
list-style-type: upper-alpha;
u-list-lower-roman 
list-style-type: lower-roman;
u-list-upper-roman 
list-style-type: upper-roman;
u-list-inside 
list-style-position: inside;
u-list-outside 
list-style-position: outside;

List Image (reset)

ClassStyles
u-list-image-none 
list-style-image: none;

List Reset: removes default bullets and indentation

ClassStyles
u-list-reset 
list-style: none;
padding-inline-start: 0;
margin: 0;

Margin

Utilities for controlling the space outside an element.

APEX usage: Apply to the element that needs separation from neighboring content; use a container or child target intentionally.

Margin

ClassStyles
u-margin-0 
margin: 0;

Margin Scale and Auto Alignment

ClassStyles
u-margin-inline-auto 
margin-inline: auto;
u-margin-block-auto 
margin-block: auto;
u-margin-inline-0 
margin-inline: 0;
u-margin-block-0 
margin-block: 0;
u-margin-inline-start-auto 
margin-inline-start: auto;
u-margin-inline-start-0 
margin-inline-start: 0;
u-margin-inline-end-auto 
margin-inline-end: auto;
u-margin-inline-end-0 
margin-inline-end: 0;
u-margin-block-start-auto 
margin-block-start: auto;
u-margin-block-start-0 
margin-block-start: 0;
u-margin-block-end-auto 
margin-block-end: auto;
u-margin-block-end-0 
margin-block-end: 0;
u-margin-0_5 
margin: var(--u-space-0_5, 0.125rem);
u-margin-inline-0_5 
margin-inline: var(--u-space-0_5, 0.125rem);
u-margin-block-0_5 
margin-block: var(--u-space-0_5, 0.125rem);
u-margin-inline-start-0_5 
margin-inline-start: var(--u-space-0_5, 0.125rem);
u-margin-inline-end-0_5 
margin-inline-end: var(--u-space-0_5, 0.125rem);
u-margin-block-start-0_5 
margin-block-start: var(--u-space-0_5, 0.125rem);
u-margin-block-end-0_5 
margin-block-end: var(--u-space-0_5, 0.125rem);
u-margin-1 
margin: var(--u-space-1, 0.25rem);
u-margin-inline-1 
margin-inline: var(--u-space-1, 0.25rem);
u-margin-block-1 
margin-block: var(--u-space-1, 0.25rem);
u-margin-inline-start-1 
margin-inline-start: var(--u-space-1, 0.25rem);
u-margin-inline-end-1 
margin-inline-end: var(--u-space-1, 0.25rem);
u-margin-block-start-1 
margin-block-start: var(--u-space-1, 0.25rem);
u-margin-block-end-1 
margin-block-end: var(--u-space-1, 0.25rem);
u-margin-1_5 
margin: var(--u-space-1_5, 0.375rem);
u-margin-inline-1_5 
margin-inline: var(--u-space-1_5, 0.375rem);
u-margin-block-1_5 
margin-block: var(--u-space-1_5, 0.375rem);
u-margin-inline-start-1_5 
margin-inline-start: var(--u-space-1_5, 0.375rem);
u-margin-inline-end-1_5 
margin-inline-end: var(--u-space-1_5, 0.375rem);
u-margin-block-start-1_5 
margin-block-start: var(--u-space-1_5, 0.375rem);
u-margin-block-end-1_5 
margin-block-end: var(--u-space-1_5, 0.375rem);
u-margin-2 
margin: var(--u-space-2, 0.5rem);
u-margin-inline-2 
margin-inline: var(--u-space-2, 0.5rem);
u-margin-block-2 
margin-block: var(--u-space-2, 0.5rem);
u-margin-inline-start-2 
margin-inline-start: var(--u-space-2, 0.5rem);
u-margin-inline-end-2 
margin-inline-end: var(--u-space-2, 0.5rem);
u-margin-block-start-2 
margin-block-start: var(--u-space-2, 0.5rem);
u-margin-block-end-2 
margin-block-end: var(--u-space-2, 0.5rem);
u-margin-2_5 
margin: var(--u-space-2_5, 0.625rem);
u-margin-inline-2_5 
margin-inline: var(--u-space-2_5, 0.625rem);
u-margin-block-2_5 
margin-block: var(--u-space-2_5, 0.625rem);
u-margin-inline-start-2_5 
margin-inline-start: var(--u-space-2_5, 0.625rem);
u-margin-inline-end-2_5 
margin-inline-end: var(--u-space-2_5, 0.625rem);
u-margin-block-start-2_5 
margin-block-start: var(--u-space-2_5, 0.625rem);
u-margin-block-end-2_5 
margin-block-end: var(--u-space-2_5, 0.625rem);
u-margin-3 
margin: var(--u-space-3, 0.75rem);
u-margin-inline-3 
margin-inline: var(--u-space-3, 0.75rem);
u-margin-block-3 
margin-block: var(--u-space-3, 0.75rem);
u-margin-inline-start-3 
margin-inline-start: var(--u-space-3, 0.75rem);
u-margin-inline-end-3 
margin-inline-end: var(--u-space-3, 0.75rem);
u-margin-block-start-3 
margin-block-start: var(--u-space-3, 0.75rem);
u-margin-block-end-3 
margin-block-end: var(--u-space-3, 0.75rem);
u-margin-3_5 
margin: var(--u-space-3_5, 0.875rem);
u-margin-inline-3_5 
margin-inline: var(--u-space-3_5, 0.875rem);
u-margin-block-3_5 
margin-block: var(--u-space-3_5, 0.875rem);
u-margin-inline-start-3_5 
margin-inline-start: var(--u-space-3_5, 0.875rem);
u-margin-inline-end-3_5 
margin-inline-end: var(--u-space-3_5, 0.875rem);
u-margin-block-start-3_5 
margin-block-start: var(--u-space-3_5, 0.875rem);
u-margin-block-end-3_5 
margin-block-end: var(--u-space-3_5, 0.875rem);
u-margin-4 
margin: var(--u-space-4, 1rem);
u-margin-inline-4 
margin-inline: var(--u-space-4, 1rem);
u-margin-block-4 
margin-block: var(--u-space-4, 1rem);
u-margin-inline-start-4 
margin-inline-start: var(--u-space-4, 1rem);
u-margin-inline-end-4 
margin-inline-end: var(--u-space-4, 1rem);
u-margin-block-start-4 
margin-block-start: var(--u-space-4, 1rem);
u-margin-block-end-4 
margin-block-end: var(--u-space-4, 1rem);
u-margin-5 
margin: var(--u-space-5, 1.25rem);
u-margin-inline-5 
margin-inline: var(--u-space-5, 1.25rem);
u-margin-block-5 
margin-block: var(--u-space-5, 1.25rem);
u-margin-inline-start-5 
margin-inline-start: var(--u-space-5, 1.25rem);
u-margin-inline-end-5 
margin-inline-end: var(--u-space-5, 1.25rem);
u-margin-block-start-5 
margin-block-start: var(--u-space-5, 1.25rem);
u-margin-block-end-5 
margin-block-end: var(--u-space-5, 1.25rem);
u-margin-6 
margin: var(--u-space-6, 1.5rem);
u-margin-inline-6 
margin-inline: var(--u-space-6, 1.5rem);
u-margin-block-6 
margin-block: var(--u-space-6, 1.5rem);
u-margin-inline-start-6 
margin-inline-start: var(--u-space-6, 1.5rem);
u-margin-inline-end-6 
margin-inline-end: var(--u-space-6, 1.5rem);
u-margin-block-start-6 
margin-block-start: var(--u-space-6, 1.5rem);
u-margin-block-end-6 
margin-block-end: var(--u-space-6, 1.5rem);
u-margin-7 
margin: var(--u-space-7, 1.75rem);
u-margin-inline-7 
margin-inline: var(--u-space-7, 1.75rem);
u-margin-block-7 
margin-block: var(--u-space-7, 1.75rem);
u-margin-inline-start-7 
margin-inline-start: var(--u-space-7, 1.75rem);
u-margin-inline-end-7 
margin-inline-end: var(--u-space-7, 1.75rem);
u-margin-block-start-7 
margin-block-start: var(--u-space-7, 1.75rem);
u-margin-block-end-7 
margin-block-end: var(--u-space-7, 1.75rem);
u-margin-8 
margin: var(--u-space-8, 2rem);
u-margin-inline-8 
margin-inline: var(--u-space-8, 2rem);
u-margin-block-8 
margin-block: var(--u-space-8, 2rem);
u-margin-inline-start-8 
margin-inline-start: var(--u-space-8, 2rem);
u-margin-inline-end-8 
margin-inline-end: var(--u-space-8, 2rem);
u-margin-block-start-8 
margin-block-start: var(--u-space-8, 2rem);
u-margin-block-end-8 
margin-block-end: var(--u-space-8, 2rem);
u-margin-9 
margin: var(--u-space-9, 2.25rem);
u-margin-inline-9 
margin-inline: var(--u-space-9, 2.25rem);
u-margin-block-9 
margin-block: var(--u-space-9, 2.25rem);
u-margin-inline-start-9 
margin-inline-start: var(--u-space-9, 2.25rem);
u-margin-inline-end-9 
margin-inline-end: var(--u-space-9, 2.25rem);
u-margin-block-start-9 
margin-block-start: var(--u-space-9, 2.25rem);
u-margin-block-end-9 
margin-block-end: var(--u-space-9, 2.25rem);
u-margin-10 
margin: var(--u-space-10, 2.5rem);
u-margin-inline-10 
margin-inline: var(--u-space-10, 2.5rem);
u-margin-block-10 
margin-block: var(--u-space-10, 2.5rem);
u-margin-inline-start-10 
margin-inline-start: var(--u-space-10, 2.5rem);
u-margin-inline-end-10 
margin-inline-end: var(--u-space-10, 2.5rem);
u-margin-block-start-10 
margin-block-start: var(--u-space-10, 2.5rem);
u-margin-block-end-10 
margin-block-end: var(--u-space-10, 2.5rem);
u-margin-11 
margin: var(--u-space-11, 2.75rem);
u-margin-inline-11 
margin-inline: var(--u-space-11, 2.75rem);
u-margin-block-11 
margin-block: var(--u-space-11, 2.75rem);
u-margin-inline-start-11 
margin-inline-start: var(--u-space-11, 2.75rem);
u-margin-inline-end-11 
margin-inline-end: var(--u-space-11, 2.75rem);
u-margin-block-start-11 
margin-block-start: var(--u-space-11, 2.75rem);
u-margin-block-end-11 
margin-block-end: var(--u-space-11, 2.75rem);
u-margin-12 
margin: var(--u-space-12, 3rem);
u-margin-inline-12 
margin-inline: var(--u-space-12, 3rem);
u-margin-block-12 
margin-block: var(--u-space-12, 3rem);
u-margin-inline-start-12 
margin-inline-start: var(--u-space-12, 3rem);
u-margin-inline-end-12 
margin-inline-end: var(--u-space-12, 3rem);
u-margin-block-start-12 
margin-block-start: var(--u-space-12, 3rem);
u-margin-block-end-12 
margin-block-end: var(--u-space-12, 3rem);
u-margin-14 
margin: var(--u-space-14, 3.5rem);
u-margin-inline-14 
margin-inline: var(--u-space-14, 3.5rem);
u-margin-block-14 
margin-block: var(--u-space-14, 3.5rem);
u-margin-inline-start-14 
margin-inline-start: var(--u-space-14, 3.5rem);
u-margin-inline-end-14 
margin-inline-end: var(--u-space-14, 3.5rem);
u-margin-block-start-14 
margin-block-start: var(--u-space-14, 3.5rem);
u-margin-block-end-14 
margin-block-end: var(--u-space-14, 3.5rem);
u-margin-16 
margin: var(--u-space-16, 4rem);
u-margin-inline-16 
margin-inline: var(--u-space-16, 4rem);
u-margin-block-16 
margin-block: var(--u-space-16, 4rem);
u-margin-inline-start-16 
margin-inline-start: var(--u-space-16, 4rem);
u-margin-inline-end-16 
margin-inline-end: var(--u-space-16, 4rem);
u-margin-block-start-16 
margin-block-start: var(--u-space-16, 4rem);
u-margin-block-end-16 
margin-block-end: var(--u-space-16, 4rem);
u-margin-20 
margin: var(--u-space-20, 5rem);
u-margin-inline-20 
margin-inline: var(--u-space-20, 5rem);
u-margin-block-20 
margin-block: var(--u-space-20, 5rem);
u-margin-inline-start-20 
margin-inline-start: var(--u-space-20, 5rem);
u-margin-inline-end-20 
margin-inline-end: var(--u-space-20, 5rem);
u-margin-block-start-20 
margin-block-start: var(--u-space-20, 5rem);
u-margin-block-end-20 
margin-block-end: var(--u-space-20, 5rem);
u-margin-24 
margin: var(--u-space-24, 6rem);
u-margin-inline-24 
margin-inline: var(--u-space-24, 6rem);
u-margin-block-24 
margin-block: var(--u-space-24, 6rem);
u-margin-inline-start-24 
margin-inline-start: var(--u-space-24, 6rem);
u-margin-inline-end-24 
margin-inline-end: var(--u-space-24, 6rem);
u-margin-block-start-24 
margin-block-start: var(--u-space-24, 6rem);
u-margin-block-end-24 
margin-block-end: var(--u-space-24, 6rem);
u-margin-28 
margin: var(--u-space-28, 7rem);
u-margin-inline-28 
margin-inline: var(--u-space-28, 7rem);
u-margin-block-28 
margin-block: var(--u-space-28, 7rem);
u-margin-inline-start-28 
margin-inline-start: var(--u-space-28, 7rem);
u-margin-inline-end-28 
margin-inline-end: var(--u-space-28, 7rem);
u-margin-block-start-28 
margin-block-start: var(--u-space-28, 7rem);
u-margin-block-end-28 
margin-block-end: var(--u-space-28, 7rem);
u-margin-32 
margin: var(--u-space-32, 8rem);
u-margin-inline-32 
margin-inline: var(--u-space-32, 8rem);
u-margin-block-32 
margin-block: var(--u-space-32, 8rem);
u-margin-inline-start-32 
margin-inline-start: var(--u-space-32, 8rem);
u-margin-inline-end-32 
margin-inline-end: var(--u-space-32, 8rem);
u-margin-block-start-32 
margin-block-start: var(--u-space-32, 8rem);
u-margin-block-end-32 
margin-block-end: var(--u-space-32, 8rem);
u-margin-36 
margin: var(--u-space-36, 9rem);
u-margin-inline-36 
margin-inline: var(--u-space-36, 9rem);
u-margin-block-36 
margin-block: var(--u-space-36, 9rem);
u-margin-inline-start-36 
margin-inline-start: var(--u-space-36, 9rem);
u-margin-inline-end-36 
margin-inline-end: var(--u-space-36, 9rem);
u-margin-block-start-36 
margin-block-start: var(--u-space-36, 9rem);
u-margin-block-end-36 
margin-block-end: var(--u-space-36, 9rem);
u-margin-40 
margin: var(--u-space-40, 10rem);
u-margin-inline-40 
margin-inline: var(--u-space-40, 10rem);
u-margin-block-40 
margin-block: var(--u-space-40, 10rem);
u-margin-inline-start-40 
margin-inline-start: var(--u-space-40, 10rem);
u-margin-inline-end-40 
margin-inline-end: var(--u-space-40, 10rem);
u-margin-block-start-40 
margin-block-start: var(--u-space-40, 10rem);
u-margin-block-end-40 
margin-block-end: var(--u-space-40, 10rem);
u-margin-48 
margin: var(--u-space-48, 12rem);
u-margin-inline-48 
margin-inline: var(--u-space-48, 12rem);
u-margin-block-48 
margin-block: var(--u-space-48, 12rem);
u-margin-inline-start-48 
margin-inline-start: var(--u-space-48, 12rem);
u-margin-inline-end-48 
margin-inline-end: var(--u-space-48, 12rem);
u-margin-block-start-48 
margin-block-start: var(--u-space-48, 12rem);
u-margin-block-end-48 
margin-block-end: var(--u-space-48, 12rem);
u-margin-56 
margin: var(--u-space-56, 14rem);
u-margin-inline-56 
margin-inline: var(--u-space-56, 14rem);
u-margin-block-56 
margin-block: var(--u-space-56, 14rem);
u-margin-inline-start-56 
margin-inline-start: var(--u-space-56, 14rem);
u-margin-inline-end-56 
margin-inline-end: var(--u-space-56, 14rem);
u-margin-block-start-56 
margin-block-start: var(--u-space-56, 14rem);
u-margin-block-end-56 
margin-block-end: var(--u-space-56, 14rem);
u-margin-64 
margin: var(--u-space-64, 16rem);
u-margin-inline-64 
margin-inline: var(--u-space-64, 16rem);
u-margin-block-64 
margin-block: var(--u-space-64, 16rem);
u-margin-inline-start-64 
margin-inline-start: var(--u-space-64, 16rem);
u-margin-inline-end-64 
margin-inline-end: var(--u-space-64, 16rem);
u-margin-block-start-64 
margin-block-start: var(--u-space-64, 16rem);
u-margin-block-end-64 
margin-block-end: var(--u-space-64, 16rem);
u-margin-72 
margin: var(--u-space-72, 18rem);
u-margin-inline-72 
margin-inline: var(--u-space-72, 18rem);
u-margin-block-72 
margin-block: var(--u-space-72, 18rem);
u-margin-inline-start-72 
margin-inline-start: var(--u-space-72, 18rem);
u-margin-inline-end-72 
margin-inline-end: var(--u-space-72, 18rem);
u-margin-block-start-72 
margin-block-start: var(--u-space-72, 18rem);
u-margin-block-end-72 
margin-block-end: var(--u-space-72, 18rem);
u-margin-80 
margin: var(--u-space-80, 20rem);
u-margin-inline-80 
margin-inline: var(--u-space-80, 20rem);
u-margin-block-80 
margin-block: var(--u-space-80, 20rem);
u-margin-inline-start-80 
margin-inline-start: var(--u-space-80, 20rem);
u-margin-inline-end-80 
margin-inline-end: var(--u-space-80, 20rem);
u-margin-block-start-80 
margin-block-start: var(--u-space-80, 20rem);
u-margin-block-end-80 
margin-block-end: var(--u-space-80, 20rem);
u-margin-96 
margin: var(--u-space-96, 24rem);
u-margin-inline-96 
margin-inline: var(--u-space-96, 24rem);
u-margin-block-96 
margin-block: var(--u-space-96, 24rem);
u-margin-inline-start-96 
margin-inline-start: var(--u-space-96, 24rem);
u-margin-inline-end-96 
margin-inline-end: var(--u-space-96, 24rem);
u-margin-block-start-96 
margin-block-start: var(--u-space-96, 24rem);
u-margin-block-end-96 
margin-block-end: var(--u-space-96, 24rem);

Media

Utilities for controlling image, SVG, and replaced-element presentation.

APEX usage: Apply directly to the image, SVG, video, or other media element being sized or styled.

Object Fit

ClassStyles
u-object-fit-contain 
object-fit: contain;

Object Fit and Position

ClassStyles
u-object-fit-cover 
object-fit: cover;
u-object-fit-fill 
object-fit: fill;
u-object-position-top 
object-position: top;
u-object-position-bottom 
object-position: bottom;
u-object-position-left 
object-position: left;
u-object-position-right 
object-position: right;

Object Position

ClassStyles
u-object-position-center 
object-position: center;

Fill Current

ClassStyles
u-fill-current 
fill: currentColor;

Outline

Utilities for controlling focus outlines and outline appearance.

APEX usage: Apply to the interactive element that receives focus, such as a button, link, or input.

Outline

ClassStyles
u-outline-none 
outline-width: 0;
outline-style: none;

Outline Styles

ClassStyles
u-outline-solid 
outline-style: solid;
u-outline-dashed 
outline-style: dashed;
u-outline-dotted 
outline-style: dotted;

Outline offset — token-backed

ClassStyles
u-outline-offset 
outline-offset: var(--u-base-outline-offset, 2px);

Overflow

Utilities for controlling how content is clipped or scrolls beyond its box.

APEX usage: Apply to the container whose contents may exceed its available size.

Overflow and Scrolling

ClassStyles
u-overflow-visible 
overflow: visible;

Overflow and Text Handling

ClassStyles
u-overflow-hidden 
overflow: hidden;
u-overflow-auto 
overflow: auto;
u-overflow-y-auto 
overflow-y: auto;
u-overflow-x-auto 
overflow-x: auto;
u-overflow-scroll 
overflow: scroll;
u-text-clip 
text-overflow: clip;
u-scroll-auto 
scroll-behavior: auto;

Text Overflow / Wrapping helpers (kept here per audit; could also live in typography.css)

ClassStyles
u-text-ellipsis 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Scroll Behavior

ClassStyles
u-scroll-smooth 
scroll-behavior: smooth;

Padding

Utilities for controlling an element’s padding.

APEX usage: Apply to the region, item, or markup element whose content needs spacing. Prefer the broadest utility that matches the design, then use logical block or inline utilities when only one axis needs adjustment.

Padding

ClassStyles
u-padding-0 
padding: 0;

Padding Scale

ClassStyles
u-padding-inline-0 
padding-inline: 0;
u-padding-block-0 
padding-block: 0;
u-padding-inline-start-0 
padding-inline-start: 0;
u-padding-inline-end-0 
padding-inline-end: 0;
u-padding-block-start-0 
padding-block-start: 0;
u-padding-block-end-0 
padding-block-end: 0;
u-padding-0_5 
padding: var(--u-space-0_5, 0.125rem);
u-padding-inline-0_5 
padding-inline: var(--u-space-0_5, 0.125rem);
u-padding-block-0_5 
padding-block: var(--u-space-0_5, 0.125rem);
u-padding-inline-start-0_5 
padding-inline-start: var(--u-space-0_5, 0.125rem);
u-padding-inline-end-0_5 
padding-inline-end: var(--u-space-0_5, 0.125rem);
u-padding-block-start-0_5 
padding-block-start: var(--u-space-0_5, 0.125rem);
u-padding-block-end-0_5 
padding-block-end: var(--u-space-0_5, 0.125rem);
u-padding-1 
padding: var(--u-space-1, 0.25rem);
u-padding-inline-1 
padding-inline: var(--u-space-1, 0.25rem);
u-padding-block-1 
padding-block: var(--u-space-1, 0.25rem);
u-padding-inline-start-1 
padding-inline-start: var(--u-space-1, 0.25rem);
u-padding-inline-end-1 
padding-inline-end: var(--u-space-1, 0.25rem);
u-padding-block-start-1 
padding-block-start: var(--u-space-1, 0.25rem);
u-padding-block-end-1 
padding-block-end: var(--u-space-1, 0.25rem);
u-padding-1_5 
padding: var(--u-space-1_5, 0.375rem);
u-padding-inline-1_5 
padding-inline: var(--u-space-1_5, 0.375rem);
u-padding-block-1_5 
padding-block: var(--u-space-1_5, 0.375rem);
u-padding-inline-start-1_5 
padding-inline-start: var(--u-space-1_5, 0.375rem);
u-padding-inline-end-1_5 
padding-inline-end: var(--u-space-1_5, 0.375rem);
u-padding-block-start-1_5 
padding-block-start: var(--u-space-1_5, 0.375rem);
u-padding-block-end-1_5 
padding-block-end: var(--u-space-1_5, 0.375rem);
u-padding-2 
padding: var(--u-space-2, 0.5rem);
u-padding-inline-2 
padding-inline: var(--u-space-2, 0.5rem);
u-padding-block-2 
padding-block: var(--u-space-2, 0.5rem);
u-padding-inline-start-2 
padding-inline-start: var(--u-space-2, 0.5rem);
u-padding-inline-end-2 
padding-inline-end: var(--u-space-2, 0.5rem);
u-padding-block-start-2 
padding-block-start: var(--u-space-2, 0.5rem);
u-padding-block-end-2 
padding-block-end: var(--u-space-2, 0.5rem);
u-padding-2_5 
padding: var(--u-space-2_5, 0.625rem);
u-padding-inline-2_5 
padding-inline: var(--u-space-2_5, 0.625rem);
u-padding-block-2_5 
padding-block: var(--u-space-2_5, 0.625rem);
u-padding-inline-start-2_5 
padding-inline-start: var(--u-space-2_5, 0.625rem);
u-padding-inline-end-2_5 
padding-inline-end: var(--u-space-2_5, 0.625rem);
u-padding-block-start-2_5 
padding-block-start: var(--u-space-2_5, 0.625rem);
u-padding-block-end-2_5 
padding-block-end: var(--u-space-2_5, 0.625rem);
u-padding-3 
padding: var(--u-space-3, 0.75rem);
u-padding-inline-3 
padding-inline: var(--u-space-3, 0.75rem);
u-padding-block-3 
padding-block: var(--u-space-3, 0.75rem);
u-padding-inline-start-3 
padding-inline-start: var(--u-space-3, 0.75rem);
u-padding-inline-end-3 
padding-inline-end: var(--u-space-3, 0.75rem);
u-padding-block-start-3 
padding-block-start: var(--u-space-3, 0.75rem);
u-padding-block-end-3 
padding-block-end: var(--u-space-3, 0.75rem);
u-padding-3_5 
padding: var(--u-space-3_5, 0.875rem);
u-padding-inline-3_5 
padding-inline: var(--u-space-3_5, 0.875rem);
u-padding-block-3_5 
padding-block: var(--u-space-3_5, 0.875rem);
u-padding-inline-start-3_5 
padding-inline-start: var(--u-space-3_5, 0.875rem);
u-padding-inline-end-3_5 
padding-inline-end: var(--u-space-3_5, 0.875rem);
u-padding-block-start-3_5 
padding-block-start: var(--u-space-3_5, 0.875rem);
u-padding-block-end-3_5 
padding-block-end: var(--u-space-3_5, 0.875rem);
u-padding-4 
padding: var(--u-space-4, 1rem);
u-padding-inline-4 
padding-inline: var(--u-space-4, 1rem);
u-padding-block-4 
padding-block: var(--u-space-4, 1rem);
u-padding-inline-start-4 
padding-inline-start: var(--u-space-4, 1rem);
u-padding-inline-end-4 
padding-inline-end: var(--u-space-4, 1rem);
u-padding-block-start-4 
padding-block-start: var(--u-space-4, 1rem);
u-padding-block-end-4 
padding-block-end: var(--u-space-4, 1rem);
u-padding-5 
padding: var(--u-space-5, 1.25rem);
u-padding-inline-5 
padding-inline: var(--u-space-5, 1.25rem);
u-padding-block-5 
padding-block: var(--u-space-5, 1.25rem);
u-padding-inline-start-5 
padding-inline-start: var(--u-space-5, 1.25rem);
u-padding-inline-end-5 
padding-inline-end: var(--u-space-5, 1.25rem);
u-padding-block-start-5 
padding-block-start: var(--u-space-5, 1.25rem);
u-padding-block-end-5 
padding-block-end: var(--u-space-5, 1.25rem);
u-padding-6 
padding: var(--u-space-6, 1.5rem);
u-padding-inline-6 
padding-inline: var(--u-space-6, 1.5rem);
u-padding-block-6 
padding-block: var(--u-space-6, 1.5rem);
u-padding-inline-start-6 
padding-inline-start: var(--u-space-6, 1.5rem);
u-padding-inline-end-6 
padding-inline-end: var(--u-space-6, 1.5rem);
u-padding-block-start-6 
padding-block-start: var(--u-space-6, 1.5rem);
u-padding-block-end-6 
padding-block-end: var(--u-space-6, 1.5rem);
u-padding-7 
padding: var(--u-space-7, 1.75rem);
u-padding-inline-7 
padding-inline: var(--u-space-7, 1.75rem);
u-padding-block-7 
padding-block: var(--u-space-7, 1.75rem);
u-padding-inline-start-7 
padding-inline-start: var(--u-space-7, 1.75rem);
u-padding-inline-end-7 
padding-inline-end: var(--u-space-7, 1.75rem);
u-padding-block-start-7 
padding-block-start: var(--u-space-7, 1.75rem);
u-padding-block-end-7 
padding-block-end: var(--u-space-7, 1.75rem);
u-padding-8 
padding: var(--u-space-8, 2rem);
u-padding-inline-8 
padding-inline: var(--u-space-8, 2rem);
u-padding-block-8 
padding-block: var(--u-space-8, 2rem);
u-padding-inline-start-8 
padding-inline-start: var(--u-space-8, 2rem);
u-padding-inline-end-8 
padding-inline-end: var(--u-space-8, 2rem);
u-padding-block-start-8 
padding-block-start: var(--u-space-8, 2rem);
u-padding-block-end-8 
padding-block-end: var(--u-space-8, 2rem);
u-padding-9 
padding: var(--u-space-9, 2.25rem);
u-padding-inline-9 
padding-inline: var(--u-space-9, 2.25rem);
u-padding-block-9 
padding-block: var(--u-space-9, 2.25rem);
u-padding-inline-start-9 
padding-inline-start: var(--u-space-9, 2.25rem);
u-padding-inline-end-9 
padding-inline-end: var(--u-space-9, 2.25rem);
u-padding-block-start-9 
padding-block-start: var(--u-space-9, 2.25rem);
u-padding-block-end-9 
padding-block-end: var(--u-space-9, 2.25rem);
u-padding-10 
padding: var(--u-space-10, 2.5rem);
u-padding-inline-10 
padding-inline: var(--u-space-10, 2.5rem);
u-padding-block-10 
padding-block: var(--u-space-10, 2.5rem);
u-padding-inline-start-10 
padding-inline-start: var(--u-space-10, 2.5rem);
u-padding-inline-end-10 
padding-inline-end: var(--u-space-10, 2.5rem);
u-padding-block-start-10 
padding-block-start: var(--u-space-10, 2.5rem);
u-padding-block-end-10 
padding-block-end: var(--u-space-10, 2.5rem);
u-padding-11 
padding: var(--u-space-11, 2.75rem);
u-padding-inline-11 
padding-inline: var(--u-space-11, 2.75rem);
u-padding-block-11 
padding-block: var(--u-space-11, 2.75rem);
u-padding-inline-start-11 
padding-inline-start: var(--u-space-11, 2.75rem);
u-padding-inline-end-11 
padding-inline-end: var(--u-space-11, 2.75rem);
u-padding-block-start-11 
padding-block-start: var(--u-space-11, 2.75rem);
u-padding-block-end-11 
padding-block-end: var(--u-space-11, 2.75rem);
u-padding-12 
padding: var(--u-space-12, 3rem);
u-padding-inline-12 
padding-inline: var(--u-space-12, 3rem);
u-padding-block-12 
padding-block: var(--u-space-12, 3rem);
u-padding-inline-start-12 
padding-inline-start: var(--u-space-12, 3rem);
u-padding-inline-end-12 
padding-inline-end: var(--u-space-12, 3rem);
u-padding-block-start-12 
padding-block-start: var(--u-space-12, 3rem);
u-padding-block-end-12 
padding-block-end: var(--u-space-12, 3rem);
u-padding-14 
padding: var(--u-space-14, 3.5rem);
u-padding-inline-14 
padding-inline: var(--u-space-14, 3.5rem);
u-padding-block-14 
padding-block: var(--u-space-14, 3.5rem);
u-padding-inline-start-14 
padding-inline-start: var(--u-space-14, 3.5rem);
u-padding-inline-end-14 
padding-inline-end: var(--u-space-14, 3.5rem);
u-padding-block-start-14 
padding-block-start: var(--u-space-14, 3.5rem);
u-padding-block-end-14 
padding-block-end: var(--u-space-14, 3.5rem);
u-padding-16 
padding: var(--u-space-16, 4rem);
u-padding-inline-16 
padding-inline: var(--u-space-16, 4rem);
u-padding-block-16 
padding-block: var(--u-space-16, 4rem);
u-padding-inline-start-16 
padding-inline-start: var(--u-space-16, 4rem);
u-padding-inline-end-16 
padding-inline-end: var(--u-space-16, 4rem);
u-padding-block-start-16 
padding-block-start: var(--u-space-16, 4rem);
u-padding-block-end-16 
padding-block-end: var(--u-space-16, 4rem);
u-padding-20 
padding: var(--u-space-20, 5rem);
u-padding-inline-20 
padding-inline: var(--u-space-20, 5rem);
u-padding-block-20 
padding-block: var(--u-space-20, 5rem);
u-padding-inline-start-20 
padding-inline-start: var(--u-space-20, 5rem);
u-padding-inline-end-20 
padding-inline-end: var(--u-space-20, 5rem);
u-padding-block-start-20 
padding-block-start: var(--u-space-20, 5rem);
u-padding-block-end-20 
padding-block-end: var(--u-space-20, 5rem);
u-padding-24 
padding: var(--u-space-24, 6rem);
u-padding-inline-24 
padding-inline: var(--u-space-24, 6rem);
u-padding-block-24 
padding-block: var(--u-space-24, 6rem);
u-padding-inline-start-24 
padding-inline-start: var(--u-space-24, 6rem);
u-padding-inline-end-24 
padding-inline-end: var(--u-space-24, 6rem);
u-padding-block-start-24 
padding-block-start: var(--u-space-24, 6rem);
u-padding-block-end-24 
padding-block-end: var(--u-space-24, 6rem);
u-padding-28 
padding: var(--u-space-28, 7rem);
u-padding-inline-28 
padding-inline: var(--u-space-28, 7rem);
u-padding-block-28 
padding-block: var(--u-space-28, 7rem);
u-padding-inline-start-28 
padding-inline-start: var(--u-space-28, 7rem);
u-padding-inline-end-28 
padding-inline-end: var(--u-space-28, 7rem);
u-padding-block-start-28 
padding-block-start: var(--u-space-28, 7rem);
u-padding-block-end-28 
padding-block-end: var(--u-space-28, 7rem);
u-padding-32 
padding: var(--u-space-32, 8rem);
u-padding-inline-32 
padding-inline: var(--u-space-32, 8rem);
u-padding-block-32 
padding-block: var(--u-space-32, 8rem);
u-padding-inline-start-32 
padding-inline-start: var(--u-space-32, 8rem);
u-padding-inline-end-32 
padding-inline-end: var(--u-space-32, 8rem);
u-padding-block-start-32 
padding-block-start: var(--u-space-32, 8rem);
u-padding-block-end-32 
padding-block-end: var(--u-space-32, 8rem);
u-padding-36 
padding: var(--u-space-36, 9rem);
u-padding-inline-36 
padding-inline: var(--u-space-36, 9rem);
u-padding-block-36 
padding-block: var(--u-space-36, 9rem);
u-padding-inline-start-36 
padding-inline-start: var(--u-space-36, 9rem);
u-padding-inline-end-36 
padding-inline-end: var(--u-space-36, 9rem);
u-padding-block-start-36 
padding-block-start: var(--u-space-36, 9rem);
u-padding-block-end-36 
padding-block-end: var(--u-space-36, 9rem);
u-padding-40 
padding: var(--u-space-40, 10rem);
u-padding-inline-40 
padding-inline: var(--u-space-40, 10rem);
u-padding-block-40 
padding-block: var(--u-space-40, 10rem);
u-padding-inline-start-40 
padding-inline-start: var(--u-space-40, 10rem);
u-padding-inline-end-40 
padding-inline-end: var(--u-space-40, 10rem);
u-padding-block-start-40 
padding-block-start: var(--u-space-40, 10rem);
u-padding-block-end-40 
padding-block-end: var(--u-space-40, 10rem);
u-padding-48 
padding: var(--u-space-48, 12rem);
u-padding-inline-48 
padding-inline: var(--u-space-48, 12rem);
u-padding-block-48 
padding-block: var(--u-space-48, 12rem);
u-padding-inline-start-48 
padding-inline-start: var(--u-space-48, 12rem);
u-padding-inline-end-48 
padding-inline-end: var(--u-space-48, 12rem);
u-padding-block-start-48 
padding-block-start: var(--u-space-48, 12rem);
u-padding-block-end-48 
padding-block-end: var(--u-space-48, 12rem);
u-padding-56 
padding: var(--u-space-56, 14rem);
u-padding-inline-56 
padding-inline: var(--u-space-56, 14rem);
u-padding-block-56 
padding-block: var(--u-space-56, 14rem);
u-padding-inline-start-56 
padding-inline-start: var(--u-space-56, 14rem);
u-padding-inline-end-56 
padding-inline-end: var(--u-space-56, 14rem);
u-padding-block-start-56 
padding-block-start: var(--u-space-56, 14rem);
u-padding-block-end-56 
padding-block-end: var(--u-space-56, 14rem);
u-padding-64 
padding: var(--u-space-64, 16rem);
u-padding-inline-64 
padding-inline: var(--u-space-64, 16rem);
u-padding-block-64 
padding-block: var(--u-space-64, 16rem);
u-padding-inline-start-64 
padding-inline-start: var(--u-space-64, 16rem);
u-padding-inline-end-64 
padding-inline-end: var(--u-space-64, 16rem);
u-padding-block-start-64 
padding-block-start: var(--u-space-64, 16rem);
u-padding-block-end-64 
padding-block-end: var(--u-space-64, 16rem);
u-padding-72 
padding: var(--u-space-72, 18rem);
u-padding-inline-72 
padding-inline: var(--u-space-72, 18rem);
u-padding-block-72 
padding-block: var(--u-space-72, 18rem);
u-padding-inline-start-72 
padding-inline-start: var(--u-space-72, 18rem);
u-padding-inline-end-72 
padding-inline-end: var(--u-space-72, 18rem);
u-padding-block-start-72 
padding-block-start: var(--u-space-72, 18rem);
u-padding-block-end-72 
padding-block-end: var(--u-space-72, 18rem);
u-padding-80 
padding: var(--u-space-80, 20rem);
u-padding-inline-80 
padding-inline: var(--u-space-80, 20rem);
u-padding-block-80 
padding-block: var(--u-space-80, 20rem);
u-padding-inline-start-80 
padding-inline-start: var(--u-space-80, 20rem);
u-padding-inline-end-80 
padding-inline-end: var(--u-space-80, 20rem);
u-padding-block-start-80 
padding-block-start: var(--u-space-80, 20rem);
u-padding-block-end-80 
padding-block-end: var(--u-space-80, 20rem);
u-padding-96 
padding: var(--u-space-96, 24rem);
u-padding-inline-96 
padding-inline: var(--u-space-96, 24rem);
u-padding-block-96 
padding-block: var(--u-space-96, 24rem);
u-padding-inline-start-96 
padding-inline-start: var(--u-space-96, 24rem);
u-padding-inline-end-96 
padding-inline-end: var(--u-space-96, 24rem);
u-padding-block-start-96 
padding-block-start: var(--u-space-96, 24rem);
u-padding-block-end-96 
padding-block-end: var(--u-space-96, 24rem);

Positioning

Utilities for controlling an element’s position and inset offsets.

APEX usage: Apply positioning context to the parent when needed, then apply position and inset utilities to the element being placed.

Positioning and Inset

ClassStyles
u-position-static 
position: static;

Position and Inset

ClassStyles
u-position-relative 
position: relative;
u-position-absolute 
position: absolute;
u-position-fixed 
position: fixed;
u-position-sticky 
position: sticky;
u-sticky-bottom 
inset-block-end: 0;
position: sticky;
u-sticky-left 
inset-inline-start: 0;
position: sticky;
u-sticky-right 
inset-inline-end: 0;
position: sticky;
u-inset-inline-0 
inset-inline: 0;
u-inset-block-0 
inset-block: 0;
u-inset-inline-start-0 
inset-inline-start: 0;
u-inset-inline-start-1_2 
inset-inline-start: var(--u-fr-1_2, 50%);
u-inset-inline-start-full 
inset-inline-start: 100%;
u-inset-inline-end-0 
inset-inline-end: 0;
u-inset-inline-end-1_2 
inset-inline-end: var(--u-fr-1_2, 50%);
u-inset-inline-end-full 
inset-inline-end: 100%;
u-inset-block-start-0 
inset-block-start: 0;
u-inset-block-start-1_2 
inset-block-start: var(--u-fr-1_2, 50%);
u-inset-block-start-full 
inset-block-start: 100%;
u-inset-block-end-0 
inset-block-end: 0;
u-inset-block-end-1_2 
inset-block-end: var(--u-fr-1_2, 50%);
u-inset-block-end-full 
inset-block-end: 100%;
u-inset-auto 
inset: auto;

Sticky helpers (logical edges)

ClassStyles
u-sticky-top 
inset-block-start: 0;
position: sticky;

Inset

ClassStyles
u-inset-0 
inset: 0;

Scrolling

Utilities for controlling scroll behavior and scroll margins or padding.

APEX usage: Apply to the scroll container or target element affected by the scrolling behavior.

Scrolling

ClassStyles
u-overscroll-none 
overscroll-behavior: none;

Overscroll, Scrollbars, and Snapping

ClassStyles
u-overscroll-x-none 
overscroll-behavior-x: none;
u-overscroll-y-none 
overscroll-behavior-y: none;
u-scrollbar-thin 
scrollbar-width: thin;
u-scrollbar-none 
scrollbar-width: none;
u-snap-y 
scroll-snap-type: y mandatory;
u-snap-both 
scroll-snap-type: both mandatory;
u-snap-stop-always 
scroll-snap-stop: always;
u-snap-stop-normal 
scroll-snap-stop: normal;
u-snap-align-center 
scroll-snap-align: center;
u-snap-align-start 
scroll-snap-align: start;
u-snap-align-end 
scroll-snap-align: end;

Scroll Snapping

ClassStyles
u-snap-x 
scroll-snap-type: x mandatory;

Sizing

Utilities for controlling an element’s width, height, and size constraints.

APEX usage: Apply directly to the element whose dimensions should change, taking the parent’s available space into account.

Width Sizing

ClassStyles
u-width-auto 
inline-size: auto;

Dimensions, Constraints, and Aspect Ratios

ClassStyles
u-width-full 
inline-size: 100%;
u-width-min 
inline-size: min-content;
u-width-max 
inline-size: max-content;
u-width-fit 
inline-size: fit-content;
u-height-full 
block-size: 100%;
u-height-min 
block-size: min-content;
u-height-max 
block-size: max-content;
u-height-fit 
block-size: fit-content;
u-height-screen 
block-size: 100dvh;
u-width-0 
inline-size: 0;
u-width-1 
inline-size: var(--u-size-1, 0.0625rem);
u-width-2 
inline-size: var(--u-size-2, 0.125rem);
u-width-4 
inline-size: var(--u-size-4, .25rem);
u-width-6 
inline-size: var(--u-size-6, .375rem);
u-width-8 
inline-size: var(--u-size-8, .5rem);
u-width-10 
inline-size: var(--u-size-10, .625rem);
u-width-12 
inline-size: var(--u-size-12, .75rem);
u-width-14 
inline-size: var(--u-size-14, .875rem);
u-width-16 
inline-size: var(--u-size-16, 1rem);
u-width-20 
inline-size: var(--u-size-20, 1.25rem);
u-width-30 
inline-size: var(--u-size-30, 1.875rem);
u-width-40 
inline-size: var(--u-size-40, 2.5rem);
u-width-50 
inline-size: var(--u-size-50, 3.125rem);
u-width-60 
inline-size: var(--u-size-60, 3.75rem);
u-width-70 
inline-size: var(--u-size-70, 4.375rem);
u-width-80 
inline-size: var(--u-size-80, 5rem);
u-width-90 
inline-size: var(--u-size-90, 5.625rem);
u-width-100 
inline-size: var(--u-size-100, 6.25rem);
u-width-110 
inline-size: var(--u-size-110, 6.875rem);
u-width-120 
inline-size: var(--u-size-120, 7.5rem);
u-width-130 
inline-size: var(--u-size-130, 8.125rem);
u-width-140 
inline-size: var(--u-size-140, 8.75rem);
u-width-150 
inline-size: var(--u-size-150, 9.375rem);
u-width-160 
inline-size: var(--u-size-160, 10rem);
u-width-170 
inline-size: var(--u-size-170, 10.625rem);
u-width-180 
inline-size: var(--u-size-180, 11.25rem);
u-width-190 
inline-size: var(--u-size-190, 11.875rem);
u-width-200 
inline-size: var(--u-size-200, 12.5rem);
u-width-210 
inline-size: var(--u-size-210, 13.125rem);
u-width-220 
inline-size: var(--u-size-220, 13.75rem);
u-width-230 
inline-size: var(--u-size-230, 14.375rem);
u-width-240 
inline-size: var(--u-size-240, 15rem);
u-width-250 
inline-size: var(--u-size-250, 15.625rem);
u-width-260 
inline-size: var(--u-size-260, 16.25rem);
u-width-270 
inline-size: var(--u-size-270, 16.875rem);
u-width-280 
inline-size: var(--u-size-280, 17.5rem);
u-width-290 
inline-size: var(--u-size-290, 18.125rem);
u-width-300 
inline-size: var(--u-size-300, 18.75rem);
u-width-310 
inline-size: var(--u-size-310, 19.375rem);
u-width-320 
inline-size: var(--u-size-320, 20rem);
u-width-330 
inline-size: var(--u-size-330, 20.625rem);
u-width-340 
inline-size: var(--u-size-340, 21.25rem);
u-width-350 
inline-size: var(--u-size-350, 21.875rem);
u-width-360 
inline-size: var(--u-size-360, 22.5rem);
u-width-370 
inline-size: var(--u-size-370, 23.125rem);
u-width-380 
inline-size: var(--u-size-380, 23.75rem);
u-width-390 
inline-size: var(--u-size-390, 24.375rem);
u-width-400 
inline-size: var(--u-size-400, 25rem);
u-width-410 
inline-size: var(--u-size-410, 25.625rem);
u-width-420 
inline-size: var(--u-size-420, 26.25rem);
u-width-430 
inline-size: var(--u-size-430, 26.875rem);
u-width-440 
inline-size: var(--u-size-440, 27.5rem);
u-width-450 
inline-size: var(--u-size-450, 28.125rem);
u-width-460 
inline-size: var(--u-size-460, 28.75rem);
u-width-470 
inline-size: var(--u-size-470, 29.375rem);
u-width-480 
inline-size: var(--u-size-480, 30rem);
u-width-490 
inline-size: var(--u-size-490, 30.625rem);
u-width-500 
inline-size: var(--u-size-500, 31.25rem);
u-width-510 
inline-size: var(--u-size-510, 31.875rem);
u-width-520 
inline-size: var(--u-size-520, 32.5rem);
u-width-530 
inline-size: var(--u-size-530, 33.125rem);
u-width-540 
inline-size: var(--u-size-540, 33.75rem);
u-width-550 
inline-size: var(--u-size-550, 34.375rem);
u-width-560 
inline-size: var(--u-size-560, 35rem);
u-width-570 
inline-size: var(--u-size-570, 35.625rem);
u-width-580 
inline-size: var(--u-size-580, 36.25rem);
u-width-590 
inline-size: var(--u-size-590, 36.875rem);
u-width-600 
inline-size: var(--u-size-600, 37.5rem);
u-width-610 
inline-size: var(--u-size-610, 38.125rem);
u-width-620 
inline-size: var(--u-size-620, 38.75rem);
u-width-630 
inline-size: var(--u-size-630, 39.375rem);
u-width-640 
inline-size: var(--u-size-640, 40rem);
u-width-650 
inline-size: var(--u-size-650, 40.625rem);
u-width-660 
inline-size: var(--u-size-660, 41.25rem);
u-width-670 
inline-size: var(--u-size-670, 41.875rem);
u-width-680 
inline-size: var(--u-size-680, 42.5rem);
u-width-690 
inline-size: var(--u-size-690, 43.125rem);
u-width-700 
inline-size: var(--u-size-700, 43.75rem);
u-width-710 
inline-size: var(--u-size-710, 44.375rem);
u-width-720 
inline-size: var(--u-size-720, 45rem);
u-width-730 
inline-size: var(--u-size-730, 45.625rem);
u-width-740 
inline-size: var(--u-size-740, 46.25rem);
u-width-750 
inline-size: var(--u-size-750, 46.875rem);
u-width-760 
inline-size: var(--u-size-760, 47.5rem);
u-width-770 
inline-size: var(--u-size-770, 48.125rem);
u-width-780 
inline-size: var(--u-size-780, 48.75rem);
u-width-790 
inline-size: var(--u-size-790, 49.375rem);
u-width-800 
inline-size: var(--u-size-800, 50rem);
u-height-0 
block-size: 0;
u-height-1 
block-size: var(--u-size-1, 0.0625rem);
u-height-2 
block-size: var(--u-size-2, 0.125rem);
u-height-4 
block-size: var(--u-size-4, .25rem);
u-height-6 
block-size: var(--u-size-6, .375rem);
u-height-8 
block-size: var(--u-size-8, .5rem);
u-height-10 
block-size: var(--u-size-10, .625rem);
u-height-12 
block-size: var(--u-size-12, .75rem);
u-height-14 
block-size: var(--u-size-14, .875rem);
u-height-16 
block-size: var(--u-size-16, 1rem);
u-height-20 
block-size: var(--u-size-20, 1.25rem);
u-height-30 
block-size: var(--u-size-30, 1.875rem);
u-height-40 
block-size: var(--u-size-40, 2.5rem);
u-height-50 
block-size: var(--u-size-50, 3.125rem);
u-height-60 
block-size: var(--u-size-60, 3.75rem);
u-height-70 
block-size: var(--u-size-70, 4.375rem);
u-height-80 
block-size: var(--u-size-80, 5rem);
u-height-90 
block-size: var(--u-size-90, 5.625rem);
u-height-100 
block-size: var(--u-size-100, 6.25rem);
u-height-110 
block-size: var(--u-size-110, 6.875rem);
u-height-120 
block-size: var(--u-size-120, 7.5rem);
u-height-130 
block-size: var(--u-size-130, 8.125rem);
u-height-140 
block-size: var(--u-size-140, 8.75rem);
u-height-150 
block-size: var(--u-size-150, 9.375rem);
u-height-160 
block-size: var(--u-size-160, 10rem);
u-height-170 
block-size: var(--u-size-170, 10.625rem);
u-height-180 
block-size: var(--u-size-180, 11.25rem);
u-height-190 
block-size: var(--u-size-190, 11.875rem);
u-height-200 
block-size: var(--u-size-200, 12.5rem);
u-height-210 
block-size: var(--u-size-210, 13.125rem);
u-height-220 
block-size: var(--u-size-220, 13.75rem);
u-height-230 
block-size: var(--u-size-230, 14.375rem);
u-height-240 
block-size: var(--u-size-240, 15rem);
u-height-250 
block-size: var(--u-size-250, 15.625rem);
u-height-260 
block-size: var(--u-size-260, 16.25rem);
u-height-270 
block-size: var(--u-size-270, 16.875rem);
u-height-280 
block-size: var(--u-size-280, 17.5rem);
u-height-290 
block-size: var(--u-size-290, 18.125rem);
u-height-300 
block-size: var(--u-size-300, 18.75rem);
u-height-310 
block-size: var(--u-size-310, 19.375rem);
u-height-320 
block-size: var(--u-size-320, 20rem);
u-height-330 
block-size: var(--u-size-330, 20.625rem);
u-height-340 
block-size: var(--u-size-340, 21.25rem);
u-height-350 
block-size: var(--u-size-350, 21.875rem);
u-height-360 
block-size: var(--u-size-360, 22.5rem);
u-height-370 
block-size: var(--u-size-370, 23.125rem);
u-height-380 
block-size: var(--u-size-380, 23.75rem);
u-height-390 
block-size: var(--u-size-390, 24.375rem);
u-height-400 
block-size: var(--u-size-400, 25rem);
u-height-410 
block-size: var(--u-size-410, 25.625rem);
u-height-420 
block-size: var(--u-size-420, 26.25rem);
u-height-430 
block-size: var(--u-size-430, 26.875rem);
u-height-440 
block-size: var(--u-size-440, 27.5rem);
u-height-450 
block-size: var(--u-size-450, 28.125rem);
u-height-460 
block-size: var(--u-size-460, 28.75rem);
u-height-470 
block-size: var(--u-size-470, 29.375rem);
u-height-480 
block-size: var(--u-size-480, 30rem);
u-height-490 
block-size: var(--u-size-490, 30.625rem);
u-height-500 
block-size: var(--u-size-500, 31.25rem);
u-height-510 
block-size: var(--u-size-510, 31.875rem);
u-height-520 
block-size: var(--u-size-520, 32.5rem);
u-height-530 
block-size: var(--u-size-530, 33.125rem);
u-height-540 
block-size: var(--u-size-540, 33.75rem);
u-height-550 
block-size: var(--u-size-550, 34.375rem);
u-height-560 
block-size: var(--u-size-560, 35rem);
u-height-570 
block-size: var(--u-size-570, 35.625rem);
u-height-580 
block-size: var(--u-size-580, 36.25rem);
u-height-590 
block-size: var(--u-size-590, 36.875rem);
u-height-600 
block-size: var(--u-size-600, 37.5rem);
u-height-610 
block-size: var(--u-size-610, 38.125rem);
u-height-620 
block-size: var(--u-size-620, 38.75rem);
u-height-630 
block-size: var(--u-size-630, 39.375rem);
u-height-640 
block-size: var(--u-size-640, 40rem);
u-height-650 
block-size: var(--u-size-650, 40.625rem);
u-height-660 
block-size: var(--u-size-660, 41.25rem);
u-height-670 
block-size: var(--u-size-670, 41.875rem);
u-height-680 
block-size: var(--u-size-680, 42.5rem);
u-height-690 
block-size: var(--u-size-690, 43.125rem);
u-height-700 
block-size: var(--u-size-700, 43.75rem);
u-height-710 
block-size: var(--u-size-710, 44.375rem);
u-height-720 
block-size: var(--u-size-720, 45rem);
u-height-730 
block-size: var(--u-size-730, 45.625rem);
u-height-740 
block-size: var(--u-size-740, 46.25rem);
u-height-750 
block-size: var(--u-size-750, 46.875rem);
u-height-760 
block-size: var(--u-size-760, 47.5rem);
u-height-770 
block-size: var(--u-size-770, 48.125rem);
u-height-780 
block-size: var(--u-size-780, 48.75rem);
u-height-790 
block-size: var(--u-size-790, 49.375rem);
u-height-800 
block-size: var(--u-size-800, 50rem);
u-min-width-1 
min-inline-size: var(--u-size-1, 0.0625rem);
u-min-width-2 
min-inline-size: var(--u-size-2, 0.125rem);
u-min-width-4 
min-inline-size: var(--u-size-4, .25rem);
u-min-width-6 
min-inline-size: var(--u-size-6, .375rem);
u-min-width-8 
min-inline-size: var(--u-size-8, .5rem);
u-min-width-10 
min-inline-size: var(--u-size-10, .625rem);
u-min-width-20 
min-inline-size: var(--u-size-20, 1.25rem);
u-min-width-30 
min-inline-size: var(--u-size-30, 1.875rem);
u-min-width-40 
min-inline-size: var(--u-size-40, 2.5rem);
u-min-width-50 
min-inline-size: var(--u-size-50, 3.125rem);
u-min-width-60 
min-inline-size: var(--u-size-60, 3.75rem);
u-min-width-70 
min-inline-size: var(--u-size-70, 4.375rem);
u-min-width-80 
min-inline-size: var(--u-size-80, 5rem);
u-min-width-90 
min-inline-size: var(--u-size-90, 5.625rem);
u-min-width-100 
min-inline-size: var(--u-size-100, 6.25rem);
u-min-width-110 
min-inline-size: var(--u-size-110, 6.875rem);
u-min-width-120 
min-inline-size: var(--u-size-120, 7.5rem);
u-min-width-130 
min-inline-size: var(--u-size-130, 8.125rem);
u-min-width-140 
min-inline-size: var(--u-size-140, 8.75rem);
u-min-width-150 
min-inline-size: var(--u-size-150, 9.375rem);
u-min-width-160 
min-inline-size: var(--u-size-160, 10rem);
u-min-width-170 
min-inline-size: var(--u-size-170, 10.625rem);
u-min-width-180 
min-inline-size: var(--u-size-180, 11.25rem);
u-min-width-190 
min-inline-size: var(--u-size-190, 11.875rem);
u-min-width-200 
min-inline-size: var(--u-size-200, 12.5rem);
u-min-width-210 
min-inline-size: var(--u-size-210, 13.125rem);
u-min-width-220 
min-inline-size: var(--u-size-220, 13.75rem);
u-min-width-230 
min-inline-size: var(--u-size-230, 14.375rem);
u-min-width-240 
min-inline-size: var(--u-size-240, 15rem);
u-min-width-250 
min-inline-size: var(--u-size-250, 15.625rem);
u-min-width-260 
min-inline-size: var(--u-size-260, 16.25rem);
u-min-width-270 
min-inline-size: var(--u-size-270, 16.875rem);
u-min-width-280 
min-inline-size: var(--u-size-280, 17.5rem);
u-min-width-290 
min-inline-size: var(--u-size-290, 18.125rem);
u-min-width-300 
min-inline-size: var(--u-size-300, 18.75rem);
u-min-width-310 
min-inline-size: var(--u-size-310, 19.375rem);
u-min-width-320 
min-inline-size: var(--u-size-320, 20rem);
u-min-width-330 
min-inline-size: var(--u-size-330, 20.625rem);
u-min-width-340 
min-inline-size: var(--u-size-340, 21.25rem);
u-min-width-350 
min-inline-size: var(--u-size-350, 21.875rem);
u-min-width-360 
min-inline-size: var(--u-size-360, 22.5rem);
u-min-width-370 
min-inline-size: var(--u-size-370, 23.125rem);
u-min-width-380 
min-inline-size: var(--u-size-380, 23.75rem);
u-min-width-390 
min-inline-size: var(--u-size-390, 24.375rem);
u-min-width-400 
min-inline-size: var(--u-size-400, 25rem);
u-min-width-410 
min-inline-size: var(--u-size-410, 25.625rem);
u-min-width-420 
min-inline-size: var(--u-size-420, 26.25rem);
u-min-width-430 
min-inline-size: var(--u-size-430, 26.875rem);
u-min-width-440 
min-inline-size: var(--u-size-440, 27.5rem);
u-min-width-450 
min-inline-size: var(--u-size-450, 28.125rem);
u-min-width-460 
min-inline-size: var(--u-size-460, 28.75rem);
u-min-width-470 
min-inline-size: var(--u-size-470, 29.375rem);
u-min-width-480 
min-inline-size: var(--u-size-480, 30rem);
u-min-width-490 
min-inline-size: var(--u-size-490, 30.625rem);
u-min-width-500 
min-inline-size: var(--u-size-500, 31.25rem);
u-min-width-510 
min-inline-size: var(--u-size-510, 31.875rem);
u-min-width-520 
min-inline-size: var(--u-size-520, 32.5rem);
u-min-width-530 
min-inline-size: var(--u-size-530, 33.125rem);
u-min-width-540 
min-inline-size: var(--u-size-540, 33.75rem);
u-min-width-550 
min-inline-size: var(--u-size-550, 34.375rem);
u-min-width-560 
min-inline-size: var(--u-size-560, 35rem);
u-min-width-570 
min-inline-size: var(--u-size-570, 35.625rem);
u-min-width-580 
min-inline-size: var(--u-size-580, 36.25rem);
u-min-width-590 
min-inline-size: var(--u-size-590, 36.875rem);
u-min-width-600 
min-inline-size: var(--u-size-600, 37.5rem);
u-min-width-610 
min-inline-size: var(--u-size-610, 38.125rem);
u-min-width-620 
min-inline-size: var(--u-size-620, 38.75rem);
u-min-width-630 
min-inline-size: var(--u-size-630, 39.375rem);
u-min-width-640 
min-inline-size: var(--u-size-640, 40rem);
u-min-width-650 
min-inline-size: var(--u-size-650, 40.625rem);
u-min-width-660 
min-inline-size: var(--u-size-660, 41.25rem);
u-min-width-670 
min-inline-size: var(--u-size-670, 41.875rem);
u-min-width-680 
min-inline-size: var(--u-size-680, 42.5rem);
u-min-width-690 
min-inline-size: var(--u-size-690, 43.125rem);
u-min-width-700 
min-inline-size: var(--u-size-700, 43.75rem);
u-min-width-710 
min-inline-size: var(--u-size-710, 44.375rem);
u-min-width-720 
min-inline-size: var(--u-size-720, 45rem);
u-min-width-730 
min-inline-size: var(--u-size-730, 45.625rem);
u-min-width-740 
min-inline-size: var(--u-size-740, 46.25rem);
u-min-width-750 
min-inline-size: var(--u-size-750, 46.875rem);
u-min-width-760 
min-inline-size: var(--u-size-760, 47.5rem);
u-min-width-770 
min-inline-size: var(--u-size-770, 48.125rem);
u-min-width-780 
min-inline-size: var(--u-size-780, 48.75rem);
u-min-width-790 
min-inline-size: var(--u-size-790, 49.375rem);
u-min-width-800 
min-inline-size: var(--u-size-800, 50rem);
u-max-width-1 
max-inline-size: var(--u-size-1, 0.0625rem);
u-max-width-2 
max-inline-size: var(--u-size-2, 0.125rem);
u-max-width-4 
max-inline-size: var(--u-size-4, .25rem);
u-max-width-6 
max-inline-size: var(--u-size-6, .375rem);
u-max-width-8 
max-inline-size: var(--u-size-8, .5rem);
u-max-width-10 
max-inline-size: var(--u-size-10, .625rem);
u-max-width-20 
max-inline-size: var(--u-size-20, 1.25rem);
u-max-width-30 
max-inline-size: var(--u-size-30, 1.875rem);
u-max-width-40 
max-inline-size: var(--u-size-40, 2.5rem);
u-max-width-50 
max-inline-size: var(--u-size-50, 3.125rem);
u-max-width-60 
max-inline-size: var(--u-size-60, 3.75rem);
u-max-width-70 
max-inline-size: var(--u-size-70, 4.375rem);
u-max-width-80 
max-inline-size: var(--u-size-80, 5rem);
u-max-width-90 
max-inline-size: var(--u-size-90, 5.625rem);
u-max-width-100 
max-inline-size: var(--u-size-100, 6.25rem);
u-max-width-110 
max-inline-size: var(--u-size-110, 6.875rem);
u-max-width-120 
max-inline-size: var(--u-size-120, 7.5rem);
u-max-width-130 
max-inline-size: var(--u-size-130, 8.125rem);
u-max-width-140 
max-inline-size: var(--u-size-140, 8.75rem);
u-max-width-150 
max-inline-size: var(--u-size-150, 9.375rem);
u-max-width-160 
max-inline-size: var(--u-size-160, 10rem);
u-max-width-170 
max-inline-size: var(--u-size-170, 10.625rem);
u-max-width-180 
max-inline-size: var(--u-size-180, 11.25rem);
u-max-width-190 
max-inline-size: var(--u-size-190, 11.875rem);
u-max-width-200 
max-inline-size: var(--u-size-200, 12.5rem);
u-max-width-210 
max-inline-size: var(--u-size-210, 13.125rem);
u-max-width-220 
max-inline-size: var(--u-size-220, 13.75rem);
u-max-width-230 
max-inline-size: var(--u-size-230, 14.375rem);
u-max-width-240 
max-inline-size: var(--u-size-240, 15rem);
u-max-width-250 
max-inline-size: var(--u-size-250, 15.625rem);
u-max-width-260 
max-inline-size: var(--u-size-260, 16.25rem);
u-max-width-270 
max-inline-size: var(--u-size-270, 16.875rem);
u-max-width-280 
max-inline-size: var(--u-size-280, 17.5rem);
u-max-width-290 
max-inline-size: var(--u-size-290, 18.125rem);
u-max-width-300 
max-inline-size: var(--u-size-300, 18.75rem);
u-max-width-310 
max-inline-size: var(--u-size-310, 19.375rem);
u-max-width-320 
max-inline-size: var(--u-size-320, 20rem);
u-max-width-330 
max-inline-size: var(--u-size-330, 20.625rem);
u-max-width-340 
max-inline-size: var(--u-size-340, 21.25rem);
u-max-width-350 
max-inline-size: var(--u-size-350, 21.875rem);
u-max-width-360 
max-inline-size: var(--u-size-360, 22.5rem);
u-max-width-370 
max-inline-size: var(--u-size-370, 23.125rem);
u-max-width-380 
max-inline-size: var(--u-size-380, 23.75rem);
u-max-width-390 
max-inline-size: var(--u-size-390, 24.375rem);
u-max-width-400 
max-inline-size: var(--u-size-400, 25rem);
u-max-width-410 
max-inline-size: var(--u-size-410, 25.625rem);
u-max-width-420 
max-inline-size: var(--u-size-420, 26.25rem);
u-max-width-430 
max-inline-size: var(--u-size-430, 26.875rem);
u-max-width-440 
max-inline-size: var(--u-size-440, 27.5rem);
u-max-width-450 
max-inline-size: var(--u-size-450, 28.125rem);
u-max-width-460 
max-inline-size: var(--u-size-460, 28.75rem);
u-max-width-470 
max-inline-size: var(--u-size-470, 29.375rem);
u-max-width-480 
max-inline-size: var(--u-size-480, 30rem);
u-max-width-490 
max-inline-size: var(--u-size-490, 30.625rem);
u-max-width-500 
max-inline-size: var(--u-size-500, 31.25rem);
u-max-width-510 
max-inline-size: var(--u-size-510, 31.875rem);
u-max-width-520 
max-inline-size: var(--u-size-520, 32.5rem);
u-max-width-530 
max-inline-size: var(--u-size-530, 33.125rem);
u-max-width-540 
max-inline-size: var(--u-size-540, 33.75rem);
u-max-width-550 
max-inline-size: var(--u-size-550, 34.375rem);
u-max-width-560 
max-inline-size: var(--u-size-560, 35rem);
u-max-width-570 
max-inline-size: var(--u-size-570, 35.625rem);
u-max-width-580 
max-inline-size: var(--u-size-580, 36.25rem);
u-max-width-590 
max-inline-size: var(--u-size-590, 36.875rem);
u-max-width-600 
max-inline-size: var(--u-size-600, 37.5rem);
u-max-width-610 
max-inline-size: var(--u-size-610, 38.125rem);
u-max-width-620 
max-inline-size: var(--u-size-620, 38.75rem);
u-max-width-630 
max-inline-size: var(--u-size-630, 39.375rem);
u-max-width-640 
max-inline-size: var(--u-size-640, 40rem);
u-max-width-650 
max-inline-size: var(--u-size-650, 40.625rem);
u-max-width-660 
max-inline-size: var(--u-size-660, 41.25rem);
u-max-width-670 
max-inline-size: var(--u-size-670, 41.875rem);
u-max-width-680 
max-inline-size: var(--u-size-680, 42.5rem);
u-max-width-690 
max-inline-size: var(--u-size-690, 43.125rem);
u-max-width-700 
max-inline-size: var(--u-size-700, 43.75rem);
u-max-width-710 
max-inline-size: var(--u-size-710, 44.375rem);
u-max-width-720 
max-inline-size: var(--u-size-720, 45rem);
u-max-width-730 
max-inline-size: var(--u-size-730, 45.625rem);
u-max-width-740 
max-inline-size: var(--u-size-740, 46.25rem);
u-max-width-750 
max-inline-size: var(--u-size-750, 46.875rem);
u-max-width-760 
max-inline-size: var(--u-size-760, 47.5rem);
u-max-width-770 
max-inline-size: var(--u-size-770, 48.125rem);
u-max-width-780 
max-inline-size: var(--u-size-780, 48.75rem);
u-max-width-790 
max-inline-size: var(--u-size-790, 49.375rem);
u-max-width-800 
max-inline-size: var(--u-size-800, 50rem);
u-min-width-full 
min-inline-size: 100%;
u-min-width-screen 
min-inline-size: 100dvw;
u-min-width-min 
min-inline-size: min-content;
u-min-width-max 
min-inline-size: max-content;
u-max-width-screen 
max-inline-size: 100dvw;
u-max-width-xs 
max-inline-size: var(--u-size-max-xs, 20rem);
u-max-width-sm 
max-inline-size: var(--u-size-max-sm, 24rem);
u-max-width-md 
max-inline-size: var(--u-size-max-md, 28rem);
u-max-width-lg 
max-inline-size: var(--u-size-max-lg, 32rem);
u-max-width-xl 
max-inline-size: var(--u-size-max-xl, 36rem);
u-max-width-2xl 
max-inline-size: var(--u-size-max-2xl, 42rem);
u-min-height-1 
min-block-size: var(--u-size-1, 0.0625rem);
u-min-height-2 
min-block-size: var(--u-size-2, 0.125rem);
u-min-height-4 
min-block-size: var(--u-size-4, .25rem);
u-min-height-6 
min-block-size: var(--u-size-6, .375rem);
u-min-height-8 
min-block-size: var(--u-size-8, .5rem);
u-min-height-10 
min-block-size: var(--u-size-10, .625rem);
u-min-height-12 
min-block-size: var(--u-size-12, .75rem);
u-min-height-14 
min-block-size: var(--u-size-14, .875rem);
u-min-height-16 
min-block-size: var(--u-size-16, 1rem);
u-min-height-20 
min-block-size: var(--u-size-20, 1.25rem);
u-min-height-30 
min-block-size: var(--u-size-30, 1.875rem);
u-min-height-40 
min-block-size: var(--u-size-40, 2.5rem);
u-min-height-50 
min-block-size: var(--u-size-50, 3.125rem);
u-min-height-60 
min-block-size: var(--u-size-60, 3.75rem);
u-min-height-70 
min-block-size: var(--u-size-70, 4.375rem);
u-min-height-80 
min-block-size: var(--u-size-80, 5rem);
u-min-height-full 
min-block-size: 100%;
u-min-height-screen 
min-block-size: 100dvh;
u-min-height-min 
min-block-size: min-content;
u-max-height-1 
max-block-size: var(--u-size-1, 0.0625rem);
u-max-height-2 
max-block-size: var(--u-size-2, 0.125rem);
u-max-height-4 
max-block-size: var(--u-size-4, .25rem);
u-max-height-6 
max-block-size: var(--u-size-6, .375rem);
u-max-height-8 
max-block-size: var(--u-size-8, .5rem);
u-max-height-10 
max-block-size: var(--u-size-10, .625rem);
u-max-height-12 
max-block-size: var(--u-size-12, .75rem);
u-max-height-14 
max-block-size: var(--u-size-14, .875rem);
u-max-height-16 
max-block-size: var(--u-size-16, 1rem);
u-max-height-20 
max-block-size: var(--u-size-20, 1.25rem);
u-max-height-30 
max-block-size: var(--u-size-30, 1.875rem);
u-max-height-40 
max-block-size: var(--u-size-40, 2.5rem);
u-max-height-50 
max-block-size: var(--u-size-50, 3.125rem);
u-max-height-60 
max-block-size: var(--u-size-60, 3.75rem);
u-max-height-70 
max-block-size: var(--u-size-70, 4.375rem);
u-max-height-80 
max-block-size: var(--u-size-80, 5rem);
u-min-height-max 
min-block-size: max-content;
u-max-height-screen 
max-block-size: 100dvh;
u-max-height-xs 
max-block-size: var(--u-size-max-xs, 20rem);
u-max-height-sm 
max-block-size: var(--u-size-max-sm, 24rem);
u-max-height-md 
max-block-size: var(--u-size-max-md, 28rem);
u-max-height-lg 
max-block-size: var(--u-size-max-lg, 32rem);
u-max-height-xl 
max-block-size: var(--u-size-max-xl, 36rem);
u-max-height-2xl 
max-block-size: var(--u-size-max-2xl, 42rem);
u-width-1-3 
inline-size: var(--u-fr-1_3, 33.333%);
u-width-2-3 
inline-size: var(--u-fr-2_3, 66.667%);
u-width-1-4 
inline-size: var(--u-fr-1_4, 25%);
u-width-2-4 
inline-size: var(--u-fr-2_4, 50%);
u-width-3-4 
inline-size: var(--u-fr-3_4, 75%);
u-width-1-5 
inline-size: var(--u-fr-1_5, 20%);
u-width-2-5 
inline-size: var(--u-fr-2_5, 40%);
u-width-3-5 
inline-size: var(--u-fr-3_5, 60%);
u-width-4-5 
inline-size: var(--u-fr-4_5, 80%);
u-width-1-6 
inline-size: var(--u-fr-1_6, 16.667%);
u-width-2-6 
inline-size: var(--u-fr-2_6, 33.333%);
u-width-3-6 
inline-size: var(--u-fr-3_6, 50%);
u-width-4-6 
inline-size: var(--u-fr-4_6, 66.667%);
u-width-5-6 
inline-size: var(--u-fr-5_6, 83.333%);
u-height-1-3 
block-size: var(--u-fr-1_3, 33.333%);
u-height-2-3 
block-size: var(--u-fr-2_3, 66.667%);
u-height-1-4 
block-size: var(--u-fr-1_4, 25%);
u-height-2-4 
block-size: var(--u-fr-2_4, 50%);
u-height-3-4 
block-size: var(--u-fr-3_4, 75%);
u-height-1-5 
block-size: var(--u-fr-1_5, 20%);
u-height-3-5 
block-size: var(--u-fr-3_5, 60%);
u-height-4-5 
block-size: var(--u-fr-4_5, 80%);
u-height-1-6 
block-size: var(--u-fr-1_6, 16.667%);
u-height-2-6 
block-size: var(--u-fr-2_6, 33.333%);
u-height-3-6 
block-size: var(--u-fr-3_6, 50%);
u-height-4-6 
block-size: var(--u-fr-4_6, 66.667%);
u-height-5-6 
block-size: var(--u-fr-5_6, 83.333%);
u-aspect-2x1 
aspect-ratio: 2/1;
u-aspect-16x9 
aspect-ratio: 16/9;
u-aspect-4x3 
aspect-ratio: 4/3;
u-aspect-3x2 
aspect-ratio: 3/2;
u-aspect-21x9 
aspect-ratio: 21/9;
u-aspect-9x16 
aspect-ratio: 9/16;
u-aspect-auto 
aspect-ratio: auto;

Height Sizing

ClassStyles
u-height-auto 
block-size: auto;

Viewport sizing (tokens with fallbacks to dynamic viewport units)

ClassStyles
u-width-screen 
inline-size: 100dvw;

Width scale (spacing tokens + fallbacks)

ClassStyles
u-width-px 
inline-size: var(--u-size-px, 1px);

Height scale (spacing tokens + fallbacks)

ClassStyles
u-height-px 
block-size: var(--u-size-px, 1px);

Min width (keywords)

ClassStyles
u-min-width-0 
min-inline-size: 0;

Max width (keywords + named sizes; tokenized with fallbacks)

ClassStyles
u-max-width-full 
max-inline-size: 100%;

Min height (keywords)

ClassStyles
u-min-height-0 
min-block-size: 0;

Max height (keywords + named sizes; tokenized with fallbacks)

ClassStyles
u-max-height-full 
max-block-size: 100%;

Fractions: Width

ClassStyles
u-width-1-2 
inline-size: var(--u-fr-1_2, 50%);

Fractions: Height (parity with width where useful)

ClassStyles
u-height-1-2 
block-size: var(--u-fr-1_2, 50%);

Aspect Ratio

ClassStyles
u-aspect-1x1 
aspect-ratio: 1/1;

Tables

Utilities for controlling table layout, borders, and spacing.

APEX usage: Apply table utilities to the table element or the specific table structure they affect.

Table Layout

ClassStyles
u-table-auto 
table-layout: auto;

Table Layout and Spacing

ClassStyles
u-table-fixed 
table-layout: fixed;
u-border-separate 
border-collapse: separate;

Table Border Collapse

ClassStyles
u-border-collapse 
border-collapse: collapse;

Table Border Spacing

ClassStyles
u-border-spacing-0 
border-spacing: 0 0;

Typography

Utilities for controlling font, text size, line height, alignment, wrapping, and decoration.

APEX usage: Apply to the text-containing element whose typography should change, such as a heading, paragraph, item label, or report value.

Typography Utilities

ClassStyles
u-font-sans 
font-family: var(--u-font-family-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji");

Type Style, Alignment, and Wrapping

ClassStyles
u-font-serif 
font-family: var(--u-font-family-serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif);
u-font-mono 
font-family: var(--u-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
u-text-xs 
font-size: var(--u-font-size-xs, 0.75rem);
line-height: var(--u-line-height-normal, 1.5);
u-text-sm 
font-size: var(--u-font-size-sm, 0.875rem);
line-height: var(--u-line-height-normal, 1.5);
u-text-md 
font-size: var(--u-font-size-md, 1rem);
line-height: var(--u-line-height-relaxed, 1.625);
u-text-lg 
font-size: var(--u-font-size-lg, 1.125rem);
line-height: var(--u-line-height-normal, 1.5);
u-text-xl 
font-size: var(--u-font-size-xl, 1.25rem);
line-height: var(--u-line-height-tight, 1.25);
u-text-2xl 
font-size: var(--u-font-size-2xl, 1.5rem);
line-height: var(--u-line-height-tight, 1.25);
u-text-3xl 
font-size: var(--u-font-size-3xl, 2rem);
line-height: var(--u-line-height-tight, 1.25);
u-text-4xl 
font-size: var(--u-font-size-4xl, 2.25rem);
line-height: var(--u-line-height-tight, 1.25);
u-font-light 
font-weight: var(--u-font-weight-light, 300);
u-font-normal 
font-weight: var(--u-font-weight-normal, 400);
u-font-semibold 
font-weight: var(--u-font-weight-semibold, 500);
u-font-bold 
font-weight: var(--u-font-weight-bold, 700);
u-font-black 
font-weight: var(--u-font-weight-black, 900);
u-font-style-italic 
font-style: italic;
u-leading-tight 
line-height: var(--u-line-height-tight, 1.25);
u-leading-snug 
line-height: var(--u-line-height-snug, 1.375);
u-leading-normal 
line-height: var(--u-line-height-normal, 1.5);
u-leading-relaxed 
line-height: var(--u-line-height-relaxed, 1.625);
u-leading-loose 
line-height: var(--u-line-height-loose, 2);
u-text-center 
text-align: center;
u-text-end 
text-align: end;
u-text-justify 
text-align: justify;
u-lowercase 
text-transform: lowercase;
u-capitalize 
text-transform: capitalize;
u-normal-case 
text-transform: none;
u-line-through 
text-decoration-line: line-through;
u-no-underline 
text-decoration: none;
u-white-space-nowrap 
white-space: nowrap;
u-white-space-pre 
white-space: pre;
u-white-space-pre-line 
white-space: pre-line;
u-white-space-pre-wrap 
white-space: pre-wrap;
u-wrap-break-word 
overflow-wrap: break-word;
u-wrap-anywhere 
overflow-wrap: anywhere;
u-wrap-normal 
overflow-wrap: normal;
u-break-keep 
word-break: keep-all;
u-break-all 
word-break: break-all;
u-break-normal 
word-break: normal;
u-hyphens-none 
hyphens: none;
u-hyphens-manual 
hyphens: manual;
u-hyphens-auto 
hyphens: auto;
u-line-clamp-2 
display: -webkit-box;
line-clamp: var(--u-line-clamp-2, 2);
-webkit-line-clamp: var(--u-line-clamp-2, 2);
-webkit-box-orient: vertical;
overflow: hidden;
u-line-clamp-3 
display: -webkit-box;
line-clamp: var(--u-line-clamp-3, 3);
-webkit-line-clamp: var(--u-line-clamp-3, 3);
-webkit-box-orient: vertical;
overflow: hidden;
u-line-clamp-4 
display: -webkit-box;
line-clamp: var(--u-line-clamp-4, 4);
-webkit-line-clamp: var(--u-line-clamp-4, 4);
-webkit-box-orient: vertical;
overflow: hidden;
u-line-clamp-5 
display: -webkit-box;
line-clamp: var(--u-line-clamp-5, 5);
-webkit-line-clamp: var(--u-line-clamp-5, 5);
-webkit-box-orient: vertical;
overflow: hidden;

Font Size + Line Height (paired; semantic tokens with fallbacks)

ClassStyles
u-text-xxs 
font-size: var(--u-font-size-xxs, 0.5rem);
line-height: var(--u-line-height-tight, 1.25);

Font Weight (semantic tokens with numeric fallbacks)

ClassStyles
u-font-thin 
font-weight: var(--u-font-weight-thin, 100);

Font Style

ClassStyles
u-font-style-normal 
font-style: normal;

Leading (Line Height; semantic tokens with numeric fallbacks)

ClassStyles
u-leading-none 
line-height: var(--u-line-height-none, 1);

Text Align (logical)

ClassStyles
u-text-start 
text-align: start;

Text Transform

ClassStyles
u-uppercase 
text-transform: uppercase;

Text Decoration

ClassStyles
u-underline 
text-decoration-line: underline;

White-space / Wrapping / Hyphenation

ClassStyles
u-white-space-normal 
white-space: normal;

Truncate a single line

ClassStyles
u-truncate 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Truncate after multiple lines (tokenized fallback for numeric value)

ClassStyles
u-line-clamp-1 
display: -webkit-box;
line-clamp: var(--u-line-clamp-1, 1);
-webkit-line-clamp: var(--u-line-clamp-1, 1);
-webkit-box-orient: vertical;
overflow: hidden;

Visibility

Utilities for controlling whether an element is visible while preserving or removing its layout space.

APEX usage: Apply directly to the element whose visibility should change.

Visibility

ClassStyles
u-visible 
visibility: visible;

Visibility: Hidden

ClassStyles
u-invisible 
visibility: hidden;

Z Index

Utilities for controlling stacking order.

APEX usage: Apply to positioned elements that overlap and need a deliberate stacking relationship.

Z-Index Canonical Scale

ClassStyles
u-z-auto 
z-index: auto;

Layer Scale

ClassStyles
u-z-negative-1 
z-index: -1;
u-z-0 
z-index: 0;
u-z-1 
z-index: 1;
u-z-5 
z-index: 5;
u-z-10 
z-index: 10;
u-z-50 
z-index: 50;
u-z-90 
z-index: 90;
u-z-100 
z-index: 100;
u-z-101 
z-index: 101;
u-z-110 
z-index: 110;
u-z-200 
z-index: 200;
u-z-300 
z-index: 300;
u-z-400 
z-index: 400;
u-z-500 
z-index: 500;
u-z-600 
z-index: 600;
u-z-700 
z-index: 700;
u-z-800 
z-index: 800;
u-z-900 
z-index: 900;
u-z-901 
z-index: 901;
u-z-902 
z-index: 902;
u-z-1000 
z-index: 1000;
u-z-1001 
z-index: 1001;
u-z-1002 
z-index: 1002;
u-z-1010 
z-index: 1010;
u-z-2010 
z-index: 2010;
u-z-8000 
z-index: 8000;
u-z-9999 
z-index: 9999;
u-z-max 
z-index: 2147483647;