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
Media Card / 2 Col / Black
Lorem Ipsum
Media Card / 2 Col / White
Lorem Ipsum
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
Media Card / 3 Column / Black
Lorem Ipsum
Dolor Sit
Media Card / 3 Column / White
Lorem Ipsum
Dolor Sit
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
Media Row / 50-50 / Black
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
Media Row / 66-33 / Black
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
Media Row / 42-58 / Black
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
Highlight / Image Right
