Skip to main content
Version: 1.0.x

Visual hide display

@use "@glsass/tools/tools.vhd" as vhd;

visually-hidden()​

The mixin is used to allow to hide content visually, be keep it accessible from screen readers.

This tool is also known as sr-only on previous version of Bootstrap.

@include visually-hidden();

.hide-it {
  @include visually-hidden();

  color: blue;
}

// CSS
.hide-it {
  position: absolute !important;
  // and others rules...
  color: blue;
}

visually-hidden-focusable()​

This alternate mixin can be used to keep visible focusable element/content when it's active.

@include visually-hidden-focusable();

.hide-it {
  @include visually-hidden-focusable();

  color: blue;
}

// CSS
.hide-it {
  color: blue;
}

.hide-it:not(:focus) {
  position: absolute !important;
  // and others rules...
}