BT.com Design Guidelines

Padding and spacing

Dynamic component spacing

There are two scales for component spacing that change dynamically as the screens widen. One is for 320 and 600bp breakpoints; the other is for 768, 960 and 1200bp. This allows for more space between components as page elements get larger.

For example, if a vertical spacing of 20px or 40px is set on mobile, this dynamically changes to 30px and 60px respectively from the 768bp breakpoint.

Dynamic component spacing

We use vertical spacing of 10px, 20px and 30px within a component.

This spacing stays the same within the component from mobile through to desktop.

Padding within containers

We use padding of 20px top, 20px bottom, 20px left and 20px right when text appears within a ‘container’ or similar device – for example, in the ‘Hero’ plinth.