Visibility settings control the conditional display of specific features on a page so that responsive content is shown or hidden based on the size of the screen. This should be used primarily to avoid sizing/wrapping issues and not to control the content itself.
Our design standard allows for four breakpoints to handle responsive design. These breakpoints are referenced as generic categories to avoid designing around specific devices or screen sizes. For more details on breakpoints, please review the breakpoints documentation in the style guide's Get Started section.
These classes are not recognized by screen readers; vital information should not be set to display conditionally and should always be available to the user.
A visible class is used to display a feature of the page within a specific range of screen sizes. The feature will be hidden on all screen sizes, except for those within the given range. You can use one or more of these classes to show/hide that element at different breakpoints.
To use the visible class on your page, add the following class to your element as shown in the example below. Use the tables as a reference for choosing a breakpoint size and display property.
.visible-[breakpoint size]-[display property]
| Base ( 0px - 599px) | Small ( ≤ 600px) | Medium ( ≤ 900px) | Large ( ≤ 1170px) | |
|---|---|---|---|---|
| .visible-base-* | Visible | Hidden | Hidden | Hidden |
| .visible-small-* | Hidden | Visible | Hidden | Hidden |
| .visible-medium-* | Hidden | Hidden | Visible | Hidden |
| .visible-large-* | Hidden | Hidden | Hidden | Visible |
Display classes for each breakpoint come in three variations, one for each CSS display property value listed below:
| Group of classes | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Resize your browser or load on different devices to test the responsive utility classes. Green checkmarks indicate the element is visible in your current viewport.
A Hidden class is used to hide a feature of the page within a specific range of screen sizes. The feature will be displayed on all screen sizes, except for those within the given range.
To use the hidden class, add the following class to your element. Use the table as a reference for choosing a breakpoint size.
.hidden-[breakpoint size]
| Extra Small (base) | Small ( ≤ 600px) | Medium ( ≤ 900px) | Large ( ≤ 1170px) | |
|---|---|---|---|---|
| .hidden-base | Hidden | Visible | Visible | Visible |
| .hidden-small | Visible | Hidden | Visible | Visible |
| .hidden-medium | Visible | Visible | Hidden | Visible |
| .hidden-large | Visible | Visible | Visible | Hidden |
Resize your browser or load on different devices to test the responsive utility classes. Green checkmarks indicate the element is hidden in your current viewport.
There are some elements that need to be hidden on the page, but still need to be accessible via a screen reader. Adding the .sr-only class to any element will hide that element on all views, but will still be accessible with a screen reader.
<a href="#" class="sr-only">Only accessible to screen readers</a>