Visibility

Visibility utilities for controlling element visibility and screen-reader accessibility without affecting layout.

@layer utilities

Overview

Visibility utilities set the CSS visibility property. Unlike display utilities, they do not affect layout — hidden elements retain their space in the document flow.

.invisible elements are hidden both visually and from assistive technologies.

.visible and .invisible are the available classes.

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

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

CSS

Visibility utilities are generated via the utilities API.

Reference

The table lists all visibility utilities and their CSS properties.

Class	Properties
`.visible`	`visibility: visible;`
`.invisible`	`visibility: hidden;`

Utilities API

Visibility utilities are declared in scss/utilities/_index.scss using the utilities API.

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