Back to Components

Small-scale Layout

Overview

The layout component provide common ways to arrange the content of a screen. The layout component controls the spacing of its content. For horizontal layout types, the layout component will vertically center the content items.

Best Practices

Layouts should:

  • Be used for small-scale layout tasks
  • Be used when you want to lay out a horizontal row of content OR
  • Be used when you want to layout out a vertical stack of content that would otherwise be inline

Layouts should not:

  • Be used for large-scale page layout. For large-scale layouts, consider using a Card within Page
  • Wrap content onto multiple lines. The content inside a layout should be designed as not to exceed the available horizontal space.

Examples

Basic layout

The basic layout arranges content into a single row with even spacing between the content items.

Code example
Playroom

Right layout

The right layout arranges content into a single row, aligned to the right edge of its container, with even spacing between the content items. The right layout can be used, for example, for aligning action buttons within a card.

Code example
Playroom

Equal layout

The equal layout arranges content into equal widths filling a single row. The equal layout can be used, for example, for evenly spacing spending statistics across a single row.

Code example
Playroom

Split layout

The split layout arranges content into two groups on a single row, one aligned to the left edge of its container with the other to the right edge. The split layout will usually be combined with other layout arrangements inside. The split layout can be used, for example, for aligning secondary buttons for next steps to the bottom left of a card, while aligning primary calls-to-action to the bottom right of a card.

Code example
Playroom

Stack layout

The stack layout arranges content into a vertical column. The stack layout can be used, for example, when targeting small screen sizes, to organize content into stacked columns. In many cases, a stack layout may not be necessary; block level components will naturally stack in a container, and container components such as EzCard will apply consistent spacing between content items.

Code example
Playroom

Tile layout

The tile layout arranges content in a grid with equal spacing between rows and columns. Tile layouts are a good choice when the number of items in the layout may vary, or when the exact number of items is unknown, since the layout will automatically wrap items into rows. The number of columns can be varied by screen size, for example, if you wanted a single column on mobile and three columns otherwise.

  • Use a tile layout for content that benefits from being laid out in columns of uniform width.
Code example
Playroom

Fixed number of columns

Responsive number of columns

Cluster layout

The cluster layout, like the tile layout, arranges content across columns and rows. Unlike tile layouts however, cluster layouts are perfect for content that may vary in shape and length. Instead of conforming to a grid of a fixed number of columns, content within the cluster layout is distributed to fill the available space as best it can. Left-aligned content may have a 'ragged' right edge, because each line can vary in length. Unlike the left and right layouts, content is allowed to wrap into evenly spaced rows.

Code example
Playroom

Aligning content within a layout

Content inside a layout is often variable in size and as such it may be necessary to align content within a container:

  • Horizontal alignment

Some layouts, such as equal, split and tile distribute items across the horizontal space in the container to fill the available space. In the remaining layouts, if the content width does not fill the available space, the layout may need to align the items within the available space. The basic and right layouts align content to the left and right respectively. The cluster layout offers an alignX prop to allow the content to be horizontally aligned either left, right or center. The stack layout offers the same left, right or center options as the cluster layout, but also offers a stretch option, which is the default for stack layouts, and allows layout items to grow to fill the container (if unconstrained in width).

  • Vertical alignment

In layouts that position content into rows (i.e. all layouts except stack), content with varying height may cause there to be extra whitespace around the top and/or bottom of content items. By default layouts will typically center content within the container, but these layouts offer an alignY prop to allow the content to be vertically aligned top, bottom, center or stretch.

Code example
Playroom

Align vertically (top)

Align horizontally (right)

Combining Layouts

The layout component can be nested in order to provide more complex or unique arrangements of components. For example, a toolbar might use a basic layout inside of an equal layout, to arrange logical groupings of action buttons into visual groups with even spacing between the grouped buttons.

Code example
Playroom

Basic Layouts nested in a Split Layout

Responsive Layouts

The layout component can be used to optimize the layout of content to suit various device sizes. For example, a group of action buttons may use the stack layout on small screens where horizontal space limited, and the basic layout on larger screens.

If you provide more than one layout, you should think of it as progressive enhancement. The base layout will be applied from the smallest devices up, until reaching the other layout. Then that second layout will takeover for larger devices. You can control where the transition happens.

Code example
Playroom

Stack on small screens, equal otherwise

Current theme

Theme

Contents