---
title: Visibility Classes
meta: Visibility
---
***
{{> examples_visibility_basic}}
***
### 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.
{{> examples_visibility_show}}
### 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.
{{> examples_visibility_hide}}
### Orientation Detection
This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.
{{> examples_visibility_orientation}}
### Touch Detection
There are also visibility classes to hide or show content based on whether a device supports touch (as determined by Modernizr).
{{> examples_visibility_touch}}
***
## Accessibility
Finally, if you want to hide some content but still make it accessible for screen readers, use the **hidden** visibility classes. Do not confuse these classes with **hide** visibility classes. Use these classes in conjunction with the **hide** and **show** visibility classes to control complex layouts while offering accessibility for those using screen readers.
{{> examples_accessibility_hidden}}
To reverse the rules defined by **hidden**, use the **visible** visibility classes.
{{> examples_accessibility_visible}}
***
## Print Styles
Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:
* Clearing out backgrounds, box shadows and text shadows
* Appending link URLs after the anchor text
* Bordering blockquotes and pre elements
* Page cleanup and window minimization
On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach `.show-for-print` to an element to only show when printing, and `.hide-for-print` to hide something when printing.
Available classes:
- `.show-for-print` , `.print-only` (Visable for printing)
- `.hide-for-print` , `.hide-on-print` (Hidden while printing)
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
{{#markdown}}
```scss
@import "foundation/components/visibility";
```
{{/markdown}}