Layout

We have three types of page layouts: mini (max width 28rem), midi (max width 48rem), and maxi (max width 56 rem).

Mini

Used in Bulb Account on login screens where there is a single clear user action and limited content to be displayed.

Midi

Typically used in step-by-step flows, such as FIT and Warm Home Discount sign up forms, Join, and the Move Out flow in Bulb Account.

Maxi

Used on most screens in Bulb Account and on the Marketing site, where the layout breaks into multiple columns.

These are always centered aligned on the page using <PageContainer />, which also provides a horizontal padding of Earth. This prevents the content touching the window edges in narrow viewports.

👀 See also:

Panels section provides an example of <PageContainer /> that provides these layouts.

Layout combined with typography

The table below shows how layout and typography settings are combined across Bulb products to achieve different purposes. 16px and 20px are the base font sizes, 48rem and 56rem are the maximum container widths.

Product-667668-10231024-16941695+
Bulb Account16px16px
stretch
20px
56rem (1120px)
N/A
Join, FIT, WHD, Move Out20px20px
48rem (960px)
20px
48rem (960px)
26px
48rem (1248px)
Marketing20px20px20px
56rem (1120px)
26px
56rem (1456px)
👀 See also:

The Typography section provides more detail on typographic scale at different break points.