Visibility
The 📁 base/_visibility.scss file contains the Visibility utility classes, used to toggle the visibility of an element at a specific breakpoint.
⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.
🔍 On this page:
display/hide Classes #
You can use the .[email protected]{breakpoint}
classes to show an element at a specific breakpoint.
Here's an example of these utility classes in action:
<div class="component">
<div>One</div>
<div class="[email protected]">Two</div>
<div class="[email protected]">Three</div>
<div class="[email protected]">Four</div>
<div>Five</div>
</div>
When you apply the [email protected]
class to an element, for example, you're automatically hiding it (display: none
) until the medium breakpoint, at which point its display value is changed to its default value.
If you want to hide an element at a breakpoint, you can use the [email protected]{breakpoint}
class. You can even combine the two classes:
<div class="component">
<div>One</div>
<div class="[email protected] [email protected]">Two</div>
<div>Three</div>
</div>
In the example above, element Two becomes visible at the "xs" breakpoint, then it's hidden at the "lg" breakpoint.
⚠️ Important: if you hide en element using a [email protected]{breakpoint}
class, then you cannot bring it back using a [email protected]{breakpoint}
class. If you want to hide an element and show it at a specific breakpoint, you only need to apply the [email protected]{breakpoint}
class, as in the examples above.
What Display values do you support? All of them.
We use the "not" media query logic to apply a display value of none. Therefore you don't need to specify the display value in the utility class.
@media not all and (min-width: 64rem) {
[email protected] {
display: none !important;
}
}
@media (min-width: 64rem) {
[email protected] {
display: none !important;
}
}
.component__item {
display: inline-flex;
}
A good example of how to use the Visibility utility classes is our pagination component.
is-visible/is-hidden Classes #
The .is-visible
/.is-hidden
utility classes can be used to toggle the display value of an element regardless of the breakpoint.
We define the --display
variable so that you can set any display value you want on a component level by updating the CSS variable (you don't need to set the variable if display = block, which is the default value of the variable).
:root {
--display: block;
}
.is-visible {
display: var(--display) !important;
}
.is-hidden {
display: none !important;
}
.component {
display: none;
--display: flex;
}