Visibility

Hide utilities to control the visibility to an element can be applied or changed per breakpoint using the following formula: .hide-[breakpoint], for example: .hide-sm. Hide utilities act differently from other responsive styles and are applied to each breakpoint-range only.

<div class="border background-gray-light-10 padding-3" style="max-width: 1040px">
    <div class="card margin-right-3 margin-bottom-3">
        <div class="card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
        </div>
        <div class="card-footer">
            <button class="button button-primary hide-sm">Hidden on Mobile</button>
        </div>
    </div>
    <div class="card margin-bottom-3">
        <div class="card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
        </div>
        <div class="card-footer">
            <button class="button button-primary hide-xl">Hidden on Desktop</button>
        </div>
    </div>
</div>

Show Content for Screen Readers

There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. However, there are a few cases where information or meaning is apparent visually but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but have the content remain invisible to sighted users.

To hide an element, such as a button label, the class of .hide-accessible can be added. In the below example, to be accessible the menu button needs to be labeled, but for design purposes, we only want the menu icon to show. The .hide-accessible class will hide the label but still available to a screen reader.

<div class="background-white padding-2 flex flex-justify-end">
    <button class="button button-transparent">
        <span class="hide-accessible">Menu</span>
        <span class="icon-hamburger font-size-8" aria-hidden="true"></span>
    </button>
</div>