css/docs/utilities.md

layout	title
page	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 %}

Centering content

Easily center block level content if it's not taking up the full width of the parent. Can be used on grid columns or any other elements.

{% example html %}

Account Profile Emails Notifications {% 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 %}

Button

{% endexample %}