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 | -667 | 668-1023 | 1024-1694 | 1695+ |
---|---|---|---|---|
Bulb Account | 16px | 16px stretch | 20px 56rem (1120px) | N/A |
Join, FIT, WHD, Move Out | 20px | 20px 48rem (960px) | 20px 48rem (960px) | 26px 48rem (1248px) |
Marketing | 20px | 20px | 20px 56rem (1120px) | 26px 56rem (1456px) |
👀 See also:The Typography section provides more detail on typographic scale at different break points.