.u-align--left Align an element to the left in larger screen sizes.
.u-align--center Align an element to the center.
.u-align--right Align an element to the right in larger screen sizes.
Responsive Media Alignment
.u-align--left This will remain floated until there is not enough room for text.
.u-align--right This stacked early when the image no longer allows room for text on the side.
.u-bg--opaque is used on this section to force a white background.
.u-bg--transparent is overriding the inline red background color.
Read the Pattern Info for documentation.
Margin Spacers
.u-space-mx adds a margin-left and margin-right.
.u-space-my adds a margin-top and margin-bottom.
.u-space-ml adds a margin-left.
.u-space-ml--small is half the space.
.u-space-ml--medium is one and a half the space.
.u-space-ml--large is double the space.
.u-space-ml--huge is 4x the space.
.u-space-ml--vast is 8x the space.
.u-space-ml--flush - override to make flush.
Padding Spacers
.u-space-px adds a padding-left and padding-right.
.u-space-py adds a padding-top and padding-bottom.
.u-space-pl adds a padding-left.
.u-space-pl--small is half the space.
.u-space-pl--medium is one and a half the space.
.u-space-pl--large is double the space.
.u-space-pl--huge is 4x the space.
.u-space-pl--vast is 8x the space.
.u-space-pl--flush - override to make flush.
Remove default vertical margin collapsing
.u-space--no-margin-collapse Margins no longer collapse.
Be aware that this can cause problems due to changing the display type.