@guardian/src-layout v3.13.0

Layout

📣 For more context and visual guides relating to Layout usage on the Source Design System website

Install

$ yarn add @guardian/src-layout

Container

Centres the page content and applies a width that corresponds to the grid at the current breakpoint.

API

See storybook.

How to use

For context and visual guides relating to Container usage see the Source Design System website.

Stack

Children will be stacked one on top of the other.

API

See storybook.

How to use

For context and visual guides relating to Stack usage see the Source Design System website.

Columns

Columns will be arranged side by side on a single row, with the specified width.

Use Columns in conjunction with Container to help the columns align neatly with the Guardian's grids.

API

See storybook.

How to use

For context and visual guides relating to Columns usage see the Source Design System website.

Hide

Hide a component above or below a certain breakpoint

API

See storybook.

How to use

For context and visual guides relating to Hide usage see the Source Design System website.

Inline

API

See storybook.

How to use

For context and visual guides relating to Inline usage see the Source Design System website.

Tiles

API

See storybook.

How to use

For context and visual guides relating to Tiles usage see the Source Design System website.