title: Clearfix
description: Quickly and easily clear floated content within a container by adding a clearfix utility.
group: utilities
-toc: true
---
Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
title: Close icon
description: Use a generic close icon for dismissing content like modals and alerts.
group: utilities
-toc: true
---
**Be sure to include text for screen readers**, as we've done with `aria-label`.
title: Image replacement
description: Swap text for background images with the image replacement class.
group: utilities
-toc: true
---
{% capture callout %}
title: Overflow
description: Use these shorthand utilities for quickly configuring how content overflows an element.
group: utilities
-toc: true
---
Barebones `overflow` functionality is provided for two values by default, and they are not responsive.
title: Screenreaders
description: Use screenreader utilities to hide elements on all devices except screen readers.
group: utilities
-toc: true
---
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
title: Shadows
description: Add or remove shadows to elements with box-shadow utilities.
group: utilities
-toc: false
---
## Examples