Web services

Visibility

Use the following visibility classes for hiding elements based on certain parameters.

Jump to a component:

True hide

Sometimes it’s necessary to hide an element visually as well as for screen readers. This most often happens when you’re unable to edit the HTML (like in a vendor application). True hiding an element takes it out of the flow of the page completely. There are two classes for legacy reasons.

Horizontal rules ( <hr> ) are hidden by default, so don’t try to use them.

How to use for True hide

Add in the HTML (see “development info”).

Development info for True hide

Stylesheet location: /_source/styles/base/_global.scss 

<p class="hide"></p> <!-- can be any element -->
<p class="hidden"></p> <!-- can be any element -->
Example of True hide
There are two sentences here, but the second one is hidden (it won’t be read by a screen reader).

Visually hide

Screen readers see class="visually-hide" elements, but they’re hidden for sighted users. Elements with this class are pushed off the screen using a huge negative margin.

How to use for Visually hide

Add in the HTML (see “development info”).

Link text accessibility

class="visually-hide" is very useful for making content accessible. For example, say you’re working on a page that has multiple “register” links. This isn’t accessible – links that point to different pages must have different link text. Here’s how to fix this issue using class="visually-hide":

<a href="">Register<span class="visually-hide"> for event 1</span></a>
<a href="">Register<span class="visually-hide"> for event 2</span></a>

The two links are now accessible because their link text is different for screen readers, even if it isn’t for sighted users (the location/context of the links makes them accessible visually).

Development info for Visually hide

Stylesheet location: /_source/styles/base/_global.scss

Pay attention to where the space goes (it should be in the visually-hidden content).

<p>This text is visible<span class="visually-hide"> and this text is visually hidden</span>.</p>
Example of Visually hide

The first link has a visually-hidden " for event 1" and the second " for event 2":

Show or hide by screen size

Use these classes to control which elements are visible based on screen size. Examples where this is useful:

  • Displaying different images for desktops and phones.
  • Hiding elements on small screens – only do this for non-essential content that doesn’t display well on small screens (images with extremely wide aspect ratios that will be too small to see on a phone, for example).

The Foundation website has a full list of screen size and orientation visibility classes.

How to use for Show or hide by screen size

Add in the HTML (see “development info”).

Development info for Show or hide by screen size

Stylesheet location: /_source/styles/base/_global.scss

A few useful options:

Show on for small screens: class="show-for-small-only"
Show on medium and larger screens: class="show-for-medium"

Hide only on medium screens: class="hide-for-medium-only"
Hide on large screens: class="hide-for-large"
Example of Show or hide by screen size
Desktop and tablet

This image has class="hide-for-small-only", so will display on medium and larger screens. The landscape aspect ratio is good for larger screens.
Image of a cat that is wider than it is tall (but it's the same cat that is in the phone image)

Phone

This image has class="show-for-small-only", so will only display on small screens. The portrait aspect ratio is good for small screens.
Image of a cat that is taller than it is wide (but it's the same cat as in the desktop and tablet image)