Columns

The majority of site content should be built using the column layout options on this page. It's important to break the site into manageable chunks of content that a user can easily scan without having to do too much reading. Headlines are VERY important, many users will navigate by scanning page headlines. For landing pages, build a series of modules that link to deeper pages of content, but make sure if the user only reads the landing page they will have a 50,000ft view of what is in that section. Use an "Intro" module above the columns if the relationship between the items in the grid needs explanation.

Media Card / 2 Col

3 background color options: black, light gray and white. If you add more than 2 items to the grid they will wrap onto the line below. Ideally use blocks of two or four, if you have three or six items consider the 3 Col module. Do not mix and match bg colors if the modules abutt each other.

Media Card / 2 Col / Gray

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Lorem Ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Made This?

Media Card / 2 Col / Black

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Lorem Ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Made This?
Mm card 50 50 1456

Media Card / 2 Col / White

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Mm card 50 50 1456

Lorem Ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.

Media Card / 3 Col

3 background color options: black, light gray and white. If you add more than 3 items to the grid they will wrap onto the line below. Ideally use blocks of three or six, but don't worry if you have an odd number of items. Do not mix and match bg colors if the modules abutt each other.

Media Card / 3 Column / Gray

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Lorem Ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?
Mm card 33 33 33 968

Dolor Sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.

Media Card / 3 Column / Black

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Lorem Ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?
Mm card 33 33 33 968

Dolor Sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.

Media Card / 3 Column / White

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Lorem Ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?

Dolor Sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.

Media Row / 50-50

2 background color options: black and light gray. This module does not wrap, but similar effect can be achieved by adding a second module below (if you do set the top module's padding bottom to "None") to create the standard 5px gap. If stacking this module on top of each other bg color variations are ok.

Media Row / 50-50 / Gray

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Media Row / 50-50 / Black

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?

Media Row / 66-33

2 background color options: black and light gray. This module does not wrap, but similar effect can be achieved by adding a second module below (if you do set the top module's padding bottom to "None") to create the standard 5px gap. If stacking this module on top of each other bg color variations are ok.

Media Row / 66-33 / Gray

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Media Row / 66-33 / Black

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?

Media Row / 42-58

2 background color options: black and light gray. This module does not wrap, but similar effect can be achieved by adding a second module below (if you do set the top module's padding bottom to "None") to create the standard 5px gap. If stacking this module on top of each other bg color variations are ok.

Media Row / 42-58 / Gray

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Media Row / 42-58 / Black

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?

Highlight

The highlight module can have its image toggled to appear on either the left or right. This module breaks out of the standard page grid, giving it more visibility. Use this module to draw a users attention to important content.

Highlight / Image Left

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
All Modules

Highlight / Image Right

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, quam nam commodi dolor modi nostrum dolore magni, architecto, delectus necessitatibus error ipsam sapiente provident impedit dolorum. Harum quam nihil eveniet.
Who Built This?