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

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.

The Search layout is a three-column layout on larger screens. On smaller screens, the columns are placed below each other.