Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

18 Visibility

Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements. You can use visibility classes to control which elements users see depending on their browsing environment.

18.1 Show by Screen Size

In this example, we use the show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.

This text is shown only on a small screen.

This text is shown on medium screens and up.

This text is shown only on a medium screen.

This text is shown on large screens and up.

This text is shown only on a large screen.

This text is shown on xlarge screens and up.

This text is shown only on an xlarge screen.

<div class="panel">
	<p class="show-for-small-only">This text is shown only on a small screen.</p>
	<p class="show-for-medium-up">This text is shown on medium screens and up.</p>
	<p class="show-for-medium-only">This text is shown only on a medium screen.</p>
	<p class="show-for-large-up">This text is shown on large screens and up.</p>
	<p class="show-for-large-only">This text is shown only on a large screen.</p> 
	<p class="show-for-xlarge-up">This text is shown on xlarge screens and up.</p>
	<p class="show-for-xlarge-only">This text is shown only on an xlarge screen.</p>
</div>

18.2 Hide by Screen Size

This example shows the opposite: It uses the hide visibility classes to state which elements should disappear based on your device's screen size or orientation. Users will see elements on every browser except those that meet these conditions.

You are not on a small screen.

You are not on a medium, large, xlarge screen.

You are not on a medium screen.

You are not on a large, xlarge screen.

You are not on a large screen.

You are not on an xlarge screen.

You are not on an xlarge screen.

<div class="panel">
	<p class="hide-for-small-only">You are <b>not</b> on a small screen.</p>
	<p class="hide-for-medium-up">You are <b>not</b> on a medium, large, xlarge screen.</p>
	<p class="hide-for-medium-only">You are <b>not</b> on a medium screen.</p>
	<p class="hide-for-large-up">You are <b>not</b> on a large, xlarge screen.</p>
	<p class="hide-for-large-only">You are <b>not</b> on a large screen.</p> 
	<p class="hide-for-xlarge-up">You are <b>not</b> on an xlarge screen.</p>
	<p class="hide-for-xlarge-only">You are <b>not</b> on an xlarge screen.</p>
</div>

18.3 Screenreaders

To hide an element visually but retain for screenreaders, add the class .visuallyhidden to the required element.

This element is visually hidden but still readable by screenreaders.

<div class="panel">
	<p class="visuallyhidden">This element is visually hidden but still readable by screenreaders.</p>
</div>