Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(level): expands design guidelines for level layout. #3673

Merged
merged 8 commits into from
Dec 13, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,21 @@
id: Level
section: layouts
---
Use a **Level** layout to evenly distribute content horizontally within a container.
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.
1. **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.
Loading