Display • Natura11y
Jump to main contentJump to website footer
shallow focus photo of blue and green peacock

Photo by Julian Andres Carmona Serrato

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