---
layout: page
title: Utilities
---
There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Truncation
`.css-truncate` will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target.
{% example html %}
really-long-branch-name
{% endexample %}
You can reveal the entire string on hover with the addition of `.expandable`.
{% example html %}
this-is-a-really-long-branch-name
{% endexample %}
## Counter
Add a number or unread indicator to navs and more with a counter.
{% example html %}
9
{% endexample %}
## Floats
Quickly float something to the left or right, and clear them later.
{% example html %}
.left
.right
{% endexample %}
## Text alignment
Change the `text-align` on elements with a class.
{% example html %}
Left aligned text.
Right aligned text.
{% endexample %}
## Text color
Change the `color` of elements with a class.
{% example html %}
Green/open text
Red/closed text
Merged text
Pending text
{% endexample %}
`.text-closed` and `.text-failure` are the same, as well as `.text-open` and `.text-success`.
## Muted link
When you need a hyperlink to not be `$brand-blue`, use a `.muted-link`.
{% example html %}
Here is some example text. And a muted link.
{% endexample %}
## Flex table
Flex table is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it's cross browser friendly back to at least IE9.
Additional `margin` or `padding` may be required to properly space content.
{% example html %}
{% endexample %}