# Visibility
Control the visibility of an element from your HTML
# How to
To use these styles in a Vue component SCSS, you'll need:
@import '~@skyline/scss/src/core/UI.required';
// The utilities file will output utility classes, but isn't needed to use the
// mixin
@import '~@skyline/scss/src/utilities/utilities.visibility';
# HTML Example:
<div class="u-is-hidden">This element would be hidden</div>
# SCSS Example:
// This must be imported somewhere within scope for the mixin to work.
@import '~@skyline/scss/src/core/UI.required';
.hide-visually {
@include hide-from-sighted-users;
}
# HTML
# u-is-hidden
Hides the element from both sighted users and screen reader users.
# u-is-visually-hidden
Hides the element from both sighted users, but allows screen reader users to
still have access to the information. This uses the hide-from-sighted-users
mixin under the hood.
# u-mobile-hide
Hides the element on mobile.
# SCSS
# hide-from-sighted-users
SCSS file imports
To use these styles in a Vue component SCSS, you’ll need:
@import '~@skyline/scss/src/core/UI.required';@include hide-from-sighted-users();