A note on layouts

These are special mechanisms that can utilize the blocks on the Pattern Library page and arrange them into preset layouts.

Whenever two or more blocks are to be nested within a layout, the tables for each included block should be placed between a paragraph containing only -layout MODIFIER LAYOUT_NAME- (we’ll call this the opening tag) and another paragraph containing only -end layout- (the closing tag).

Whenever more blocks are placed within a layout that can fit in a row, extra blocks will wrap to subsequent rows.

The LAYOUT_NAME can be replaced with two-up, three-up, 70-30, and four-up. The MODIFIER is optional. See supported modifiers below.

Screen Sizes

This page will refer to small, medium, large, and extra-large screens.

• Small screens are typically below 48rem (768px) wide.
• Medium screens are between 48rem to 80rem (768px to 1280px) wide.
• Large screens are between 80rem to 105rem (1280px to 1680px) wide.
• Extra-large screens are above 105rem (1680px) wide.

Two-Up

The Two-Up layout allows for two or more blocks in a 50/50 two-column layout (each column takes up an equal amount of space on the grid). On small screens, the blocks will stack vertically. The layout opening tag should say -layout two-up-.

The example below uses Card blocks.

-layout two-up-

-end layout-

Three-Up

The Three-Up layout allows for three or more blocks in a three-column layout (each column takes up an equal amount of space on the grid). On medium screens, the blocks will collapse into a two-up layout. On small screens, the blocks will stack vertically. The layout opening tag should say -layout three-up-.

The example below uses Card blocks.

-layout three-up-

-end layout-

70/30

The 70/30 layout allows for two or more blocks in a two-column layout (the first column takes up 2/3 of the space in a row, while the second block takes up the remaining 1/3). On small screens, the blocks will stack vertically. The layout opening tag should say -layout 70-30-.

The example below uses the Section Header and Card blocks.

-layout 70-30-

-end layout-

Four-Up

The Four-Up layout allows for four or more blocks in a four-column layout (each column takes up an equal amount of space on the grid). On medium screens, the blocks will collapse into a two-up layout. On small screens, the blocks will stack vertically. The layout opening tag should say -layout four-up-.

The example below uses the Card block.

-layout four-up-

-end layout-

Layout Modifiers

Spacious

A layout with the spacious modifier has increased spacing between layout items.

The example below uses the Link-List and Callout blocks, and its opening tag says –layout spacious two-up-.

-layout spacious two-up-

-end layout-

Horizontal Scroll

When the scrolling modifier is added to a layout, it becomes a container that the user can horizontally scroll through contained blocks on small screens. On a 36rem (or 576px)-wide screen and above, it behaves as the regular unmodified layout. The layout opening tag should say -layout scrolling four-up-.

The example below uses Card blocks, and its opening tag says -layout scrolling four-up-.

-layout scrolling four-up-

-end layout-