cf-layout

Content layouts

Standard content 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)

Large gutters modifier

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

Content layout column dividers

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 bar

Content line

A 1 pixel edge to edge bar that can divide content.

Main content and sidebar

Content hero
Main content area

Left-hand navigation layout

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

Right-hand sidebar layout

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

Narrow content column option

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

Flush bottom modifier

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

Flush top modifier (only on small screens)

Main content
Footer

Flush all modifier (only on small screens)

Main content
Footer

Block

Main content…

Content block 1
Content block 2
Content block 3

Border-top modifier

Adds top border to .block.

Main content…

Content block with top border.

Border-right modifier

Adds right border to .block.

Main content…

Content block with right border.

Border-bottom modifier

Main content…

Content block with bottom border.

Border-left modifier

Main content…

Content block with left border.

Border modifier

Main content…

Content block with borders on all sides.

Flush-top modifier

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

Flush-bottom modifier

Plain content.
Content block with no bottom margin.
Plain content.

Flush-sides modifier

Main content...

Flush modifier

Main content...
</section>

Background modifier

Main content...
Content block with a background

Background and flush-sides modifier combo example

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

Padded-top modifier

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

Padded-bottom modifier

Breaks bottom margin into margin & padding. Useful in combination with block__border-bottom to add padding between block contents & border.

Main content…

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

Sub blocks

Sub content block
Sub content block
Sub content block

Mixing content blocks with content layouts

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.

Bleedbar sidebar styling

Content hero
Main content area

cf-grid helpers

Featured content module

Featured content module, like a hero, consists of headline/text/optional call to action along with a visual. It is intended to be used in a main content column next to a sidebar.

Text is full width & displayed above the visual in the default/mobile view. At larger screen sizes, the text occupies a fixed portion of the screen (equal to the width of 5 of 12 columns at 701px & 3 of 12 columns at 901px for desktop). The visual occupies the remaining space. The visual should be 640x360 (16x9 ratio) and resize to fit the height of the FCM with a static width and is anchored left when it becomes too wide for the available space.

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

Featured content module - Right-anchored image

Featured (Map)

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

Featured content module - Center-anchored image

Featured (Video)

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

Heroes

See the full-width hero demo page