Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-text
max-width-small
max-width-xsmall
max-width-xxsmall
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
Grid
Grid Utilities
u-grid-custom
u-grid-breakout
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-subgrid
Column Utilities
u-column-custom
u-column-full
u-column-indent
u-column-1
u-column-2
u-column-3
u-column-4
u-column-5
u-column-6
u-column-7
u-column-8
u-column-9
u-column-10
u-column-11
u-column-12
Order Utilities
u-order-first
u-order-first-desktop
u-order-first-tablet
u-order-last
u-order-last-desktop
u-order-last-tablet
Spacing
Gap Utilities
u-gap-none
u-gap-main
u-gap-main
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large
Section Spacing Attributes
data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"
Gap Utilities
u-gap-none
u-gap-main
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large