| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: Visibility
|
|
|
4 |
description: Control the visibility, without modifying the display, of elements with visibility utilities.
|
|
|
5 |
group: utilities
|
|
|
6 |
---
|
|
|
7 |
|
|
|
8 |
Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do 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.
|
|
|
9 |
|
|
|
10 |
Apply `.visible` or `.invisible` as needed.
|
|
|
11 |
|
|
|
12 |
```html
|
|
|
13 |
<div class="visible">...</div>
|
|
|
14 |
<div class="invisible">...</div>
|
|
|
15 |
```
|
|
|
16 |
|
|
|
17 |
```scss
|
|
|
18 |
// Class
|
|
|
19 |
.visible {
|
|
|
20 |
visibility: visible !important;
|
|
|
21 |
}
|
|
|
22 |
.invisible {
|
|
|
23 |
visibility: hidden !important;
|
|
|
24 |
}
|
|
|
25 |
|
|
|
26 |
// Usage as a mixin
|
|
|
27 |
// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
|
|
|
28 |
.element {
|
|
|
29 |
@include invisible(visible);
|
|
|
30 |
}
|
|
|
31 |
.element {
|
|
|
32 |
@include invisible(hidden);
|
|
|
33 |
}
|
|
|
34 |
```
|