---
name: Layout
menu: Patterns
parent: Styles
route: /styles/layout
---

# 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.

![](https://storage.googleapis.com/static.bulb.co.uk/design/images/layout-containers.png)

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.

```specimen-see-also
[Panels](/patterns/panel) 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.

```specimen-table
rows:
  - Product: Bulb Account
    -667: 16px
    668-1023: 16px  <br/>stretch
    1024-1694: 20px  <br/>56rem (1120px)
    1695+: N/A
  - Product: Join, FIT, WHD, Move Out
    -667: 20px
    668-1023: 20px <br/>48rem (960px)
    1024-1694: 20px <br/>48rem (960px)
    1695+: 26px <br/>48rem (1248px)
  - Product: Marketing
    -667: 20px
    668-1023: 20px
    1024-1694: 20px  <br/>56rem (1120px)
    1695+: 26px <br/>56rem (1456px)
```

```specimen-see-also
The [Typography](/styles/typography) section provides more detail on typographic scale at different break points.
```
