O Box

.o-box - The Box object simply boxes off content with add a $spacer unit of padding.
.o-box--small - This is a Small Box object with some helper classes to make it more visible.
.o-box--large - This is a Large Box object.
.o-box--flush - Removes padding previously applied by .o-box when an override is needed.

O Box Wrapper

The Box Wrapper object boxes off multiple regions with padding and opaque background.
Wrap areas with Small padding.
Wrap areas with Large padding.

O Flex Region

Flex Region 1

Force all items into a flexibile region.

Flex Region 2

Flex Region 3

Flex Region 4

O Media

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

O Pack

Pack Item 1

Force all items into a horizontal space.

Pack Item 2

Pack Item 3

Pack Item 4