Visibility

In some cases you might need to hide elements from screen. Here is a set of utilities you can use.

Always think about why you want to hide elements from screen. A usual context is when developing for smaller screens. The screen realestate is scarce so hiding elements is often a solution.

Please keep in mind though, that you should strive for an equally valuable user experience even if the user is on mobile. We should avoid discriminating the user based on their preferred device, so reach for these utilities as a last resort.

Hidden

Hide element from both screenreaders and browsers.

<div class="kx-is-hidden">
    <div class="box kx-p--small">Hidden box</div>
</div>

The output CSS looks like this:

.kx-is-hidden {
    display: none;
    visibility: hidden;
}

Or use as scss mixin:

.myComponent {
    @include hidden;
}

Responsive variations available for kx-is-hidden using max-width media queries

  • kx-is-hidden[@until-mob-s|@until-mob-m|tab-s|@until-tab-m|@until-tab-l|@until-ltp-s|@until-ltp-m|@until-dtp]
  • Example: kx-is-hidden@until-mob-s

Visually Hidden

Hide only visually, but have it available for screenreaders.

<div class="kx-is-vishidden">
    <div class="box kx-p--small">Visually hidden box</div>
</div>

The output CSS looks like this:

.kx-is-vishidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Or use as scss mixin:

.myComponent {
    @include vishidden;
}

Responsive variations available for kx-is-vishidden using max-width media queries

  • kx-is-vishidden[@until-mob-s|@until-mob-m|tab-s|@until-tab-m|@until-tab-l|@until-ltp-s|@until-ltp-m|@until-dtp]
  • Example: kx-is-vishidden@until-mob-s

Invisible

Hide both visually and from screenreaders, but maintain layout.

<div class="kx-is-invisible">
    <div class="box kx-p--small">Invisible box</div>
</div>

The output CSS looks like this:

.kx-is-invisible {
    visibility: hidden;
}

Or use as scss mixin:

.myComponent {
    @include invisible;
}

Responsive variations available for kx-is-invisible using max-width media queries

  • kx-is-invisible[@until-mob-s|@until-mob-m|tab-s|@until-tab-m|@until-tab-l|@until-ltp-s|@until-ltp-m|@until-dtp]
  • Example: kx-is-invisible@until-mob-s

Examples:

Hidden

Inside this container is a box that is hidden on screens = tab-m and down, and in screenreaders. Adjust viewport.

Hidden box @until-tab-m
<div class="box kx-p--xlarge kx-is-vishidden@until-tab-m">Hidden box @until-tab-m</div>

Visually hidden

Inside this container is a box that is hidden on screens = tab-m and down, but always accessible via screenreaders. Adjust viewport.

Visually hidden box @until-tab-m
<div class="box kx-p--xlarge kx-is-vishidden@until-tab-m">Visually hidden box @until-tab-m</div>

Invisible

Inside this container is a box that is invisible on screens = tab-m and down and screenreaders. It still takes up space in the container. Adjust viewport.

Invisible box @until-tab-m
<div class="box kx-p--xlarge kx-is-invisible@until-tab-m">Invisible box @until-tab-m</div>