Documentation

Design System Navigation

Spacing

Adjust whitespace with horizontal and vertical spacing with `block` level `margin` adjustment helpers.

Usage

When to Use

Spacing classes can be applied to block level items to provide a margin on that item. (For padding adjustments, see Padding.)

Base Unit

The base space size is 1.25rem or 20px.

Spacing Wrappers

ALPS uses a technique for vertical spacing called “Lobotomized Owls” and is detailed in an articled titled “Axiomatic CSS and Lobotomized Owls”. The classes, detailed below and starting with spacing, add top margins to the elements inside the wrapper the spacing class is applied to. The margins are based on default spaces of 20 pixels on mobile and 30 pixels on desktop.

Class Name Description
u-space

Use this class to apply a default margin to all four sides of an item.
u-space--top

Use this class to apply a default margin to the top of an item.
u-space--bottom

Use this class to apply a default margin to the bottom of an item.
u-space--right

Use this class to apply a default margin to the right of an item.
u-space--left

Use this class to apply a default margin to the left of an item.
u-space--quarter

Use this class to apply a quarter size margin to an item.
u-space--quarter--top

Use this class to apply a quarter size margin to the top of an item.
u-space--quarter--bottom

Use this class to apply a quarter size margin to the bottom of an item.
u-space--quarter--right

Use this class to apply a quarter size margin to the right of an item.
u-space--quarter--left

Use this class to apply a quarter size margin to the left of an item.
u-space--half

Use this class to apply a half size margin to an item.
u-space--half--top

Use this class to apply a half size margin to the top of an item.
u-space--half--bottom

Use this class to apply a half size margin to the bottom of an item.
u-space--half--right

Use this class to apply a half size margin to the right of an item.
u-space--half--left

Use this class to apply a half size margin to the left of an item.
u-space--double

Use this class to apply a double size margin to an item.
u-space--double--top

Use this class to apply a double size margin to the top of an item.
u-space--double--bottom

Use this class to apply a double size margin to the bottom of an item.
u-space--double--right

Use this class to apply a double size margin to the right of an item.
u-space--double--left

Use this class to apply a double size margin to the left of an item.
u-space--triple

Use this class to apply a triple size margin to an item.
u-space--triple--top

Use this class to apply a triple size margin to the top of an item.
u-space--triple--bottom

Use this class to apply a triple size margin to the bottom of an item.
u-space--triple--right

Use this class to apply a triple size margin to the right of an item.
u-space--triple--left

Use this class to apply a triple size margin to the left of an item.
u-space--quad

Use this class to apply a quad size margin to an item.
u-space--quad--top

Use this class to apply a quad size margin to the top of an item.
u-space--quad--bottom

Use this class to apply a quad size margin to the bottom of an item.
u-space--quad--right

Use this class to apply a quad size margin to the right of an item.
u-space--quad--left

Use this class to apply a quad size margin to the left of an item.
u-space--zero

Use this class to apply a margin of 0rem to an item.
u-space--zero--top

Use this class to apply a margin of 0rem to the top of an item.
u-space--zero--bottom

Use this class to apply a margin of 0rem to the bottom of an item.
u-space--zero--right

Use this class to apply a margin of 0rem to the right of an item.
u-space--zero--left

Use this class to apply a margin of 0rem to the left of an item.
u-spacing

Use this class to apply a default top margin to the elements inside the container.
u-spacing--quarter

Use this class to apply 1/4 of the default top margin to the elements inside the container.
u-spacing--double

Use this class to apply 2 times the default top margin to the elements inside the container.
u-spacing--triple

Use this class to apply 3 times the default top margin to the elements inside the container.
u-spacing--quad

Use this class to apply 4 times the default top margin to the elements inside the container.
u-spacing--zero

Use this class to apply a top margin of 0 to the elements inside the container.
u-spacing--unitl-small

Use this class to apply the default top margin to the elements inside the container until the viewport reaches the small size.
u-spacing--unitl-medium

Use this class to apply the default top margin to the elements inside the container until the viewport reaches the medium size.
u-spacing--after-medium

Use this class to apply the default top margin to the elements inside the container after the viewport reaches the medium size.
u-spacing--double--until-large

Use this class to apply double the default top margin to the elements inside the container after the viewport reaches the large size.
u-spacing--double--until-xxlarge

Use this class to apply double the default top margin to the elements inside the container after the viewport reaches the xxlarge size.

Fine print

  • Last updated: