There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.

Contents

• Truncation
• Counter
• Floats
• Centering content
• Text alignment
• Text color
• Muted link
• Flex table

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.

<span class="branch-ref css-truncate css-truncate-target">
  really-long-branch-name
</span>

You can reveal the entire string on hover with the addition of .expandable.

<span class="css-truncate expandable">
  <span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
</span>

Counter

Add a number or unread indicator to navs and more with a counter.

<span class="counter">9</span>

Floats

Quickly float something to the left or right, and clear them later.

<div class="clearfix">
  <code class="left">.left</code>
  <code class="right">.right</code>
</div>

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.

<nav class="menu centered">
  <a class="menu-item selected" href="#">Account</a>
  <a class="menu-item" href="#">Profile</a>
  <a class="menu-item" href="#">Emails</a>
  <a class="menu-item" href="#">Notifications</a>
</nav>

Text alignment

Change the text-align on elements with a class.

<p class="text-left">Left aligned text.</p>
<p class="text-right">Right aligned text.</p>

Text color

Change the color of elements with a class.

<p class="text-open">Green/open text</p>
<p class="text-closed">Red/closed text</p>
<p class="text-merged">Merged text</p>
<p class="text-pending">Pending text</p>

.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.

Here is some example text. <a class="muted-link" href="#">And a muted link.</a>

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.

<div class="flex-table">
  <div class="flex-table-item flex-table-item-primary">
    <input class="input-block" type="text" placeholder="Long flexible input form">
  </div>
  <div class="flex-table-item">
    <button class="btn" type="button">Button</button>
  </div>
</div>