Display • Natura11y Inclusive Framework

Change the display property of an element.

Display Utilities

Natura11y provides the following display utilities:

<div class="display-block">...</div>
<div class="display-inline">...</div>
<div class="display-inline-block">...</div>
<div class="display-flex">...</div>
<div class="display-inline-flex">...</div>
<div class="display-grid">...</div>
<div class="display-inline-grid">...</div>
<div class="display-none">...</div>

Figure 1

Breakpoint Modifiers

Display utilities accept breakpoint modifiers.

<!-- With breakpoint modifier -->

<div class="display-none display-block--lg">...</div>

Figure 2