Visibility

Showing & hiding

Use the following selectors for visibility:

• .show and .hide to toggle between display block/none
• or .show--i or .show--ib for inline/inline-block respectively
• .invisibile and .visibile to toggle between visibility hidden/visible

Also see the accessibility section for showing/hiding content for screenreaders

Orientation

Use the following selectors for visibility on different orientations:

• .show-landscape
• .hide-landscape
• .show-portrait
• .hide-portrait

<p class="show-landscape">
    This is visible only on <strong>landscape</strong> orientations
</p>
<p class="show-portrait">
    This is visible only on <strong>portrait</strong> orientations
</p>

Responsive helpers

Use the following classes to manage visibility across breakpoints. If you’re writing a custom component, consider using media queries to achieve this, rather than using these classes.

Hiding by screen width

• .hide-only-* - hides an element for the specified breakpoint only
• .hide-from-* - hides for the specified breakpoint and above
• .hide-until-* - hides from 0px wide up until the breakpoint, and displays it as block above
• .hide-until-*--i - hides from 0px wide up until the breakpoint, and displays it as inline above
• .hide-until-*--ib - hides from 0px wide up until the breakpoint, and displays it as inline-block> above

<p class="hide-until-md--ib">
    This is hidden until 'md' breakpoint and up, where it is displayed as inline-block
</p>
<p class="hide-from-md">
    This is hidden from 'md' breakpoint and up
</p>
<p class="hide-only-md">
    This is hidden only on the 'md' breakpoint
</p>

Showing by screen width

• .show-only-* - hides an element by default, then displays it as block only for the specififed breakpoint
• .show-only-*--i - hides an element by default, then displays it as inline only for the specififed breakpoint
• .show-only-*--ib - hides an element by default, then displays it as inline-block only for the specififed breakpoint
• .show-from-* - hides on element by defaults, then displays it as block from the specified breakpoint and up
• .show-from-*--i - hides on element by defaults, then displays it as inline from the specified breakpoint and up
• .show-from-*--ib - hides on element by defaults, then displays it as inline-block from the specified breakpoint and up
• .show-until-* - hides an element above the specified breakpoint

<p class="show-until-md">
    This is visible up until 'md' breakpoint
</p>
<p class="show-from-md--ib">
    This is only visible from the 'md' breakpoint, and is inline-block
</p>
<p class="show-only-md--i">
    <br/>This is visible only on the 'md' breakpoint, as inline
</p>

Accessibility

Hide visually

Use .visually-hidden to show for screenreaders, but hide visually. Useful for extra explanations to screenreaders to give context.

Hide from screenreaders

Use aria-hidden="true" to hide content from screenreaders but show it visually. Useful for purely visual elements (e.g. icons) that don’t have any meaningful, semantic content.

Show on focus

Use .show-on-focus to create elements that appear visually only when focussed. Useful for skiplinks.

Print

Use the following classes to show things only for print:

• .show-print
• .show-print--i
• .show-print--ib

Or alternatively use .hide-print to hide elements from displaying on print.

Edit on GitHub