Layout

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.

• For content only on large screens—use a desktop component.
• For content only on small screens—use a Mobile component.
• For more control over what appears on different screen sizes—use a Hide component.

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.

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.

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

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

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