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”).

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment 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).

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment 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”).

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment 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)