Layout

Displays content in a responsive column layout.

GuidelinesReact

When to use

To choose the best component for your use case, see our developing layouts guide.

  • To ensure designs don’t break at different sizes.
  • To use a predefined or your own layout to show content in the right place at any size.

When not to use

Component status

Figma

React

iOS

Android

N/A
Released
N/A
N/A

Behavior

Offer similar content to everyone

Users approach their interactions with your content similarly no matter their device. They’re looking for information or to accomplish a task. If a user can’t find that information or feature on your mobile site or app, they assume you don’t have it.

Make sure your content is available everywhere. Change its form so it fits best in the space available and fits user expectations for the device. But keep it present.

When choosing a layout with columns that change, make sure the same content appears no matter the width. If a column is hidden, move its content to a different one.

Use progressive disclosure to keep content close by. Consider a Hide component to vary what appears in each column.

Look & feel

Common properties

In all of the layouts, there is one column designed to hold the main content. There’s always a maximum width defined so it doesn’t cover the entire width of large screens. And all of the content is centered in the middle of the screen.

Different layouts

Booking layout

The Booking layout is a two-column layout on larger screens. On smaller screens, the second column is placed underneath the first.

MMB layout

The MMB layout is a one-column layout with the same visibility no matter the screen size.

Search layout

The Search layout is a three-column layout with one column always visible and the others variable.