There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.
.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
You can reveal the entire string on hover with the addition of .expandable.
Add a number or unread indicator to navs and more with a counter.
9
Quickly float something to the left or right, and clear them later.
.left
.right
</code>
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.
</code>
Change the text-align on elements with a class.
Left aligned text.
Right aligned text.
Center aligned text.
</code>
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
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
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
</code>
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.
</code>
You have the option to set margin sizes from 0-5. You also have the optional direction using t,r,b,l,x,y.
</code>
You have the option to set padding sizes from 0-5. You also have the optional direction using t,b,x,y.
</code>
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.
</code>
You can set your display with these utilities.
.d-block
.d-inline
.d-inline-block
.d-none
With these border utilities you can set common borders.
</code>
Add these classes with .border and you’ll have some common border colors.
</code>
To remove a border from one side you can use -0 postfix.
</code>