A layout will apply to a viewport width ≥ its defined breakpoint and < the upper breakpoint(s).

This because the Grid system is mobile-first, and the bc-media mixin uses min-width instead of max-width.

Wide page layout

12 grid columns for full container-width wide content.

Use for:

• Big tables
• Wide graphs
• Hero or banner content

☞ Wide content layout test file.

Basic page layout

Page without sidebar.

Use for pages that:

• Don’t need a sidebar or Vertical navigation
• Feature centered [primary] content.

The main content has:

• 8 grid columns at width ≥ lg
• 10 grid columns at width < lg and ≥ md.

☞ Basic page layout test file.

Supporting sidebar layout

8 grid columns for the main content, and 4 columns for the sidebar.

Use for pages that have main content and a related, secondary <aside> or sidebar

At viewport width ≥ xm and < sm, the layout uses all 12 grid columns (full width), and so the sidebar appears below the main content.

☞ Supporting sidebar layout test file.

Important sidebar layout

8 grid columns for the main content, and 4 grid columns for the sidebar. The sidebar should contain information that is important.

Use for pages that have main content but a sidebar with information that comes first in the markup order

Don’t use for pages that have long sidebar information. This will push the main content further down at screen width ≥ xm and ≤ sm.

At viewport width ≥ xm and < sm, the layout use 12 grid columns (full width) and the sidebar appears above the main content.

☞ Important sidebar layout test file.

Page with navigation

8 grid columns for the main content, and 3 grid columns for the side navigation.

Use for pages with vertical navigation on the left and pages with data filters on the left

Don’t use for pages that have main content and a sidebar with information on the left.

☞ Page with navigation layout test file.

Card grid

Cards arranged in a grid.

Each card has:

• 3 grid columns at width ≥ lg
• 4 grid columns at width < lg and ≥ md
• 6 grid columns at width < md and ≥ sm
• 12 grid columns at width < sm.

☞ Card grid layout test file.

• Grid (Layout)
• Guided Setup Layouts (Layout)
• Onboarding Layouts (Layout)