--- name: utilities url: /utilities title: Utilities ---

Utilities

Foundation includes a handful of helpful utility classes to add certain behaviors to your elements.


Visibility Classes

Our visibility classes work the same as they do in Foundation for Sites, allowing you to easily define when content is shown or hidden on various screen sizes. Add the class show-for-[size] to display an element on that size of screen and larger.

Add the class show-for-[size]-only to display an element only at that screen size, not on any larger or smaller screens.

To hide elements at certain screen sizes, use the classes hide-for-[size] and hide-for-[size]-only

You are on a small or larger device.

You are on a medium or larger device.

You are on a large or larger device.

You are on a small device.

You are on a medium device.

You are on a large device.

You are in a landscape orientation.

You are in a portrait orientation.

You are on a small or larger device.

You are on a medium or larger device.

You are on a large or larger device.

You are on a small device.

You are on a medium device.

You are on a large device.

You are on a landscape device.

You are on a portrait device.

These classes are also available as mixins, if you'd rather not add these classes to your markup. .componentOne { @include show-for(small); } .componentTwo { @include hide-for(medium); } .componentThree { @include show-for-only(large); } .componentFour { @include hide-for-only(small); }

Text Alignment

Quickly align text with our text alignment classes.

Basic left-hand text

Saucy right-hand text

Sassy centered text

Rachet justified text

Basic left-hand text

Saucy right-hand text

Sassy centered text

Rachet justified text

These classes also come in responsive flavors, meaning you can shift text alignment on different screen sizes.

This text is left-aligned on small screens, and center-aligned on medium screens and larger.

This text is left-aligned on small screens, and center-aligned on medium screens and larger. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, doloribus, sapiente. Quas aliquam, ea eaque. Earum nostrum laboriosam, quidem iusto sint! Quisquam voluptatem atque, corporis sapiente doloremque laborum fugiat dolores.


Floats and Clearing

Float an element to the left or right using our float classes.

Left Right
Left Right

If you have a container with only floated elements, add the clearfix class to make sure the container has a proper height.


Thumbnails

You can create Thumbnails by adding a thumbnail class in the img tag like so:

You can use the thumbnail class in a ulto affect all the images in it.


Close Class

You can create a nice close button for components like Panel and Modal with this markup:

x

Basic Card

The Close will automatically place itself in the upper right corner. On JS components, this will trigger a close action.

X

Basic Card

The Close will automatically place itself in the upper right corner. On JS components, this will trigger a close action.