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

Page Footer

Natura11y is an inclusive design ecosystem. It's created and maintained by Avidano Digital, a strategic communications agency serving nonprofit and social impact organizations.

© 2025 - Natura11y Inclusive Framework.All Rights Reserved.