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.