Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Visibility

Visibility classes let you show or hide elements based on screen size.

last modified: 01/01/1601 01:00:00

Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary (Show-for-medium is better than hide-for-small).

Breakpoint	show	hide
Small only	`show-for-small-only`	`hide-for-small-only`
Medium up	`show-for-medium-up`	`hide-for-medium-up`
Medium only	`show-for-medium-only`	`hide-for-medium-only`
Large up	`show-for-large-up`	`hide-for-large-up`
Large only	`show-for-large-only`	`hide-for-large-only`
xLarge up	`show-for-xlarge-up`	`hide-for-xlarge-up`
xLarge only	`show-for-xlarge-only`	`hide-for-xlarge-only`
xxLarge up	`show-for-xxlarge-up`	`hide-for-xxlarge-up`

Show by Screen Size

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.

This text is shown on xxlarge screens and up.

Hide by Screen Size

You are not on a small screen.

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

You are not on a medium screen.

You are not on a large, xlarge, or xxlarge screen.

You are not on a large screen.

You are not on an xlarge screen and up.

You are not on an xlarge screen.

You are not on an xxlarge screen.

Javascript

inception.isElementWithinViewport(el, elOffset, offset)

elOffset = percentage of element visible in viewport, default is .25