Cedar Design System provides many generic, responsively-aware visibility utility classes. All classes defined below are also available as breakpoint-aware classes.
By appending the appropriate breakpoint name @(xs, sm, md, lg) to your display class, you can create a chain of class names that allow you to customize your display needs to fit each of your screen sizes. For more information, visit the
Targeting the Utility Media Query with Class Names section of the Responsive Layout article.
The display classes usually fall into two categories: showing or hiding content.
Content can be hidden in many ways and these breakpoint-aware classes are named for the CSS display property they apply. Before you use any one of the classes provided below, take the following into consideration:
You need the content hidden from all users: visual and screen reader
You expect that the hidden elements space is removed from the page
You expect the parent element to enforce its visibility setting on its children
You need the content hidden from visual users
You expect that the hidden elements space is retained on the page
You intend to use css animations to show or hide your elements
You expect the parent elements and their children to have control over their own visibility
You need to add context to a display element for visually-impaired users and search engine bots
You need to hide content until it is tabbed to. This is a helpful way to allow tabbed users to skip repetitive site structure such as navigation and search filters