# UX4G Utilities

Atomic CSS utility classes for layout, typography, spacing, display, flex, borders, backgrounds, and interactions.

**Total utility classes:** 970

## How to use

Add classes directly to HTML elements. Utilities are mobile-first and support responsive prefixes where documented.

```html
<div class="ux4g-d-flex ux4g-jc-center ux4g-ai-center ux4g-gap-m ux4g-p-l">
  <span class="ux4g-text-neutral-primary">Centered content</span>
</div>
```

## Utility family pages

Each family has its own page with rendered examples and the exact CSS partials that define the classes:

- [Backgrounds](utilities/backgrounds.md)
- [Blur](utilities/blur.md)
- [Border](utilities/border.md)
- [Breakpoints](utilities/breakpoints.md)
- [Display](utilities/display.md)
- [Flex](utilities/flex.md)
- [Gap](utilities/gap.md)
- [Interactions](utilities/interactions.md)
- [Object-fit](utilities/object-fit.md)
- [Opacity](utilities/opacity.md)
- [Overflow](utilities/overflow.md)
- [Position](utilities/position.md)
- [Radius](utilities/radius.md)
- [Shadows](utilities/shadows.md)
- [Sizing](utilities/sizing.md)
- [Spacing](utilities/spacing.md)
- [Text-colors](utilities/text-colors.md)
- [Text](utilities/text.md)
- [Typescale](utilities/typescale.md)
- [Vertical-align](utilities/vertical-align.md)
- [Z-index](utilities/z-index.md)

## Class reference

