Color
Color utilities are built for background-color
, border
, and font-color
with support for hover states as well. The CSS classes are built using the pattern: {property}--{color-modifier}.
Color Modifiers
Background Color
Sets the background-color
property on an element.
<div class="bg-color--theme-primary">1</div>
<div class="bg-color--theme-secondary">2</div>
<div class="bg-color--dark">3</div>
<div class="bg-color--positive">4</div>
<div class="bg-color--none hover-bg-color--theme-secondary">5</div>
Syntax | Description |
---|---|
bg-color--<color-modifier> | Classes affecting the background-color property on an element |
hover-bg-color--<color-modifier> | Classes affecting the background-color property when hovering on an element |
Border Color
Sets the border-color
property on an element.
<div class="border-color--theme-primary">1</div>
<div class="border-top-color--theme-primary">2</div>
<div class="border-right-color--theme-primary">3</div>
<div class="border-bottom-color--theme-primary">4</div>
<div class="border-left-color--theme-primary hover-border-left-color--negative">5</div>
Syntax | Description |
---|---|
border-color--<color-modifier> | Classes affecting the border-color property on an element |
border-top-color--<color-modifier> | Classes affecting the border-top-color property on an element |
border-right-color--<color-modifier> | Classes affecting the border-right-color property on an element |
border-bottom-color--<color-modifier> | Classes affecting the border-bottom-color property on an element |
border-left-color--<color-modifier> | Classes affecting the border-left-color property on an element |
hover-border-color--<color-modifier> | Classes affecting the border-color property when hovering on an element |
hover-border-<pos>--<color-modifier> | Classes affecting the border-<position>-color property when hovering on an element |
Font Color
Sets the color
property on an element.
<span class="font-color--neutral-1">neutral-1</span>
<span class="font-color--neutral-2">neutral-2</span>
<span class="font-color--positive">positive</span>
<span class="font-color--negative">negative</span>
<span class="font-color--caution">caution</span>
<span class="font-color--info">info</span>
<span class="font-color--light">light</span>
<span class="font-color--dark">dark</span>
Syntax | Description |
---|---|
font-color--<color-modifier> | Classes affecting the color property on an element |
hover-font-color--<color-modifier> | Classes affecting the color property when hovering on an element |
Border
Sets the border
property to any element with a width of 1px
.
<div class="border--0"></div>
<div class="border--top"></div>
<div class="border--right"></div>
<div class="border--bottom"></div>
<div class="border--left"></div>
<div class="border--all"></div>
Border-radius
Sets the border-radius
property to any element.
Syntax: class="border-radius--<modifier>"
<div class="border-radius--0"></div>
<div class="border-radius--xs"></div>
<div class="border-radius--sm"></div>
<div class="border-radius--md"></div>
<div class="border-radius--lg"></div>
<div class="border-radius--max"></div>
<div class="border-radius--100"></div>
Modifier | Value |
---|---|
0 | None |
xs | 2px |
sm | 3px |
md | 5px |
lg | 10px |
max | 9999px |
100 | 100% |
Display
Sets the display
property on any element.
<div class="block">Block</div>
<div class="block">Block</div>
<div class="inline-block">Inline-block</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline-flex</div>
<div class="inline-flex">Inline-flex</div>
Modifier | Value |
---|---|
block | block |
inline-block | inline-block |
flex | flex |
inline-flex | inline-flex |
Flex
These are flex
utilities to ease the creation of flex based layouts and element formatting. All flex utilities begin with flex-
and followed by the property and modifier: flex-{property}--{modifier}
.
NOTE: These properties are only applied to an element that is either flex or a direct descendant of a flex parent.
Direction
Sets the flex-direction
property on a flex parent.
<div class="flex flex--row">
...
</div>
<div class="flex flex--row-reverse">
...
</div>
<div class="flex flex--col">
...
</div>
<div class="flex flex--col-reverse">
...
</div>
Modifier | Value |
---|---|
row | row |
row-reverse | row-reverse |
col | column |
col-reverse | column-reverse |
Justify
Sets the justify-content
property on a flex parent.
<div class="flex flex-justify--start">
...
</div>
<div class="flex flex-justify--end">
...
</div>
<div class="flex flex-justify--center">
...
</div>
<div class="flex flex-justify--between">
...
</div>
<div class="flex flex-justify--around">
...
</div>
Modifier | Value |
---|---|
start | flex-start |
end | flex-end |
center | center |
between | space-between |
around | space-around |
Align
These utilities affect various alignments in flex parent and children elements.
Content
Sets the align-content
property on a flex parent.
<div class="flex flex-content--start">
...
</div>
<div class="flex flex-content--end">
...
</div>
<div class="flex flex-content--center">
...
</div>
<div class="flex flex-content--between">
...
</div>
<div class="flex flex-content--around">
...
</div>
Modifier | Value |
---|---|
start | flex-start |
end | flex-end |
center | center |
between | space-between |
around | space-around |
Items
Sets the align-items
property on a flex parent.
<div class="flex flex-items--start">
...
</div>
<div class="flex flex-items--end">
...
</div>
<div class="flex flex-items--center">
...
</div>
<div class="flex flex-items--baseline">
...
</div>
<div class="flex flex-items--stretch">
...
</div>
Modifier | Value |
---|---|
start | flex-start |
end | flex-end |
center | center |
baseline | baseline |
stretch | stretch |
Self - Child
Sets the align-self
property on a flex child.
<div class="flex">
<div class="flex-self--start">Flex Child</div>
</div>
<div class="flex">
<div class="flex-self--end">Flex Child</div>
</div>
<div class="flex">
<div class="flex-self--center">Flex Child</div>
</div>
<div class="flex">
<div class="flex-self--baseline">Flex Child</div>
</div>
<div class="flex">
<div class="flex-self--stretch">Flex Child</div>
</div>
Modifier | Value |
---|---|
start | flex-start |
end | flex-end |
center | center |
baseline | baseline |
stretch | stretch |
Wrap
Sets the flex-wrap
property on a flex parent.
<div class="flex flex--nowrap">
...
</div>
<div class="flex flex--wrap">
...
</div>
Modifier | Value |
---|---|
nowrap | nowrap |
wrap | wrap |
Grow - Child
Sets the flex-grow
property on a flex child.
<div class="flex">
<div class="width--25 flex-grow--1">Width: 25% // Grow 1</div>
<div class="width--25">Width: 25%</div>
<div class="width--25">Width: 25%</div>
</div>
<div class="flex">
<div class="width--25 flex-grow--1">Width: 25% // Grow 1</div>
<div class="width--25 flex-grow--2">Width: 25% // Grow 2</div>
</div>
<div class="flex">
<div class="width--25 flex-grow--0">Width: 25% // Grow 0</div>
<div class="width--25 flex-grow--1">Width: 25% // Grow 1</div>
<div class="width--25 flex-grow--2">Width: 25% // Grow 2</div>
<div class="width--25 flex-grow--3">Width: 25% // Grow 3</div>
</div>
Modifier | Value |
---|---|
0 | flex-grow: 0 |
1 | flex-grow: 1 |
2 | flex-grow: 2 |
3 | flex-grow: 3 |
Shrink - Child
Sets the flex-shrink
property on a flex child.
<div class="flex">
<div class="width--25 flex-shrink--0">Width: 25% // Shrink 0</div>
<div class="width--25">Width: 25%</div>
<div class="width--25">Width: 25%</div>
<div class="width--25">Width: 25%</div>
<div class="width--25">Width: 25%</div>
</div>
<div class="flex">
<div class="width--25 flex-shrink--0">Width: 50% // Shrink 0</div>
<div class="width--25 flex-shrink--1">Width: 25% // Shrink 1</div>
<div class="width--25 flex-shrink--2">Width: 25% // Shrink 2</div>
<div class="width--25 flex-shrink--3">Width: 25% // Shrink 3</div>
</div>
Modifier | Value |
---|---|
0 | flex-shrink: 0 |
1 | flex-shrink: 1 |
2 | flex-shrink: 2 |
3 | flex-shrink: 3 |
Font
These utilities affect the font styling on an element.
Font Style
Sets the font-style
property on an element.
<span class="font-style--italic">italic</span>
Font Weight
Sets the font-weight
property on an element.
<span class="font-weight--100">100</span>
<span class="font-weight--200">200</span>
<span class="font-weight--300">300</span>
<span class="font-weight--400">400</span>
<span class="font-weight--500">500</span>
<span class="font-weight--600">600</span>
<span class="font-weight--700">700</span>
<span class="font-weight--light">light</span>
<span class="font-weight--normal">normal</span>
<span class="font-weight--bold">bold</span>
Font Size
Sets the font-size
property on an element.
<span class="font-size--xs">Extra Small</span>
<span class="font-size--sm">Small</span>
<span class="font-size--md">Medium</span>
<span class="font-size--lg">Large</span>
<span class="font-size--xl">Extra Large</span>
Size | value |
---|---|
xs | 14px |
sm | 16px |
md | 20px |
lg | 30px |
xl | 40px |
Spacing
Spacing utilities are built for both padding
and margin
. The CSS classes are built using the pattern: {property}-{direction}--{size}
.
<div class="mar-top--md">
<div class="code-example-box pad-top--25"></div>
<div class="code-example-box pad-bottom--0"></div>
<div class="code-example-box mar-left--md"></div>
<div class="code-example-box mar--lg"></div>
</div>
Property
Property | Description |
---|---|
mar | Classes affecting margin |
pad | Classes affecting padding |
Direction
Direction | Description |
---|---|
top | Sets padding-top |
bottom | Sets padding-bottom |
left | Sets padding-left |
right | Sets padding-right |
x | Sets padding on the x-axis |
y | Sets padding on the y-axis |
[blank] | Sets padding on all sides |
Size
Size | Value |
---|---|
0 | none |
sm | 5px |
md | 10px |
lg | 15px |
xl | 20px |
25 | 25% |
50 | 50% |
75 | 75% |
auto | auto |
In addition to setting a spacing property on an individual element, there are also classes to space all direct descendants of an element. These are called child spacing classes and can be applied by adding child
after the spacing property: mar-child--md
or pad-child-bottom--sm
. All directions and sizes are available, save for the percentages (since spacing percentages are reserved for an individual element).
<div class="pad-child--sm">
<span>Small Padding</span>
<span>Small Padding</span>
<span>Small Padding</span>
<span>Small Padding</span>
<span>Small Padding</span>
<span>Small Padding</span>
</div>
Text
These utilities affect the text styling on an element.
Text align
Sets the text-align
property on an element.
<div class="text--left">Align Left</div>
<div class="text--center">Align Center</div>
<div class="text--right">Align Right</div>
Text transform
Sets the text-transform
property on an element.
<div class="text--lowercase">Lowercase</div>
<div class="text--uppercase">Uppercase</div>
<div class="text--capitalize">Capitalize</div>
Text decoration
Sets the text-decoration
property on an element.
<div class="border--all text--underline">Underline</div>
<div class="border--all text--no-decoration">No Decoration</div>
White space
Sets the white-space
property on an element.
<div class="border--all text--nowrap">...</div>
Truncation
Whenever there is a limited amount of space for text to fit in and we need to apply truncation logic to the element containing the text, use this class.
NOTE: Depending on the elements being used and overall page structure, it might be necessary to add a fixed width to the element to truncate to ensure it doesn't overflow its container (see the second example below).
<div class="text--truncate">(TRUNCATED)</div>
<div class="text--truncate width--50">(TRUNCATED - FIXED WIDTH)</div>
<div>(NON-TRUNCATED)</div>
Width
These utilities affect the width on an element.
<div class="border--all width--sm">Width Small</div>
<div class="border--all width--md">Width Medium</div>
<div class="border--all width--lg">Width Large</div>
<div class="border--all width--25">Width 25%</div>
<div class="border--all width--50">Width 50%</div>
<div class="border--all width--75">Width 75%</div>
Modifier | Value |
---|---|
0 | None |
sm | 260px |
md | 300px |
lg | 500px |
25 | 25% |
33 | 33% |
50 | 50% |
66 | 66% |
75 | 75% |
full | 100% |
auto | auto |
Misc
Additional classes that do not fit in a category of their own.
Position relative
Many times before positioning an element absolutely, the parent element will need to be set to have a position of relative.
<div class="pos--relative"></div>
Vertical align
If you are not using flexbox and need to vertically align two elements, use the vertical align class.
NOTE: This utility class only applies the vertical-align: middle;
CSS property and only works on inline
or inline-block
elements that are siblings of each other. Please keep this in mind when troubleshooting this functionality. For more information on this property (and some helpful troubleshooting tips), please see this article.
<div class="parent-element">
<span class="valign--middle">Inline element</span>
<span class="valign--middle">Inline-block element with quite a bit more text than the first child.</span>
</div>
Resetting HTML elements
The utility class iris-content
normalizes elements and provides a much more opinionated typographic style to content affecting font weights, sizes, decorators, margins and paddings. This can be used to provide normalized Iris typography after a third party CSS reset has been used. The most common example of this can be seen with list elements:
- If your
- List elements
- Are reset
- By other CSS
- Use the iris-content
- Class on the ul
- To add those
- Styles back in
<ul class="iris-content">
<li>Use the iris-content</li>
<li>Class on the ul</li>
<li>To add those</li>
<li>Styles back in</li>
</ul>
Whenever something looks to be reset or stripped of its browser styling that needs to be added back, simply apply the iris-content
class.