* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
-### Text alignment
+## Text alignment
Easily realign text to components with text alignment classes.
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
-### Text transform
+## Text transform
Transform text in components with text capitalization classes.
<p class="text-capitalize">Capitalized text.</p>
{% endexample %}
-### Contextual colors
-
-### Contextual colors and backgrounds
+## Contextual colors and backgrounds
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
{% endcallout %}
-### Close icon
+## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.
</button>
{% endexample %}
-### Floats
+## Floats
Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
}
{% endhighlight %}
-### Center content
+## Center content
Set an element to `display: block;` and center via `margin`. Available as a mixin and class.
}
{% endhighlight %}
-### Hidden content
+## Hidden content
Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io).
<input type="text" hidden>
{% endhighlight %}
-### Invisible content
+## Invisible content
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
}
{% endhighlight %}
-### Screen readers
+## Screen readers
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). Necessary for following [accessibility best practices](../getting-started/#accessibility). Can also be used as mixins.
}
{% endhighlight %}
-### Image replacement
+## Image replacement
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
}
{% endhighlight %}
-### Responsive embeds
+## Responsive embeds
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.