2017-03-06 03:03:05 +08:00
---
layout: docs
title: Visibility
2020-06-21 19:41:01 +08:00
description: Control the visibility of elements, without modifying their display, with visibility utilities.
2017-03-06 03:03:05 +08:00
group: utilities
---
2020-06-21 19:39:49 +08:00
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.
2020-10-13 21:37:21 +08:00
{{< callout warning > }}
2020-06-21 19:39:49 +08:00
Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users.
2020-10-13 21:37:21 +08:00
{{< / callout > }}
2017-03-06 03:03:05 +08:00
Apply `.visible` or `.invisible` as needed.
2020-10-19 17:56:49 +08:00
```html
2017-03-06 03:03:05 +08:00
< div class = "visible" > ...< / div >
< div class = "invisible" > ...< / div >
2020-10-19 17:56:49 +08:00
```
2017-03-06 03:03:05 +08:00
2020-10-19 17:56:49 +08:00
```scss
2017-03-06 03:03:05 +08:00
// Class
.visible {
2019-02-08 01:19:00 +08:00
visibility: visible !important;
2017-03-06 03:03:05 +08:00
}
.invisible {
2019-02-08 01:19:00 +08:00
visibility: hidden !important;
2017-03-06 03:03:05 +08:00
}
2020-10-19 17:56:49 +08:00
```
2021-02-11 11:29:59 +08:00
2023-04-10 23:53:28 +08:00
## CSS
2021-02-11 11:29:59 +08:00
2023-04-10 23:53:28 +08:00
### Sass utilities API
2021-02-11 11:29:59 +08:00
Visibility utilities are declared in our utilities API in `scss/_utilities.scss` . [Learn how to use the utilities API. ]({{< docsref "/utilities/api#using-the-api" >}} )
{{< scss-docs name = "utils-visibility" file = "scss/_utilities.scss" > }}
