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.