Skip to contentSkip to footer
shallow focus photo of blue and green peacock

Photo: Julian Andres Carmona Serrato

Display

Introduction

Change the display property of an element.

Display Utilities

Natura11y provides the following display utilities:

HTML
      <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>
      <div class="display-initial">...</div>
Figure 1

Breakpoint Modifiers

Display utilities accept breakpoint modifiers.

HTML
      <!-- With breakpoint modifier -->


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

Flex

Grid