Visibility

Control an element's visibility without changing the display property.

Contents

• Overview
• Examples
• SASS Reference
  • Variables
  • Mixins

Overview

Set the visibility of an element, meaning its display is not modified and will not affect layout. .invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.

Examples

Use .invisible and .visible as needed.

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

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

// Usage as a mixins
.element {
  @include invisible;
}
.element {
  @include visible;
}

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Mixins

invisible

Set an element to be invisible.

@include invisible();

visible

Set an element to be visible.

@include visible();