4 Utilities
Ready-to-use utility classes
Ready-to-use utility classes
Titles & texts styles. NB: You can use any class with any HTML tag.
Basic text
Caption text
Upper cased text
Lower cased text (default)
<h1 class="u-title-h1">Heading 1</h1>
<h2 class="u-title-h2">Heading 2</h2>
<h3 class="u-title-h3">Heading 3</h3>
<h4 class="u-title-h4">Heading 4</h4>
<p class="u-text">Basic text</p>
<p class="u-caption">Caption text</p>
<p class="u-uppercase">Upper cased text</p>
<p class="u-lowercase">Lower cased text (default)</p>1st step of border-radius (2px)
2nd step of border-radius (3px)
3rd step of border-radius (4px)
4th step of border-radius (8px)
Round element with border-radius (100%)
<div class="[modifier class] u-bg-dodgerBlue" style="width:4rem; height:4rem; "></div>1st step of border-width (0px)
2nd step of border-width (2px)
<div class="[modifier class] u-bg-dodgerBlue" style="width:4rem; height:4rem; border-color:red; border-style: solid "></div>Utilities that change cursor when hovering an element.
Force default cursor
help cursor for help and/or tips
pointer cursor showing the element is clickable
wait cursor to express that an action is pending
not allowed cursor, often used on a disabled element, to express your inhability to make an action
<a href="https://cozy.io" class="[modifier class]">I'm a link</a>Utilities that show or hide an element for a giving viewport size.
I'm visible! 🎉
Element is visually hidden but still readable by screen-readers
I'm visible! 🎉
Element is totally hidden (even for screen readers)
I'm visible! 🎉
Element is hidden on desktop (>768px)
Element is hidden on tablet (>1024px)
Element is hidden on mobile (<1023px)
<p class="[modifier class]">I'm visible! 🎉</p>Classes to add margins on top, bottom, right, left or all of them based on
default font-size (16px)
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Auto margin on all sides
No margins on all sides
Margins on all sides with half a line (8px)
Margins on all sides with 1 line (16px)
Margins on all sides with 1 line an a half (24px)
Margins on all sides with 2 lines (32px)
Margins on all sides with 1 line an a half (40px)
Margins on all sides with 2 lines (48px)
Auto vertically margins
No vertically margins
Vertically margins with half a line (8px)
Vertically margins with 1 line (16px)
Vertically margins with 1 line an a half (24px)
Vertically margins with 2 lines (32px)
Vertically margins with 1 line an a half (40px)
Vertically margins with 2 lines (48px)
Auto horizontally margins
No horizontally margins
Horizontally margins with half a line (8px)
Horizontally margins with 1 line (16px)
Horizontally margins with 1 line an a half (24px)
Horizontally margins with 2 lines (32px)
Horizontally margins with 1 line an a half (40px)
Horizontally margins with 2 lines (48px)
Margin Top auto
No margin Top
Margin Top with half a line (8px)
Margin Top with 1 line (16px)
Margin Top with 1 line an a half (24px)
Margin Top with 2 lines (32px)
Margin Top with 1 line an a half (40px)
Margin Top with 2 lines (48px)
Margin Bottom auto
No margin Bottom
Margin Bottom with half a line (8px)
Margin Bottom with 1 line (16px)
Margin Bottom with 1 line an a half (24px)
Margin Bottom with 2 lines (32px)
Margin Bottom with 1 line an a half (40px)
Margin Bottom with 2 lines (48px)
Margin Left auto
No margin Left
Margin Left with half a line (8px)
Margin Left with 1 line (16px)
Margin Left with 1 line an a half (24px)
Margin Left with 2 lines (32px)
Margin Left with 1 line an a half (40px)
Margin Left with 2 lines (48px)
Margin Right auto
No margin Right
Margin Right with half a line (8px)
Margin Right with 1 line (16px)
Margin Right with 1 line an a half (24px)
Margin Right with 2 lines (32px)
Margin Right with 1 line an a half (40px)
Margin Right with 2 lines (48px)
<div style="background-color:dimgrey; border: 1px solid black;"><div style="padding:.5rem; background-color:gainsboro;" class="[modifier class]">🎶 Gimme some margin 🎵 </div></div>Classes to add paddings on top, bottom, right, left or all of them based on
default font-size (16px)
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Auto paddings on all sides
No paddings on all sides
Paddings on all sides with half a line (8px)
Paddings on all sides with 1 line (16px)
Paddings on all sides with 1 line an a half (24px)
Paddings on all sides with 2 lines (32px)
Paddings on all sides with 1 line an a half (40px)
Paddings on all sides with 2 lines (48px)
Auto vertically paddings
No vertically paddings
Vertically paddings with half a line (8px)
Vertically paddings with 1 line (16px)
Vertically paddings with 1 line an a half (24px)
Vertically paddings with 2 lines (32px)
Vertically paddings with 1 line an a half (40px)
Vertically paddings with 2 lines (48px)
Auto horizontally paddings
No horizontally paddings
Horizontally paddings with half a line (8px)
Horizontally paddings with 1 line (16px)
Horizontally paddings with 1 line an a half (24px)
Horizontally paddings with 2 lines (32px)
Horizontally paddings with 1 line an a half (40px)
Horizontally paddings with 2 lines (48px)
Padding Top auto
No padding Top
Padding Top with half a line (8px)
Padding Top with 1 line (16px)
Padding Top with 1 line an a half (24px)
Padding Top with 2 lines (32px)
Padding Top with 1 line an a half (40px)
Padding Top with 2 lines (48px)
Padding Bottom auto
No padding Bottom
Padding Bottom with half a line (8px)
Padding Bottom with 1 line (16px)
Padding Bottom with 1 line an a half (24px)
Padding Bottom with 2 lines (32px)
Padding Bottom with 1 line an a half (40px)
Padding Bottom with 2 lines (48px)
Padding Left auto
No padding Left
Padding Left with half a line (8px)
Padding Left with 1 line (16px)
Padding Left with 1 line an a half (24px)
Padding Left with 2 lines (32px)
Padding Left with 1 line an a half (40px)
Padding Left with 2 lines (48px)
Padding Right auto
No padding Right
Padding Right with half a line (8px)
Padding Right with 1 line (16px)
Padding Right with 1 line an a half (24px)
Padding Right with 2 lines (32px)
Padding Right with 1 line an a half (40px)
Padding Right with 2 lines (48px)
<div style="background-color:gainsboro; display: inline-block;" class="[modifier class]"><span style="background-color:bisque;">🎼 Gimme some padding 💃</span></div>Classes to add spacing between the children elements.
Adds extra small spacing between its children
Adds small spacing between its children
Adds medium spacing between its children
Adds large spacing between its children
Adds extra large spacing between its children
Adds extra extra large spacing between its children
<div class="[modifier class]">
<div class="u-card">First children</div>
<div class="u-card">Second children</div>
<div class="u-card">Third children</div>
</div>Utilities to control text styling.
Utilities to style texts that have an intention behind them.
A message with an intention
Success text, can be used to indicate that everything is OK.
A message with an intention
Warning text, something seems to be wrong.
A message with an intention
Error text, something is definitely wrong. Use with parcimony.
A message with an intention
Info text, can be used to add informations.
A message with an intention
<p class="[modifier class]">A message with an intention</p>Utilities that give text a color from the existing palette. In general, try to use variables with semantic names instead of variables with names referring to colors. This will help to support theming.
Hello World!
primaryColor color
Hello World!
primaryColorLight color
Hello World!
primaryContrastTextColor color
Hello World!
block color
Hello World!
white color
Hello World!
paleGrey color
Hello World!
silver color
Hello World!
coolGrey color
Hello World!
slateGrey color
Hello World!
charcoalGrey color
Hello World!
dodgerBlue color
Hello World!
weirdGreen color
Hello World!
pomegranate color
Hello World!
monza color
Hello World!
overlay color
lightishPurple color
Hello World!
<p class="[modifier class]">Hello World!</p>Sets various line-height to a text
Aliquam etiam natoque
Sets a tiny line-height (1)
Aliquam etiam natoque
Sets a xsmall line-height (1.1)
Aliquam etiam natoque
Sets a small line-height (1.2)
Aliquam etiam natoque
Sets a medium line-height (1.3)
Aliquam etiam natoque
Sets a large line-height (1.4)
Aliquam etiam natoque
Sets a large line-height (1.5)
Aliquam etiam natoque
<p style="background-color: silver;" class="[modifier class]">Aliquam etiam natoque</p>Sets various font-size to a text
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet
Sets a tiny font-size (12px)
Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet
Sets a xsmall font-size (13px)
Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet
Sets a small font-size (14px)
Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet
Sets a medium font-size (16px)
Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet
Sets a large font-size (18px)
Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet
<p class="[modifier class]">Aliquam etiam natoque phasellus habitant interdum a hendrerit ac aliquet</p>Sets a font-style to a text
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a normal font style
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets an italic font style
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
<p class="[modifier class]">Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.</p>Sets a font-weight to a text
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a normal font weight
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a bold font weight
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
<p class="[modifier class]">Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.</p>Sets a text alignement to a text
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a left alignment
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a right alignment
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a center alignment
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
Sets a justify alignment
Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.
<p class="[modifier class]">Facilisis eget nam turpis id adipiscing facilisi odio ut fames, aliquet laoreet felis habitasse tincidunt litora leo senectus.</p>Adds ellipsis to a long text
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise
Ellipsis at the end
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise
<p class="[modifier class]">
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise
</p>Adds ellipsis to a long text but keeps breaking spaces
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise
Ellipsis at the end but keeps breaking spaces
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise
<p class="[modifier class]">
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise
</p>Allows some text to have the ellipsis right in the middle
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
Ellipsis in the middle
Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
<p class="[modifier class]">
<span>Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise</span>
<span>that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.</span>
</p>Style for a simple link
Link style
<a href="#" class="[modifier class]">Link</a>Sets the box-sizing of an element to border-box
<div class="[modifier class] u-w-4 u-p-1 u-bg-silver"></div>Adds a rounded outline
<div class="[modifier class]">
Content of a card
</div>Classes to change the box model of an element
Can be used with breakpoints modifier suffixes (-t,-s,-m)
NB: flex being much more complex, it has its own set of utility classes, see further.
Display none
Display inline
Display block
Display inline-block
Display inline-table
Display table
Display table-cell
Display table-row
Display table-row-group
Display table-column
Display table-column-group
<div class="[modifier class]" style="margin: 1rem; padding: .125rem .25rem; background-color:gainsboro; border: 1px solid black;">
<span>Suspendisse mauris</span>
<span>Nulla ex aptent</span>
<span>Nullam praesent</span>
</div>Adds a box shadow
<div class="[modifier class]">
Content of a card
</div>Classes to make Flexbox containers
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Display a flex element
Display an inline-flex element
Undisplay a flex element
<div class="[modifier class]" style="background-color:dimgrey; border: 1px solid black;">
<div style="padding:.5rem; background-color:gainsboro;">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div style="padding:.5rem; background-color:gainsboro;">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro;">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set Flexbox container's direction
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Set the direction to column
Set the direction to row
Set the direction to column-reverse
Set the direction to row-reverse
<div class="u-flex [modifier class]" style="background-color:dimgrey; border: 1px solid black;">
<div style="padding:.5rem; background-color:gainsboro;">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div style="padding:.5rem; background-color:gainsboro;">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro;">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set Flexbox container's wrapping
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Set the wrapping to true
Set the wrapping to false
Set the reverse wrapping to true
<div class="u-flex [modifier class]" style="background-color:dimgrey; border: 1px solid black;">
<div style="padding:.5rem; background-color:gainsboro; flex-basis: calc(50% -1rem);">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div style="padding:.5rem; background-color:gainsboro; flex-basis: calc(50% -1rem);">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro; flex-basis: calc(50% -1rem);">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set Flexbox items alignment
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Flex items aligned to flex-start
Flex items aligned to flex-end
Flex items aligned to center
Flex items aligned to baseline
Flex items aligned to stretch
<div class="u-flex u-flex-nowrap [modifier class]" style="background-color:dimgrey; border: 1px solid black; height: 100px";>
<div style="padding:.5rem; background-color:gainsboro;">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div style="padding:.5rem; background-color:gainsboro;">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro;">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set Flexbox items main axis alignment
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Set main axis alignment of flex items to flex-start
Set main axis alignment of flex items to flex-end
Set main axis alignment of flex items to center
Set main axis alignment of flex items to space-between
Set main axis alignment of flex items to space-around
Set container lines alignment to flex-start
<div class="u-flex u-flex-nowrap [modifier class]" style="background-color:dimgrey; border: 1px solid black; height: 100px";>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 1 20%">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 1 20%">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 1 20%">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set Flexbox line items alignment
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Set container lines alignment to flex-start
Set container lines alignment to flex-end
Set container lines alignment to center
Set container lines alignment to space-between
Set container lines alignment to space-around
Set container lines alignment to stretch
<div class="u-flex u-flex-wrap u-flex-items-start [modifier class]" style="background-color:dimgrey; border: 1px solid black; height: 300px";>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 0 100%">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 0 100%">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 0 100%">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set align-self on items
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Specific flex item aligned to flex-start
Specific flex item aligned to flex-end
Specific flex item aligned to center
Specific flex item aligned to baseline
Specific flex item aligned to stretch
<div class="u-flex u-flex-nowrap u-flex-items-start" style="background-color:dimgrey; border: 1px solid black; height: 300px";>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 0 30%">Suspendisse mauris montes elementum varius lectus ullamcorper per, ac praesent maximus curabitur parturient vitae.</div>
<div class="[modifier class]" style="padding:.5rem; background-color:gainsboro; flex: 0 0 30%">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:gainsboro; flex: 0 0 30%">Nullam praesent iaculis phasellus vel turpis taciti facilisis, fermentum bibendum himenaeos class efficitur urna, per nam ut parturient enim dapibus.</div>
</div>Classes to set order on items
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Set flex item order to 0
Set flex item order to 1
Set flex item order to 2
Set flex item order to 3
Set flex item order to 4
Set flex item order to 5
Set flex item order to 6
Set flex item order to 7
Set flex item order to 8
Set flex item order to the last position (99999)
<div class="u-flex u-flex-nowrap u-flex-items-start" style="background-color:dimgrey; border: 1px solid black;">
<div class="u-title-h1 [modifier class]" style="padding:.5rem; background-color:red; flex: 0 0 5%">item</div>
<div class="u-title-h1" style="order:1 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">1</div>
<div class="u-title-h1" style="order:2 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">2</div>
<div class="u-title-h1" style="order:3 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">3</div>
<div class="u-title-h1" style="order:4 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">4</div>
<div class="u-title-h1" style="order:5 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">5</div>
<div class="u-title-h1" style="order:6 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">6</div>
<div class="u-title-h1" style="order:7 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">7</div>
<div class="u-title-h1" style="order:8 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">8</div>
<div class="u-title-h1" style="order:9 ;padding:.5rem; background-color:gainsboro; flex: 0 0 5%">9</div>
</div>Classes to set items growth
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Make a flex item fill the space
Flex item doesn't grow
Flex item grows
<div class="u-flex u-flex-nowrap u-flex-items-start" style="background-color:dimgrey; border: 1px solid black;">
<div style="padding:.5rem; background-color:gainsboro;">Tincidunt at porttitor augue ac</div>
<div class="[modifier class]" style="padding:.5rem; background-color:bisque;">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum.</div>
<div style="padding:.5rem; background-color:darkkhaki;">Cubilia pharetra faucibus</div>
</div>Classes to set items shrink
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Flex item doesn't shrink
Flex item shrinks
<div class="u-flex u-flex-nowrap u-flex-items-start" style="background-color:dimgrey; border: 1px solid black;">
<div style="padding:.5rem; background-color:gainsboro;">Tincidunt at porttitor augue ac</div>
<div class="[modifier class]" style="padding:.5rem; background-color:bisque;">Nulla ex aptent eleifend tempus mauris habitant imperdiet porta, ac mattis lobortis felis per dictum commodo parturient condimentum.</div>
<div style="padding:.5rem; background-color:darkkhaki;">Cubilia pharetra faucibus commodo parturient condimentum inceptos montes nisl egestas facilisis.</div>
</div>Remove the bullet point from a list
<ul class="[modifier class]">
<li>Suspendisse mauris</li>
<li>Nulla ex aptent</li>
<li>Nullam praesent</li>
</ul>Classes to change the position of an element
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Absolute position
Relative position
Fixed position (relative to the viewport)
Sticky position
Static position
<div style="position: relative; margin: 1rem; padding: .125rem .25rem; background-color:gainsboro; border: 1px solid black;">
<div class="[modifier class]" style="background-color:green;">Nulla ex aptent</div>
</div>Classes to change the directional position of an element
Top 0
Top XS
Top S
Top M
Top L
Top XL
Top XXL
Bottom 0
Bottom XS
Bottom S
Bottom M
Bottom L
Bottom XL
Bottom XXL
Left 0
Left XS
Left S
Left M
Left L
Left XL
Left XXL
Right 0
Right XS
Right S
Right M
Right L
Right XL
Right XXL
<div style="position: relative; margin: 1rem; padding: .125rem .25rem; background-color:gainsboro; border: 1px solid black; height: 100px;">
<div class="u-pos-absolute u-w-1 u-h-1 [modifier class]" style="background-color:green;"></div>
</div>Classes to set width/height on elements
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Cancel width
Apply width half step in scale (0.5rem = 8px)
Apply width 1st step in scale (1rem = 16px)
Apply width 1st step + half in scale (1.5rem = 24px)
Apply width 2nd step in scale (2rem = 32px)
Apply width 2nd step + half in scale (2.5rem = 40px)
Apply width 3rd step in scale (4rem = 64px)
Apply width 4th step in scale (8rem = 128px)
Apply width 5th step in scale (16rem = 256px)
Apply width 6th step in scale (32rem = 512px)
Apply width 7th step in scale (48rem = 768px)
Apply width 8th step in scale (64rem = 1024px)
Apply width 9th step in scale (96rem = 1536px)
Apply width 100%
Cancel height
Apply height half step in scale (0.5rem = 8px)
Apply height 1st step in scale (1rem = 16px)
Apply height 1st step + half in scale (1.5rem = 24px)
Apply height 2nd step in scale (2rem = 32px)
Apply height 2nd step + half in scale (2.5rem = 40px)
Apply height 3rd step in scale (4rem = 64px)
Apply height 4th step in scale (8rem = 128px)
Apply height 5th step in scale (16rem = 256px)
Apply height 6th step in scale (32rem = 512px)
Apply height 7th step in scale (48rem = 768px)
Apply height 8th step in scale (64rem = 1024px)
Apply height 9th step in scale (96rem = 1536px)
Apply height 100%
<div class="[modifier class]" style="display: inline-block;background-color:gainsboro; border: 1px solid black;"> </div>Classes to set min-width/height on elements
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Cancel min-width
Apply min-width half step in scale (0.5rem = 8px)
Apply min-width 1st step in scale (1rem = 16px)
Apply min-width 1st step + half step in scale (1.5rem = 24px)
Apply min-width 2nd step in scale (2rem = 32px)
Apply min-width 2nd step + half step in scale (2.5rem = 40px)
Apply min-width 3rd step in scale (4rem = 64px)
Apply min-width 4th step in scale (8rem = 128px)
Apply min-width 5th step in scale (16rem = 256px)
Apply min-width 6th step in scale (32rem = 512px)
Apply min-width 7th step in scale (48rem = 768px)
Apply min-width 8th step in scale (64rem = 1024px)
Apply min-width 9th step in scale (96rem = 1536px)
Apply min-width 100%
Cancel min-height
Apply min-height half step in scale (0.5rem = 8px)
Apply min-height 1st step in scale (1rem = 16px)
Apply min-height 1st step + half step in scale (1.5rem = 24px)
Apply min-height 2nd step in scale (2rem = 32px)
Apply min-height 2nd step + half step in scale (2.5rem = 40px)
Apply min-height 3rd step in scale (4rem = 64px)
Apply min-height 4th step in scale (8rem = 128px)
Apply min-height 5th step in scale (16rem = 256px)
Apply min-height 6th step in scale (32rem = 512px)
Apply min-height 7th step in scale (48rem = 768px)
Apply min-height 8th step in scale (64rem = 1024px)
Apply min-height 9th step in scale (96rem = 1536px)
Apply min-height 100%
<div class="[modifier class]" style="display: inline-block;background-color:gainsboro; border: 1px solid black; min-width: 20px;"> </div>Classes to set max-width/height on elements
Can be used with breakpoints modifier suffixes (-t,-s,-m)
Cancel max-width
Apply max-width 1st step in scale (1rem = 16px)
Apply max-width 2nd step in scale (2rem = 32px)
Apply max-width 3rd step in scale (4rem = 64px)
Apply max-width 4th step in scale (8rem = 128px)
Apply max-width 5th step in scale (16rem = 256px)
Apply max-width 6th step in scale (32rem = 512px)
Apply max-width 7th step in scale (48rem = 768px)
Apply max-width 8th step in scale (64rem = 1024px)
Apply max-width 9th step in scale (96rem = 1536px)
Apply max-width 100%
Cancel max-height
Apply max-height 1st step in scale (1rem = 16px)
Apply max-height 2nd step in scale (2rem = 32px)
Apply max-height 3rd step in scale (4rem = 64px)
Apply max-height 4th step in scale (8rem = 128px)
Apply max-height 5th step in scale (16rem = 256px)
Apply max-height 6th step in scale (32rem = 512px)
Apply max-height 7th step in scale (48rem = 768px)
Apply max-height 8th step in scale (64rem = 1024px)
Apply max-height 9th step in scale (96rem = 1536px)
Apply max-height 100%
<div class="[modifier class]" style="background-color:gainsboro; border: 1px solid black;"> </div>Classes to set a background-color on elements
block color
white color
paleGrey color
silver color
coolGrey color
slateGrey color
charcoalGrey color
dodgerBlue color
pomegranate color
monza color
lightishPurple color
weirdGreen color
overlay color
primaryColor color
primaryBackgroundLight color
errorBackground color
neutralBackgroundLight color
<div class="[modifier class]" style="display: inline-block; width: 10rem; height: 2rem; border: 1px solid black;"></div>Classes to set the opacity
opacity: 1
opacity: .9
opacity: .8
opacity: .7
opacity: .6
opacity: .5
opacity: .4
opacity: .3
opacity: .2
opacity: .1
opacity: .05
opacity: .025
opacity: 0
<div class="[modifier class]" style="display: inline-block; width: 10rem; height: 2rem; border: 1px solid black;"></div>Classes to trigger CSS effects and animations.
.u-shake - Item will be shaked
<div class="">
Will be shaked
</div>Tells a container how its exceeding content behaves
Sets a visible overflow
Sets an hidden overflow
Sets a scroll overflow
Sets an auto overflow
<div style="border:1px solid var(--dividerColor);" class="u-mb-2 u-p-half u-w-5 u-h-4 [modifier class]">Non habitant lobortis hac maecenas eleifend donec parturient, lacinia aenean ac varius mattis purus scelerisque, congue montes dapibus tempor semper proin. Ullamcorper malesuada proin nec accumsan fermentum ac suspendisse posuere, lectus tristique tortor lorem faucibus primis sodales.</div>Applies graphical effects like grayscale to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
filter: grayscale(1)
<img class="[modifier class]" src="https://cozy.io/fr/images/cozy-logo_white.png" alt="" width="50" heigh="50">