Display

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

Introduction

Display Utilities

Breakpoint Modifiers