```
ux4g-2xl-ac-around
ux4g-2xl-ac-between
ux4g-2xl-ac-center
ux4g-2xl-ac-end
ux4g-2xl-ac-start
ux4g-2xl-ac-stretch
ux4g-2xl-ai-baseline
ux4g-2xl-ai-center
ux4g-2xl-ai-end
ux4g-2xl-ai-start
ux4g-2xl-ai-stretch
ux4g-2xl-as-baseline
ux4g-2xl-as-center
ux4g-2xl-as-end
ux4g-2xl-as-start
ux4g-2xl-as-stretch
ux4g-2xl-d-block
ux4g-2xl-d-flex
ux4g-2xl-d-grid
ux4g-2xl-d-inline
ux4g-2xl-d-inline-block
ux4g-2xl-d-inline-flex
ux4g-2xl-d-none
ux4g-2xl-d-table
ux4g-2xl-d-table-cell
ux4g-2xl-d-table-row
ux4g-2xl-flex-col
ux4g-2xl-flex-col-reverse
ux4g-2xl-flex-fill
ux4g-2xl-flex-row
ux4g-2xl-flex-row-reverse
ux4g-2xl-grow
ux4g-2xl-grow-0
ux4g-2xl-jc-around
ux4g-2xl-jc-between
ux4g-2xl-jc-center
ux4g-2xl-jc-evenly
ux4g-2xl-jc-start
ux4g-2xl-ji-center
ux4g-2xl-ji-start
ux4g-2xl-ji-stretch
ux4g-2xl-js-center
ux4g-2xl-js-start
ux4g-2xl-js-stretch
ux4g-2xl-nowrap
ux4g-2xl-of-contain
ux4g-2xl-of-cover
ux4g-2xl-of-fill
ux4g-2xl-of-none
ux4g-2xl-of-scale-down
ux4g-2xl-order-0
ux4g-2xl-order-1
ux4g-2xl-order-2
ux4g-2xl-order-3
ux4g-2xl-order-4
ux4g-2xl-order-5
ux4g-2xl-order-first
ux4g-2xl-order-last
ux4g-2xl-shrink
ux4g-2xl-shrink-0
ux4g-2xl-wrap
ux4g-2xl-wrap-reverse
ux4g-absolute
ux4g-ac-around
ux4g-ac-between
ux4g-ac-center
ux4g-ac-end
ux4g-ac-start
ux4g-ac-stretch
ux4g-ai-baseline
ux4g-ai-center
ux4g-ai-end
ux4g-ai-start
ux4g-ai-stretch
ux4g-appearance-none
ux4g-as-baseline
ux4g-as-center
ux4g-as-end
ux4g-as-start
ux4g-as-stretch
ux4g-b-0
ux4g-bb
ux4g-bb-0
ux4g-bg-error
ux4g-bg-error-emphasis
ux4g-bg-error-soft
ux4g-bg-error-strong
ux4g-bg-error-strong-hover
ux4g-bg-error-stronger
ux4g-bg-error-subtle
ux4g-bg-info
ux4g-bg-info-emphasis
ux4g-bg-info-soft
ux4g-bg-info-strong
ux4g-bg-info-subtle
ux4g-bg-neutral
ux4g-bg-neutral-disabled
ux4g-bg-neutral-elevated
ux4g-bg-neutral-emphasis
ux4g-bg-neutral-soft
ux4g-bg-neutral-strong
ux4g-bg-neutral-stronger
ux4g-bg-neutral-subtle
ux4g-bg-none
ux4g-bg-overlay
ux4g-bg-primary
ux4g-bg-primary-emphasis
ux4g-bg-primary-soft
ux4g-bg-primary-strong
ux4g-bg-primary-strong-hover
ux4g-bg-primary-stronger
ux4g-bg-primary-stronger-hover
ux4g-bg-primary-subtle
ux4g-bg-secondary
ux4g-bg-secondary-emphasis
ux4g-bg-secondary-soft
ux4g-bg-secondary-strong
ux4g-bg-secondary-subtle
ux4g-bg-success
ux4g-bg-success-emphasis
ux4g-bg-success-soft
ux4g-bg-success-strong
ux4g-bg-success-subtle
ux4g-bg-tertiary
ux4g-bg-tertiary-emphasis
ux4g-bg-tertiary-soft
ux4g-bg-tertiary-strong
ux4g-bg-tertiary-subtle
ux4g-bg-warning
ux4g-bg-warning-emphasis
ux4g-bg-warning-soft
ux4g-bg-warning-strong
ux4g-bg-warning-subtle
ux4g-bl
ux4g-bl-0
ux4g-blur-0
ux4g-blur-1
ux4g-blur-2
ux4g-blur-3
ux4g-blur-4
ux4g-body-l-default
ux4g-body-l-strong
ux4g-body-m-default
ux4g-body-m-strong
ux4g-body-s-default
ux4g-body-s-strong
ux4g-body-xs-default
ux4g-body-xs-strong
ux4g-border
ux4g-border-bold
ux4g-border-control
ux4g-border-dashed
ux4g-border-dotted
ux4g-border-error
ux4g-border-error-strong
ux4g-border-info
ux4g-border-info-strong
ux4g-border-neutral-elevated
ux4g-border-neutral-strong
ux4g-border-neutral-subtle
ux4g-border-none
ux4g-border-primary
ux4g-border-primary-strong
ux4g-border-secondary
ux4g-border-success
ux4g-border-success-strong
ux4g-border-tertiary
ux4g-border-warning
ux4g-border-warning-strong
ux4g-bottom-0
ux4g-bottom-100
ux4g-bottom-50
ux4g-bottom-sm
ux4g-bottom-xs
ux4g-br
ux4g-br-0
ux4g-bs-auto
ux4g-bs-fit
ux4g-bs-full
ux4g-bs-screen
ux4g-bt
ux4g-bt-0
ux4g-control-bg-default
ux4g-cursor-not-allowed
ux4g-cursor-pointer
ux4g-d-
ux4g-d-block
ux4g-d-contents
ux4g-d-flex
ux4g-d-inline
ux4g-d-inline-block
ux4g-d-inline-flex
ux4g-d-list-item
ux4g-d-none
ux4g-d-print-block
ux4g-d-print-flex
ux4g-d-print-grid
ux4g-d-print-inline
ux4g-d-print-inline-block
ux4g-d-print-inline-flex
ux4g-d-print-none
ux4g-d-print-table
ux4g-d-print-table-cell
ux4g-d-print-table-row
ux4g-d-table
ux4g-d-table-cell
ux4g-d-table-row
ux4g-display-l-default
ux4g-display-l-strong
ux4g-display-m-default
ux4g-display-m-strong
ux4g-display-s-default
ux4g-display-s-strong
ux4g-display-xs-default
ux4g-display-xs-strong
ux4g-end-0
ux4g-end-100
ux4g-end-50
ux4g-end-overflow-md
ux4g-end-overflow-sm
ux4g-end-overflow-xs
ux4g-ff-base
ux4g-ff-display
ux4g-fixed
ux4g-fixed-bottom
ux4g-fixed-top
ux4g-flex-1
ux4g-flex-2
ux4g-flex-3
ux4g-flex-auto
ux4g-flex-col
ux4g-flex-col-reverse
ux4g-flex-column
ux4g-flex-column-reverse
ux4g-flex-fill
ux4g-flex-none
ux4g-flex-row
ux4g-flex-row-reverse
ux4g-fs-11
ux4g-fs-12
ux4g-fs-14
ux4g-fs-16
ux4g-fs-18
ux4g-fs-20
ux4g-fs-24
ux4g-fs-28
ux4g-fs-32
ux4g-fs-36
ux4g-fs-40
ux4g-fs-52
ux4g-fs-60
ux4g-fw-bold
ux4g-fw-d-bold
ux4g-fw-d-semibold
ux4g-fw-medium
ux4g-fw-regular
ux4g-fw-semibold
ux4g-gap-2xl
ux4g-gap-l
ux4g-gap-lg-l
ux4g-gap-lg-m
ux4g-gap-lg-none
ux4g-gap-lg-s
ux4g-gap-lg-xl
ux4g-gap-m
ux4g-gap-md-l
ux4g-gap-md-m
ux4g-gap-md-none
ux4g-gap-md-s
ux4g-gap-md-xl
ux4g-gap-none
ux4g-gap-s
ux4g-gap-sm-2xl
ux4g-gap-sm-l
ux4g-gap-sm-m
ux4g-gap-sm-none
ux4g-gap-sm-s
ux4g-gap-sm-xl
ux4g-gap-xl
ux4g-gap-xl-2xl
ux4g-gap-xl-l
ux4g-gap-xl-m
ux4g-gap-xl-none
ux4g-gap-xl-xl
ux4g-gap-xs
ux4g-grow
ux4g-grow-0
ux4g-h-0
ux4g-h-100
ux4g-h-25
ux4g-h-50
ux4g-h-75
ux4g-h-auto
ux4g-h-dvh
ux4g-h-fit
ux4g-h-max
ux4g-h-min
ux4g-h-screen
ux4g-heading-2xl-default
ux4g-heading-2xl-strong
ux4g-heading-2xs-default
ux4g-heading-2xs-strong
ux4g-heading-l-default
ux4g-heading-l-strong
ux4g-heading-m-default
ux4g-heading-m-strong
ux4g-heading-s-default
ux4g-heading-s-strong
ux4g-heading-xl-default
ux4g-heading-xl-strong
ux4g-heading-xs-default
ux4g-heading-xs-strong
ux4g-hpx-100
ux4g-hpx-150
ux4g-hpx-200
ux4g-hpx-300
ux4g-hpx-400
ux4g-icon-error
ux4g-icon-info
ux4g-icon-success
ux4g-icon-warning
ux4g-img-fluid
ux4g-inline-gap-2xs
ux4g-inline-gap-l
ux4g-inline-gap-m
ux4g-inline-gap-none
ux4g-inline-gap-s
ux4g-inline-gap-xs
ux4g-invisible
ux4g-is-auto
ux4g-is-fit
ux4g-is-full
ux4g-is-screen
ux4g-jc-around
ux4g-jc-between
ux4g-jc-center
ux4g-jc-end
ux4g-jc-evenly
ux4g-jc-start
ux4g-ji-center
ux4g-ji-center-safe
ux4g-ji-end
ux4g-ji-end-safe
ux4g-ji-normal
ux4g-ji-start
ux4g-ji-stretch
ux4g-js-auto
ux4g-js-center
ux4g-js-center-safe
ux4g-js-end
ux4g-js-end-safe
ux4g-js-start
ux4g-js-stretch
ux4g-label-l-default
ux4g-label-l-strong
ux4g-label-m-default
ux4g-label-m-strong
ux4g-label-s-default
ux4g-label-s-strong
ux4g-label-xl-default
ux4g-label-xl-strong
ux4g-lg-ac-around
ux4g-lg-ac-between
ux4g-lg-ac-center
ux4g-lg-ac-end
ux4g-lg-ac-start
ux4g-lg-ac-stretch
ux4g-lg-ai-baseline
ux4g-lg-ai-center
ux4g-lg-ai-end
ux4g-lg-ai-start
ux4g-lg-ai-stretch
ux4g-lg-as-baseline
ux4g-lg-as-center
ux4g-lg-as-end
ux4g-lg-as-start
ux4g-lg-as-stretch
ux4g-lg-d-block
ux4g-lg-d-flex
ux4g-lg-d-grid
ux4g-lg-d-inline
ux4g-lg-d-inline-block
ux4g-lg-d-inline-flex
ux4g-lg-d-none
ux4g-lg-d-table
ux4g-lg-d-table-cell
ux4g-lg-d-table-row
ux4g-lg-flex-col
ux4g-lg-flex-col-reverse
ux4g-lg-flex-fill
ux4g-lg-flex-row
ux4g-lg-flex-row-reverse
ux4g-lg-grow
ux4g-lg-grow-0
ux4g-lg-jc-around
ux4g-lg-jc-between
ux4g-lg-jc-center
ux4g-lg-jc-end
ux4g-lg-jc-evenly
ux4g-lg-jc-start
ux4g-lg-ji-center
ux4g-lg-ji-end
ux4g-lg-ji-start
ux4g-lg-ji-stretch
ux4g-lg-js-center
ux4g-lg-js-end
ux4g-lg-js-start
ux4g-lg-js-stretch
ux4g-lg-nowrap
ux4g-lg-of-contain
ux4g-lg-of-cover
ux4g-lg-of-fill
ux4g-lg-of-none
ux4g-lg-of-scale-down
ux4g-lg-order-0
ux4g-lg-order-1
ux4g-lg-order-2
ux4g-lg-order-3
ux4g-lg-order-4
ux4g-lg-order-5
ux4g-lg-order-first
ux4g-lg-order-last
ux4g-lg-shrink
ux4g-lg-shrink-0
ux4g-lg-wrap
ux4g-lg-wrap-reverse
ux4g-lh-14
ux4g-lh-16
ux4g-lh-18
ux4g-lh-20
ux4g-lh-24
ux4g-lh-28
ux4g-lh-32
ux4g-lh-36
ux4g-lh-44
ux4g-lh-52
ux4g-lh-72
ux4g-lh-80
ux4g-list-decimal
ux4g-list-disc
ux4g-list-none
ux4g-m-2xl
ux4g-m-2xs
ux4g-m-auto
ux4g-m-l
ux4g-m-m
ux4g-m-none
ux4g-m-s
ux4g-m-xl
ux4g-m-xs
ux4g-max-bs-full
ux4g-max-h-full
ux4g-max-h-screen
ux4g-max-is-full
ux4g-max-w-fit
ux4g-max-w-full
ux4g-max-w-none
ux4g-mb-2xl
ux4g-mb-2xs
ux4g-mb-auto
ux4g-mb-l
ux4g-mb-m
ux4g-mb-none
ux4g-mb-s
ux4g-mb-xl
ux4g-mb-xs
ux4g-md-ac-around
ux4g-md-ac-between
ux4g-md-ac-center
ux4g-md-ac-end
ux4g-md-ac-start
ux4g-md-ac-stretch
ux4g-md-ai-baseline
ux4g-md-ai-center
ux4g-md-ai-end
ux4g-md-ai-start
ux4g-md-ai-stretch
ux4g-md-as-baseline
ux4g-md-as-center
ux4g-md-as-end
ux4g-md-as-start
ux4g-md-as-stretch
ux4g-md-d-block
ux4g-md-d-flex
ux4g-md-d-grid
ux4g-md-d-inline
ux4g-md-d-inline-block
ux4g-md-d-inline-flex
ux4g-md-d-none
ux4g-md-d-table
ux4g-md-d-table-cell
ux4g-md-d-table-row
ux4g-md-flex-col
ux4g-md-flex-col-reverse
ux4g-md-flex-fill
ux4g-md-flex-row
ux4g-md-flex-row-reverse
ux4g-md-grow
ux4g-md-grow-0
ux4g-md-jc-around
ux4g-md-jc-between
ux4g-md-jc-center
ux4g-md-jc-end
ux4g-md-jc-evenly
ux4g-md-jc-start
ux4g-md-ji-center
ux4g-md-ji-end
ux4g-md-ji-start
ux4g-md-ji-stretch
ux4g-md-js-center
ux4g-md-js-end
ux4g-md-js-start
ux4g-md-js-stretch
ux4g-md-nowrap
ux4g-md-of-contain
ux4g-md-of-cover
ux4g-md-of-fill
ux4g-md-of-none
ux4g-md-of-scale-down
ux4g-md-order-0
ux4g-md-order-1
ux4g-md-order-2
ux4g-md-order-3
ux4g-md-order-4
ux4g-md-order-5
ux4g-md-order-first
ux4g-md-order-last
ux4g-md-shrink
ux4g-md-shrink-0
ux4g-md-wrap
ux4g-md-wrap-reverse
ux4g-min-bs-0
ux4g-min-bs-full
ux4g-min-bs-screen
ux4g-min-h-0
ux4g-min-h-dvh
ux4g-min-h-full
ux4g-min-h-screen
ux4g-min-is-0
ux4g-min-is-full
ux4g-min-w-0
ux4g-min-w-full
ux4g-ml-2xl
ux4g-ml-2xs
ux4g-ml-auto
ux4g-ml-l
ux4g-ml-m
ux4g-ml-none
ux4g-ml-s
ux4g-ml-xl
ux4g-ml-xs
ux4g-mr-2xl
ux4g-mr-2xs
ux4g-mr-auto
ux4g-mr-l
ux4g-mr-m
ux4g-mr-none
ux4g-mr-s
ux4g-mr-xl
ux4g-mr-xs
ux4g-mt-2xl
ux4g-mt-2xs
ux4g-mt-auto
ux4g-mt-l
ux4g-mt-m
ux4g-mt-none
ux4g-mt-s
ux4g-mt-xl
ux4g-mt-xs
ux4g-mx-2xl
ux4g-mx-2xs
ux4g-mx-auto
ux4g-mx-l
ux4g-mx-m
ux4g-mx-none
ux4g-mx-s
ux4g-mx-xl
ux4g-mx-xs
ux4g-my-2xl
ux4g-my-2xs
ux4g-my-auto
ux4g-my-l
ux4g-my-m
ux4g-my-none
ux4g-my-s
ux4g-my-xl
ux4g-my-xs
ux4g-nowrap
ux4g-o-auto
ux4g-o-hidden
ux4g-o-scroll
ux4g-o-visible
ux4g-o-x-auto
ux4g-o-x-hidden
ux4g-o-x-scroll
ux4g-o-x-visible
ux4g-o-y-auto
ux4g-o-y-hidden
ux4g-o-y-scroll
ux4g-o-y-visible
ux4g-of-contain
ux4g-of-cover
ux4g-of-fill
ux4g-of-none
ux4g-of-scale-down
ux4g-op
ux4g-op-bottom
ux4g-op-bottom-left
ux4g-op-bottom-right
ux4g-op-center
ux4g-op-left
ux4g-op-right
ux4g-op-top
ux4g-op-top-left
ux4g-op-top-right
ux4g-opacity-0
ux4g-opacity-10
ux4g-opacity-100
ux4g-opacity-20
ux4g-opacity-25
ux4g-opacity-30
ux4g-opacity-40
ux4g-opacity-5
ux4g-opacity-50
ux4g-opacity-60
ux4g-opacity-70
ux4g-opacity-75
ux4g-opacity-80
ux4g-opacity-90
ux4g-opacity-95
ux4g-order-0
ux4g-order-1
ux4g-order-2
ux4g-order-3
ux4g-order-4
ux4g-order-5
ux4g-order-first
ux4g-order-last
ux4g-p-2xl
ux4g-p-2xs
ux4g-p-l
ux4g-p-m
ux4g-p-none
ux4g-p-s
ux4g-p-xl
ux4g-p-xs
ux4g-pb-20
ux4g-pb-2xl
ux4g-pb-2xs
ux4g-pb-l
ux4g-pb-m
ux4g-pb-none
ux4g-pb-s
ux4g-pb-xl
ux4g-pb-xs
ux4g-pl-20
ux4g-pl-2xl
ux4g-pl-2xs
ux4g-pl-l
ux4g-pl-m
ux4g-pl-none
ux4g-pl-s
ux4g-pl-xl
ux4g-pl-xs
ux4g-pointer-events-auto
ux4g-pointer-events-none
ux4g-pr-20
ux4g-pr-2xl
ux4g-pr-2xs
ux4g-pr-l
ux4g-pr-m
ux4g-pr-none
ux4g-pr-s
ux4g-pr-xl
ux4g-pr-xs
ux4g-pt-20
ux4g-pt-2xl
ux4g-pt-2xs
ux4g-pt-l
ux4g-pt-m
ux4g-pt-none
ux4g-pt-s
ux4g-pt-xl
ux4g-pt-xs
ux4g-px-2xl
ux4g-px-2xs
ux4g-px-l
ux4g-px-m
ux4g-px-none
ux4g-px-s
ux4g-px-xl
ux4g-px-xs
ux4g-py-2xl
ux4g-py-2xs
ux4g-py-l
ux4g-py-m
ux4g-py-none
ux4g-py-s
ux4g-py-xl
ux4g-py-xs
ux4g-radius-bl-full
ux4g-radius-bl-l
ux4g-radius-bl-m
ux4g-radius-bl-s
ux4g-radius-bottom-full
ux4g-radius-bottom-l
ux4g-radius-bottom-m
ux4g-radius-bottom-none
ux4g-radius-bottom-s
ux4g-radius-br-full
ux4g-radius-br-l
ux4g-radius-br-m
ux4g-radius-br-s
ux4g-radius-full
ux4g-radius-l
ux4g-radius-left-full
ux4g-radius-left-l
ux4g-radius-left-m
ux4g-radius-left-none
ux4g-radius-left-s
ux4g-radius-m
ux4g-radius-none
ux4g-radius-right-full
ux4g-radius-right-l
ux4g-radius-right-m
ux4g-radius-right-none
ux4g-radius-right-s
ux4g-radius-s
ux4g-radius-tl-full
ux4g-radius-tl-l
ux4g-radius-tl-m
ux4g-radius-tl-s
ux4g-radius-top-full
ux4g-radius-top-l
ux4g-radius-top-m
ux4g-radius-top-none
ux4g-radius-top-s
ux4g-radius-tr-full
ux4g-radius-tr-l
ux4g-radius-tr-m
ux4g-radius-tr-s
ux4g-relative
ux4g-resize-none
ux4g-resize-y
ux4g-select-all
ux4g-select-auto
ux4g-select-none
ux4g-select-text
ux4g-shadow-l0
ux4g-shadow-l1
ux4g-shadow-l2
ux4g-shadow-l3
ux4g-shadow-l4
ux4g-shrink
ux4g-shrink-0
ux4g-sm-ac-around
ux4g-sm-ac-between
ux4g-sm-ac-center
ux4g-sm-ac-end
ux4g-sm-ac-start
ux4g-sm-ac-stretch
ux4g-sm-ai-baseline
ux4g-sm-ai-center
ux4g-sm-ai-end
ux4g-sm-ai-start
ux4g-sm-ai-stretch
ux4g-sm-as-baseline
ux4g-sm-as-center
ux4g-sm-as-end
ux4g-sm-as-start
ux4g-sm-as-stretch
ux4g-sm-d-block
ux4g-sm-d-flex
ux4g-sm-d-grid
ux4g-sm-d-inline
ux4g-sm-d-inline-block
ux4g-sm-d-inline-flex
ux4g-sm-d-none
ux4g-sm-d-table
ux4g-sm-d-table-cell
ux4g-sm-d-table-row
ux4g-sm-flex-col
ux4g-sm-flex-col-reverse
ux4g-sm-flex-fill
ux4g-sm-flex-row
ux4g-sm-flex-row-reverse
ux4g-sm-grow
ux4g-sm-grow-0
ux4g-sm-jc-around
ux4g-sm-jc-between
ux4g-sm-jc-center
ux4g-sm-jc-end
ux4g-sm-jc-evenly
ux4g-sm-jc-start
ux4g-sm-ji-center
ux4g-sm-ji-end
ux4g-sm-ji-start
ux4g-sm-ji-stretch
ux4g-sm-js-center
ux4g-sm-js-end
ux4g-sm-js-start
ux4g-sm-js-stretch
ux4g-sm-nowrap
ux4g-sm-of-contain
ux4g-sm-of-cover
ux4g-sm-of-fill
ux4g-sm-of-none
ux4g-sm-of-scale-down
ux4g-sm-order-0
ux4g-sm-order-1
ux4g-sm-order-2
ux4g-sm-order-3
ux4g-sm-order-4
ux4g-sm-order-5
ux4g-sm-order-first
ux4g-sm-order-last
ux4g-sm-shrink
ux4g-sm-shrink-0
ux4g-sm-wrap
ux4g-sm-wrap-reverse
ux4g-stack-gap-2xs
ux4g-stack-gap-l
ux4g-stack-gap-m
ux4g-stack-gap-none
ux4g-stack-gap-s
ux4g-stack-gap-xs
ux4g-start-0
ux4g-start-100
ux4g-start-50
ux4g-static
ux4g-sticky
ux4g-sticky-bottom
ux4g-sticky-top
ux4g-text
ux4g-text-black
ux4g-text-break
ux4g-text-capitalize
ux4g-text-center
ux4g-text-end
ux4g-text-error
ux4g-text-error-default
ux4g-text-info
ux4g-text-line-through
ux4g-text-link
ux4g-text-link-inverse
ux4g-text-link-neutral
ux4g-text-link-neutral-inverse
ux4g-text-lowercase
ux4g-text-neutral-emphasis
ux4g-text-neutral-inverse
ux4g-text-neutral-primary
ux4g-text-neutral-secondary
ux4g-text-neutral-tertiary
ux4g-text-no-underline
ux4g-text-none
ux4g-text-nowrap
ux4g-text-primary
ux4g-text-secondary
ux4g-text-start
ux4g-text-success
ux4g-text-tertiary
ux4g-text-truncate
ux4g-text-underline
ux4g-text-uppercase
ux4g-text-warning
ux4g-text-white
ux4g-text-wrap
ux4g-title-l-default
ux4g-title-l-strong
ux4g-title-m-default
ux4g-title-m-strong
ux4g-title-s-default
ux4g-title-s-strong
ux4g-top-0
ux4g-top-100
ux4g-top-50
ux4g-translate-middle
ux4g-translate-middle-x
ux4g-translate-middle-y
ux4g-va-baseline
ux4g-va-bottom
ux4g-va-middle
ux4g-va-text-bottom
ux4g-va-text-top
ux4g-va-top
ux4g-visible
ux4g-w-0
ux4g-w-100
ux4g-w-25
ux4g-w-50
ux4g-w-75
ux4g-w-auto
ux4g-w-fit
ux4g-w-max
ux4g-w-min
ux4g-w-screen
ux4g-wpx-100
ux4g-wpx-150
ux4g-wpx-200
ux4g-wpx-300
ux4g-wpx-400
ux4g-wrap
ux4g-wrap-reverse
ux4g-xl-ac-around
ux4g-xl-ac-between
ux4g-xl-ac-center
ux4g-xl-ac-end
ux4g-xl-ac-start
ux4g-xl-ac-stretch
ux4g-xl-ai-baseline
ux4g-xl-ai-center
ux4g-xl-ai-end
ux4g-xl-ai-start
ux4g-xl-ai-stretch
ux4g-xl-as-baseline
ux4g-xl-as-center
ux4g-xl-as-end
ux4g-xl-as-start
ux4g-xl-as-stretch
ux4g-xl-d-block
ux4g-xl-d-flex
ux4g-xl-d-grid
ux4g-xl-d-inline
ux4g-xl-d-inline-block
ux4g-xl-d-inline-flex
ux4g-xl-d-none
ux4g-xl-d-table
ux4g-xl-d-table-cell
ux4g-xl-d-table-row
ux4g-xl-flex-col
ux4g-xl-flex-col-reverse
ux4g-xl-flex-fill
ux4g-xl-flex-row
ux4g-xl-flex-row-reverse
ux4g-xl-grow
ux4g-xl-grow-0
ux4g-xl-jc-around
ux4g-xl-jc-between
ux4g-xl-jc-center
ux4g-xl-jc-evenly
ux4g-xl-jc-start
ux4g-xl-ji-center
ux4g-xl-ji-start
ux4g-xl-ji-stretch
ux4g-xl-js-center
ux4g-xl-js-start
ux4g-xl-js-stretch
ux4g-xl-nowrap
ux4g-xl-of-contain
ux4g-xl-of-cover
ux4g-xl-of-fill
ux4g-xl-of-none
ux4g-xl-of-scale-down
ux4g-xl-order-0
ux4g-xl-order-1
ux4g-xl-order-2
ux4g-xl-order-3
ux4g-xl-order-4
ux4g-xl-order-5
ux4g-xl-order-first
ux4g-xl-order-last
ux4g-xl-shrink
ux4g-xl-shrink-0
ux4g-xl-wrap
ux4g-xl-wrap-reverse
ux4g-z-0
ux4g-z-1
ux4g-z-2
ux4g-z-3
ux4g-z-n1
```

## Common families

- Display: `ux4g-d-block`, `ux4g-d-flex`, `ux4g-d-grid`, `ux4g-d-none`, `ux4g-d-inline`
- Flex: `ux4g-flex-row`, `ux4g-flex-column`, `ux4g-jc-start`, `ux4g-jc-center`, `ux4g-ai-center`, `ux4g-flex-wrap`
- Spacing: `ux4g-p-xs` … `ux4g-p-3xl`, `ux4g-m-xs` … `ux4g-m-3xl`
- Text: `ux4g-text-left`, `ux4g-text-center`, `ux4g-text-right`, `ux4g-text-primary`, `ux4g-text-success`
- Background: `ux4g-bg-primary`, `ux4g-bg-neutral-subtle`, `ux4g-bg-white`
- Border: `ux4g-border`, `ux4g-border-primary`, `ux4g-radius-s`, `ux4g-radius-l`
- Sizing: `ux4g-w-100`, `ux4g-h-100`, `ux4g-max-w-800`