Visibility

Utilize visibility utilities to regulate an element's visibility without changing how it appears.

Using the visibility utilities, developer may control the visibility of items. These utility classes have no impact on layout and make no changes to the display value. Even when they're hidden, page items still occupy space.

Apply .visible or .invisible as needed.

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

Sass #

Utilities API #

Visibility utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "visibility": (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      )
    )