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.
.o-box-wrapper
Wrap areas with Small padding.
.o-box-wrapper--small
Wrap areas with Large padding.
.o-box-wrapper--large

O Flex Region

Flex Region 1

Force all items into a flexibile region.

Flex Region 2

Flex Region 3

Flex Region 4

O Media

Thumbnail

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.

Thumbnail

Reverse the image to the right side

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

Allow space to automatically be adjusted.

Pack Item 1: I have more info in me so I fill the space.

Pack Item 2

Pack Item 3

Pack Item 4

Reverse the direction.

Pack Item 1

Pack Item 2

Pack Item 3

Pack Item 4

Add small gutters.

Pack Item 1

Pack Item 2

Pack Item 3

Pack Item 4

Add large gutters.

Pack Item 1

Pack Item 2

Pack Item 3

Pack Item 4

O Flow

The Flow object creates consistent vertical spacing between siblings.

  • Flow Item 2

Flow Item 3

Flow Item 4