Foundation
Display
Change the display property of an element.
.vads-u-display--block
Sets an element’s display to block so it starts on a new line and takes the entire width.
.vads-u-display--inline
Sets an element’s display to inline where height, width, margin, and padding have no effect.
.vads-u-display--inline-block
Sets an element‘s display to inline-block, where it can be arranged beside other elements and height, width, margin, and padding are accepted.
.vads-u-display--flex
Sets an element‘s display to flex to behave as a flex container. For more related utilities, check out the flexbox utilities.
.vads-u-display--none
Sets an element‘s display to none, hiding it visually and from screen readers.
Guidance
Accessibility
- Using code
vads-u-display--noneand its responsive prefix will hide that element from screen readers. Only use this property if you are choosing to hide from all users. - If you want to hide something visual but still make it available to screen readers, consider using the visibility utility instead.
Responsive prefixes
Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.
Example
<div class="vads-u-display--none large-screen:vads-u-display--block">
| VADS Breakpoint Sass Variable | USWDS Breakpoint Custom Property | Width |
|---|---|---|
$xsmall-screen |
--mobile |
320px |
$small-screen |
--mobile-lg |
481px |
| -- | --tablet |
640px |
$medium-screen |
--medium-screen |
768px |
$small-desktop-screen |
--desktop |
1024px |
$large-screen |
--desktop-lg |
1201px |
Read more about breakpoints.