Alerts Avatars Blankslate Buttons Code Guidelines Forms Layout Navigation Scaffolding States Tooltip Typography

Colors Markdown Utilities

Utilities

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

Contents

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.

really-long-branch-name 
<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.

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

Floats

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

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

Left aligned text.

Right aligned text.

Center aligned text.

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

Background colors

Fill in an element with background colors.

.bg-white .bg-gray-dark .bg-blue .bg-blue-light .bg-gray .bg-gray-light .bg-green .bg-red
<span class="d-inline-block p-3 bg-white">.bg-white</span>
<span class="d-inline-block p-3 bg-gray-dark text-white">.bg-gray-dark</span>
<span class="d-inline-block p-3 bg-blue">.bg-blue</span>
<span class="d-inline-block p-3 bg-blue-light">.bg-blue-light</span>
<span class="d-inline-block p-3 bg-gray">.bg-gray</span>
<span class="d-inline-block p-3 bg-gray-light">.bg-gray-light</span>
<span class="d-inline-block p-3 bg-green">.bg-green</span>
<span class="d-inline-block p-3 bg-red">.bg-red</span>

Text color

Change the color of elements with a class.

.text-blue .text-red .text-gray-light .text-gray .text-gray-dark .text-green .text-orange .text-purple .text-white .text-inherit
<span class="text-blue">.text-blue</span>
<span class="text-red">.text-red</span>
<span class="text-gray-light">.text-gray-light</span>
<span class="text-gray">.text-gray</span>
<span class="text-gray-dark">.text-gray-dark</span>
<span class="text-green">.text-green</span>
<span class="text-orange">.text-orange</span>
<span class="text-purple">.text-purple</span>
<span class="text-white bg-gray-dark">.text-white</span>
<span class="text-inherit">.text-inherit</span>

The default link color is blue, but there are a couple of other options to use for deemphasized links. On :hover all links will turn blue.

Here is some example text. And a .link-blue

Here is some example text. And a .link-gray

Here is some example text. And a .link-gray-dark

<p>Here is some example text. <a class="link-blue" href="#">And a .link-blue</a></p>
<p>Here is some example text. <a class="link-gray" href="#">And a .link-gray</a></p>
<p>Here is some example text. <a class="link-gray-dark" href="#">And a .link-gray-dark</a></p>

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>

Margin

You have the option to set margin sizes from 0-5. You also have the optional direction using t,r,b,l,x,y.

.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mx-5
.my-5
.m-2
<div class="d-inline-block border p-2 mr-0">.mr-0</div>
<div class="d-inline-block border p-2 mr-1">.mr-1</div>
<div class="d-inline-block border p-2 mr-2">.mr-2</div>
<div class="d-inline-block border p-2 mr-3">.mr-3</div>
<div class="d-inline-block border p-2 mr-4">.mr-4</div>
<div class="d-inline-block border p-2 mr-5">.mr-5</div>
<div class="d-inline-block border p-2 mx-2">.mx-5</div>
<div class="d-inline-block border p-2 my-2">.my-5</div>
<div class="d-inline-block border p-2 m-2">.m-2</div>

Padding

You have the option to set padding sizes from 0-5. You also have the optional direction using t,b,x,y.

.pt-0
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.p-3
.px-3
.py-3
<div class="d-inline-block border pt-0">.pt-0</div>
<div class="d-inline-block border pt-1">.pt-1</div>
<div class="d-inline-block border pt-2">.pt-2</div>
<div class="d-inline-block border pt-3">.pt-3</div>
<div class="d-inline-block border pt-4">.pt-4</div>
<div class="d-inline-block border pt-5">.pt-5</div>
<div class="d-inline-block border p-3">.p-3</div>
<div class="d-inline-block border px-3">.px-3</div>
<div class="d-inline-block border py-3">.py-3</div>

Positioning

We include classes for setting positioning as well as setting the top-0, right-0, bottom-0, left-0 to zero. Your options for positioning are position-static, position-absolute, position-relative, position-fixed.

.position-relative
.position-absolute.right-0.top-0
<div class="p-3 border position-relative">
  .position-relative
  <div class="border position-absolute right-0 top-0 p-1">.position-absolute.right-0.top-0</div>
</div>

Display

You can set your display with these utilities.

.d-block .d-inline .d-inline-block .d-none
<span class="border text-center d-block p-2">.d-block</span>
<span class="border text-center d-inline p-2">.d-inline</span>
<span class="border text-center d-inline-block p-2">.d-inline-block</span>
<span class="border text-center d-none p-2">.d-none</span>

Borders

With these border utilities you can set common borders.

.border
.border-top
.border-right
.border-bottom
.border-left
<div class="border p-3 mb-3">.border</div>
<div class="border-top p-3 mb-3">.border-top</div>
<div class="border-right p-3 mb-3">.border-right</div>
<div class="border-bottom p-3 mb-3">.border-bottom</div>
<div class="border-left p-3 mb-3">.border-left</div>

Border colors

Add these classes with .border and you’ll have some common border colors.

.border-blue
.border-gray-light
.border-gray-dark
<div class="border p-3 mb-3 border-blue">.border-blue</div>
<div class="border p-3 mb-3 border-gray-light">.border-gray-light</div>
<div class="border p-3 mb-3 border-gray-dark">.border-gray-dark</div>

No borders

To remove a border from one side you can use -0 postfix.

.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0
<div class="border border-0 p-3 mb-3">.border-0</div>
<div class="border border-top-0 p-3 mb-3">.border-top-0</div>
<div class="border border-right-0 p-3 mb-3">.border-right-0</div>
<div class="border border-bottom-0 p-3 mb-3">.border-bottom-0</div>
<div class="border border-left-0 p-3 mb-3">.border-left-0</div>