Layout

Layout classes are page scaffolding, not components: they only decide how regions of a page occupy space. They ship in the design system CSS; there are no React wrappers, so use the classes directly in any framework.

Grid presets

The grid is a 12-column CSS grid with a fixed 32px gutter between columns. Page margins (the space either side of the content) are fluid: they grow linearly with the viewport from 16px at the mobile frame (375px) to 128px at the desktop frame (1512px), where the container stops growing and centres.

Range	Columns	Column gutter	Page margins	Container width
below 800px	stacked, full width	none	16px to 58px	fluid
800px to 1023px	12	32px	58px to 80px	fluid
1024px and above	12	32px	80px to 128px	max 1512px

Mobile (below 800px)

Every column stacks to full width. Use for phones and small tablets in portrait.

Tablet (800px to 1023px)

The 12 columns apply. Use fraction classes to span them; -from-desktop variants still stack here.

Desktop (1024px and above)

The container caps at 1512px (128px margins + 1256px of content) and centres on wider screens. -from-desktop fraction variants take effect here.

Breakpoint tokens

Breakpoints are named @custom-media queries, inlined at build time by Lightning CSS. Components reference the names, never the numbers.

Token	Applies	Grid behaviour
--mobile	below 800px	columns stack full width
--tablet	800px and up	fraction classes take their spans
--desktop	1024px and up	-from-desktop variants take effect

The page margin needs no breakpoint at all: it is one clamp, clamp(16px, 9.85vw − 1.31rem, 128px), which passes through both design anchors (16px at 375, 128px at 1512) and holds beyond.

Page scaffold

Put govbb-page on the <body>: it makes the page fill the viewport and pins the footer to the bottom when content is short.

Every page wraps its content in the width container, which owns the side margins, and in the main wrapper, which owns the vertical breathing room and carries the main-content id that a skip link targets. Both classes normally sit on the same <main>:

<body class="govbb-page">
  <!-- official banner, header -->
  <main class="govbb-width-container govbb-main-wrapper" id="main-content">
    <div class="govbb-grid-row">
      <div class="govbb-grid-column-two-thirds">
        <h1 class="govbb-text-h1">Page title</h1>
      </div>
    </div>
  </main>
  <!-- footer -->
</body>

Split them only when something has to line up with the page column while sitting outside the main landmark — a page-level notice, say. Then the container is a wrapping <div> and the <main> keeps the wrapper:

<div class="govbb-width-container">
  <div class="govbb-status-banner govbb-status-banner--alpha">…</div>
  <main class="govbb-main-wrapper" id="main-content">…</main>
</div>

The header, official banner and footer sit outside the width container and use it internally for their own content, so they can paint full-bleed backgrounds.

The container centres itself with automatic side margins once the page is wider than 1512px. Inside the govbb-page column that would stop it stretching, so the stylesheet keeps a direct child of govbb-page at full width — you do not need to set a width yourself.

Grid columns

<div class="govbb-grid-row">
  <div class="govbb-grid-column-two-thirds">
    <p>Main content</p>
  </div>
  <div class="govbb-grid-column-one-third">
    <p>Related links</p>
  </div>
</div>

Available fractions: full, three-quarters, two-thirds, one-half, one-third, one-quarter. Fractions in a row should sum to a whole; a row with leftover tracks simply leaves trailing space.

Each fraction also has a -from-desktop variant (for example govbb-grid-column-one-third-from-desktop) that stays full width through tablet and only takes its fraction on desktop. Use it when a sidebar is too cramped at tablet widths.

Rows nest: a govbb-grid-row inside a column starts a fresh 12-column grid scoped to that column’s width.

When to use the grid

Use the grid whenever a page places content side by side: a main column with a sidebar, cards in halves or quarters, or a form constrained to two-thirds so line lengths stay readable.

Do not use the grid for spacing inside a component: components own their internal layout. Do not nest grids more than one level deep; if a layout needs that, simplify the page instead.