hide visually

Hide an element visually, and effectively remove it from page layout, without hiding it from screen readers.

use-name: scut-hide-visually
type: mixin and placeholder (same)

Vital accessibility practice.

example

HTML

<div class="eg-hide-visually">This element is visually hidden.</div><div>You can't see the element above this one, can you?</div>

SCSS

.eg-hide-visually {
  @include scut-hide-visually;
  // or @extend %scut-hide-visually;
}

compiled CSS

.eg-hide-visually {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Result

This element is visually hidden.

You can't see the element above this one, can you?