Skip to main content Skip to docs navigation
View on GitHub

# Visibility

Control the visibility of elements, without modifying their display, with visibility utilities.

Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page.

Elements with the `.invisible` class will be hidden both visually and for assistive technology/screen reader users.

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,
          )
        )