1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
---
id: Level
section: layouts
cssPrefix: pf-v6-l-level
---import './Level.css'
## Examples
### Two items
```html
<div class="pf-v6-l-level">
<div class="pf-v6-l-level__item">
content
<br />content
<br />content
</div>
<div class="pf-v6-l-level__item">content</div>
</div>
```
### Three items
```html
<div class="pf-v6-l-level">
<div class="pf-v6-l-level__item">content</div>
<div class="pf-v6-l-level__item">
content
<br />content
<br />content
</div>
<div class="pf-v6-l-level__item">content</div>
</div>
```
### With gutters
```html
<div class="pf-v6-l-level pf-m-gutter">
<div class="pf-v6-l-level__item">content with gutter</div>
<div class="pf-v6-l-level__item">content with gutter</div>
<div class="pf-v6-l-level__item">
content
<br />content
<br />content
</div>
</div>
```
## Documentation
### Overview
The level layout is designed to distribute space between children evenly and center them on the x-axis. By default the children are placed horizontally and wrap responsively.
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-l-level` | `<div>`, `<section>`, or `<article>` | Initializes the level layout |
| `.pf-v6-l-level__item` | `<div>` | Explicitly sets a child of the level. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
| `.pf-m-gutter` | `.pf-v6-l-level` | Adds space between children by using the globally defined gutter value. |
|
