Utilities for showing or hiding an element without changing the layout of a document.
<div class="d-w100p"> <div class="d-d-inline-block d-p-200 d-bgc-moderate d-bar-300 d-code--md d-ta-center d-vi-visible">.d-vi-visible</div> <div class="d-d-inline-block d-p-200 d-bgc-moderate d-bar-300 d-code--md d-ta-center d-vi-visible-sr">.d-vi-visible-sr</div> <div class="d-d-inline-block d-p-200 d-bgc-moderate d-bar-300 d-code--md d-ta-center d-vi-hidden">.d-vi-hidden</div> </div>
Bear in mind using a visibility value of hidden on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
Class
|
Output
|
|---|---|
| .d-vi-visible | visibility: visible !important; |
| .d-vi-visible-sr | border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; |
| .d-vi-hidden | visibility: hidden !important; |
Visibility documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope