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.

display/hide Classes #

Use the [email protected]{breakpoint} classes to show an element at a specific breakpoint.

Here's an example:

<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.

❌ [email protected]
✅ [email protected]

@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;
}

no-js #

To hide an element if JavaScript is disabled by the user, use the .no-js:is-hidden class:

<button class="no-js:is-hidden">Show sidebar</button>

Print #

To hide an element if the page is printed, use the .print:is-hidden class:

<header class="print:is-hidden"></header>
<main></main>
<footer class="print:is-hidden"></footer>