• Get Started
  • Foundations
  • Components
  • Learn
  • Whatʼs New
  • Search
Foundations
Foundations section header
  • Foundations
  • Accessibility
    • Digital Experiences
    • Documents
    • Learning Resources
    • Legal Requirements
  • Design Tokens
  • Utilities
    • Display
    • Flexbox
    • Float
    • Grid
    • Margin and Padding
    • Opacity
    • Responsive Utilities
    • Typography
    • Z-Index

Utilities

Display
Utility classes for display.
Flexbox
These utility classes are used to create a flexbox layout.
Float
Utility classes for float.
Grid
The grid is mobile-first, powered by flexbox, and based on a 12-column system.
Margin and Padding
Utility classes for margin and padding.
Opacity
Utility classes for opacity.
Responsive Utilities
Responsive utilities for adjusting applied styles based on screen width.
Typography
Utility classes for typography elements.
Z-index
Utility classes for z-index.

Edit this page on GitHub (Permissions required)

Last updated: December 31, 2025

  • Learn More
    • Get Started
    • Foundations
    • Components
    • Accessibility
  • Resources
    • GitHub
    • Fonts GitHub
    • NPM Packages
    • Figma Library