Display • Natura11y
shallow focus photo of blue and green peacock

Display

Introduction

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