Level

The level layout is designed to distribute space evenly between sections of content and center them horizontally.

Elements

By default, level items are placed on the page horizontally and wrap. The level layout is not responsive, but items will wrap as the viewport is resized.

A level layout will contain:

  1. Level: The level container, which holds all level items.
  2. Level item: An individual section of content to be placed in the level container.

Usage

The level layout can be used to ensure that sections of content are neatly and evenly displayed across the width of a UI.

Variations

To adjust spacing between items, you can apply gutters.

We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.