Full-width column (spans 12 columns)
Half-width column (spans 6/12 columns)
Half-width column (spans 6/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Two thirds-width column (spans 8/12 columns)
Third-width column (spans 4/12 columns)
Quarter width column (spans 3/12 columns)
Three-quarter width column (spans 9/12 columns)

Full-width column (spans 12 columns)
Half-width column (spans 6/12 columns)
Half-width column (spans 6/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Two thirds-width column (spans 8/12 columns)
Third-width column (spans 4/12 columns)
Quarter width column (spans 3/12 columns)
Three-quarter width column (spans 9/12 columns)

Full-width column (spans 12 columns)
Half-width column (spans 6/12 columns)
Half-width column (spans 6/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Two thirds-width column (spans 8/12 columns)
Third-width column (spans 4/12 columns)
Quarter width column (spans 3/12 columns)
Three-quarter width column (spans 9/12 columns)

Full-width column (spans 12 columns)
Half-width column (spans 6/12 columns)
Half-width column (spans 6/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Two thirds-width column (spans 8/12 columns)
Third-width column (spans 4/12 columns)
Quarter width column (spans 3/12 columns)
Three-quarter width column (spans 9/12 columns)

Full-width column (spans 12 columns)
Half-width column (spans 6/12 columns)
Half-width column (spans 6/12 columns)

Placeholder image
Half-width column (spans 6/12 columns)
Placeholder image
Half-width column (spans 6/12 columns)

Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)
Third-width column (spans 4/12 columns)



Content hero
Main content area

Main content area

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum corrupti tempora nam nihil qui mollitia consectetur corporis nemo culpa dolorum! Laborum at eos deleniti consequatur itaque officiis debitis quisquam! Provident!

Footer

Main content area

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum corrupti tempora nam nihil qui mollitia consectetur corporis nemo culpa dolorum! Laborum at eos deleniti consequatur itaque officiis debitis quisquam! Provident!

Footer

Main content area

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum corrupti tempora nam nihil qui mollitia consectetur corporis nemo culpa dolorum! Laborum at eos deleniti consequatur itaque officiis debitis quisquam! Provident!

Footer

Main content with no bottom padding...
.content__flush-bottom is very useful when you have a content block inside of .content_main with a background and flush sides.
Footer

Main content
Footer

Main content
Footer

Main content...
Content block
Content block
Content block

Main content...
Content block with top border.

Main content...
Content block with right border.

Main content...
Content block with bottom border.

Main content...
Content block with left border.

Main content...
Content block with borders on all sides.

Main content...
Content block with no top margin.
Content block

Main content...
Content block with no bottom margin.
Content block with no top margin.

Main content...

Main content...

Main content...
Content block with a background

Main content...
Content block with a background and flush sides

Main content...
Content block with reduced top margin & added top padding and border.

Content block with reduced bottom margin & added bottom padding and border.
Content...

Sub content block
Sub content block
Sub content block

Content block that is also a content column. Notice how my top margins only exist on smaller screens when I need to stack vertically.
Content block that is also a content column. Notice how my top margins only exist on smaller screens when I need to stack vertically.

Content hero
Main content area

Wrapper

.wrapper.wrapper__match-content Placeholder image

.content_wrapper .content_main Placeholder image


Featured

Feature title

Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.

Read more about the feature

Hero title

Hero text goes here

Call to action