Visibility

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

Set the visibilityelements with our visibility utilities. These do not modify the displayvalue at all and are helpful for hiding content from most users, but still keeping them for screen readers.

Apply .visibleor .invisibleas needed.

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

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

// Usage as a mixin
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}