C4S docs docu­menta­tion

Version 0.6.1
NPM Github
Selectors
Declarations

Module aspect-ratio

Examples View CSS
.ratio-1x1
aspect-ratio: 1;
.ratio-16x9
aspect-ratio: 16 / 9;

Module background-attachment

Examples View CSS
.bg-scroll
background-attachment: scroll;
.bg-fixed
background-attachment: fixed;
.bg-local
background-attachment: local;

Module background-clip

Examples View CSS
.bg-clip-text
  • -webkit-background-clip: text;
  • background-clip: text;

Module background-color

Examples View CSS
.bg-black
background-color: #000;
.bg-near-black
background-color: #111;
.bg-dark-gray
background-color: #333;
.bg-mid-gray
background-color: #555;
.bg-gray
background-color: #777;
.bg-silver
background-color: #999;
.bg-light-silver
background-color: #aaa;
.bg-moon-gray
background-color: #ccc;
.bg-light-gray
background-color: #eee;
.bg-near-white
background-color: #f4f4f4;
.bg-white
background-color: #fff;
.bg-dark-red
background-color: #e7040f;
.bg-red
background-color: #ff4136;
.bg-light-red
background-color: #ff725c;
.bg-washed-red
background-color: #ffdfdf;
.bg-orange
background-color: #ff6300;
.bg-gold
background-color: #ffb700;
.bg-yellow
background-color: #ffd700;
.bg-light-yellow
background-color: #fbf1a9;
.bg-washed-yellow
background-color: #fffceb;
.bg-purple
background-color: #5e2ca5;
.bg-light-purple
background-color: #a463f2;
.bg-dark-pink
background-color: #d5008f;
.bg-hot-pink
background-color: #ff41b4;
.bg-pink
background-color: #ff80cc;
.bg-light-pink
background-color: #ffa3d7;
.bg-dark-green
background-color: #137752;
.bg-green
background-color: #19a974;
.bg-light-green
background-color: #9eebcf;
.bg-washed-green
background-color: #e8fdf5;
.bg-navy
background-color: #001b44;
.bg-dark-blue
background-color: #00449e;
.bg-blue
background-color: #357edd;
.bg-light-blue
background-color: #96ccff;
.bg-lightest-blue
background-color: #cdecff;
.bg-washed-blue
background-color: #f6fffe;
.bg-black-90
background-color: rgba(0, 0, 0, 0.9);
.bg-black-80
background-color: rgba(0, 0, 0, 0.8);
.bg-black-70
background-color: rgba(0, 0, 0, 0.7);
.bg-black-60
background-color: rgba(0, 0, 0, 0.6);
.bg-black-50
background-color: rgba(0, 0, 0, 0.5);
.bg-black-40
background-color: rgba(0, 0, 0, 0.4);
.bg-black-30
background-color: rgba(0, 0, 0, 0.3);
.bg-black-20
background-color: rgba(0, 0, 0, 0.2);
.bg-black-10
background-color: rgba(0, 0, 0, 0.1);
.bg-black-05
background-color: rgba(0, 0, 0, 0.05);
.bg-black-025
background-color: rgba(0, 0, 0, 0.025);
.bg-black-0125
background-color: rgba(0, 0, 0, 0.0125);
.bg-white-90
background-color: rgba(255, 255, 255, 0.9);
.bg-white-80
background-color: rgba(255, 255, 255, 0.8);
.bg-white-70
background-color: rgba(255, 255, 255, 0.7);
.bg-white-60
background-color: rgba(255, 255, 255, 0.6);
.bg-white-50
background-color: rgba(255, 255, 255, 0.5);
.bg-white-40
background-color: rgba(255, 255, 255, 0.4);
.bg-white-30
background-color: rgba(255, 255, 255, 0.3);
.bg-white-20
background-color: rgba(255, 255, 255, 0.2);
.bg-white-10
background-color: rgba(255, 255, 255, 0.1);
.bg-white-05
background-color: rgba(255, 255, 255, 0.05);
.bg-white-025
background-color: rgba(255, 255, 255, 0.025);
.bg-white-0125
background-color: rgba(255, 255, 255, 0.0125);
.bg-transparent
background-color: transparent;
.bg-color-inherit
background-color: inherit;

Module background-position

Examples View CSS
.bg-top
background-position: top;
.bg-center
background-position: center;

Module background-repeat

Examples View CSS
.bg-no-repeat
background-repeat: no-repeat;

Module background-size

Examples View CSS
.bg-cover
background-size: cover;
.bg-contain
background-size: contain;

Module border

Examples View CSS
.ba
  • border-style: solid;
  • border-width: 1px;
.bt
  • border-top-style: solid;
  • border-top-width: 1px;
.br
  • border-right-style: solid;
  • border-right-width: 1px;
.bb
  • border-bottom-style: solid;
  • border-bottom-width: 1px;
.bl
  • border-left-style: solid;
  • border-left-width: 1px;
.bn
  • border-style: none;
  • border-width: 0;

Module border-color

Examples View CSS
.b--black
border-color: #000;
.b--near-black
border-color: #111;
.b--dark-gray
border-color: #333;
.b--mid-gray
border-color: #555;
.b--gray
border-color: #777;
.b--silver
border-color: #999;
.b--light-silver
border-color: #aaa;
.b--moon-gray
border-color: #ccc;
.b--light-gray
border-color: #eee;
.b--near-white
border-color: #f4f4f4;
.b--white
border-color: #fff;
.b--dark-red
border-color: #e7040f;
.b--red
border-color: #ff4136;
.b--light-red
border-color: #ff725c;
.b--washed-red
border-color: #ffdfdf;
.b--orange
border-color: #ff6300;
.b--gold
border-color: #ffb700;
.b--yellow
border-color: #ffd700;
.b--light-yellow
border-color: #fbf1a9;
.b--washed-yellow
border-color: #fffceb;
.b--purple
border-color: #5e2ca5;
.b--light-purple
border-color: #a463f2;
.b--dark-pink
border-color: #d5008f;
.b--hot-pink
border-color: #ff41b4;
.b--pink
border-color: #ff80cc;
.b--light-pink
border-color: #ffa3d7;
.b--dark-green
border-color: #137752;
.b--green
border-color: #19a974;
.b--light-green
border-color: #9eebcf;
.b--washed-green
border-color: #e8fdf5;
.b--navy
border-color: #001b44;
.b--dark-blue
border-color: #00449e;
.b--blue
border-color: #357edd;
.b--light-blue
border-color: #96ccff;
.b--lightest-blue
border-color: #cdecff;
.b--washed-blue
border-color: #f6fffe;
.b--black-90
border-color: rgba(0, 0, 0, 0.9);
.b--black-80
border-color: rgba(0, 0, 0, 0.8);
.b--black-70
border-color: rgba(0, 0, 0, 0.7);
.b--black-60
border-color: rgba(0, 0, 0, 0.6);
.b--black-50
border-color: rgba(0, 0, 0, 0.5);
.b--black-40
border-color: rgba(0, 0, 0, 0.4);
.b--black-30
border-color: rgba(0, 0, 0, 0.3);
.b--black-20
border-color: rgba(0, 0, 0, 0.2);
.b--black-10
border-color: rgba(0, 0, 0, 0.1);
.b--black-05
border-color: rgba(0, 0, 0, 0.05);
.b--black-025
border-color: rgba(0, 0, 0, 0.025);
.b--black-0125
border-color: rgba(0, 0, 0, 0.0125);
.b--white-90
border-color: rgba(255, 255, 255, 0.9);
.b--white-80
border-color: rgba(255, 255, 255, 0.8);
.b--white-70
border-color: rgba(255, 255, 255, 0.7);
.b--white-60
border-color: rgba(255, 255, 255, 0.6);
.b--white-50
border-color: rgba(255, 255, 255, 0.5);
.b--white-40
border-color: rgba(255, 255, 255, 0.4);
.b--white-30
border-color: rgba(255, 255, 255, 0.3);
.b--white-20
border-color: rgba(255, 255, 255, 0.2);
.b--white-10
border-color: rgba(255, 255, 255, 0.1);
.b--white-05
border-color: rgba(255, 255, 255, 0.05);
.b--white-025
border-color: rgba(255, 255, 255, 0.025);
.b--white-0125
border-color: rgba(255, 255, 255, 0.0125);
.b--transparent
border-color: transparent;
.b--color-inherit
border-color: inherit;

Module border-radius

Examples View CSS
.br0
border-radius: 0;
.br1
border-radius: 0.125rem;
.br2
border-radius: 0.25rem;
.br3
border-radius: 0.5rem;
.br4
border-radius: 1rem;
.br-100
border-radius: 100%;
.br-pill
border-radius: 99999px;
.br--top
  • border-bottom-right-radius: 0;
  • border-bottom-left-radius: 0;
.br--right
  • border-top-left-radius: 0;
  • border-bottom-left-radius: 0;
.br--bottom
  • border-top-right-radius: 0;
  • border-top-left-radius: 0;
.br--left
  • border-top-right-radius: 0;
  • border-bottom-right-radius: 0;

Module border-style

Examples View CSS
.b--solid
border-style: solid;
.b--dotted
border-style: dotted;
.b--dashed
border-style: dashed;
.b--double
border-style: double;
.b--groove
border-style: groove;
.b--ridge
border-style: ridge;
.b--inset
border-style: inset;
.b--outset
border-style: outset;

Module border-width

Examples View CSS
.bw1
border-width: 0.125rem;
.bw2
border-width: 0.25rem;
.bw3
border-width: 0.5rem;
.bw4
border-width: 1rem;
.bw5
border-width: 2rem;

Module box-shadow

Examples View CSS
.shadow-small
box-shadow: 0 0.125rem 0.5rem 0.125rem rgba(0, 0, 0, 0.2);
.shadow
box-shadow: 0 0.5rem 1rem 0.125rem rgba(0, 0, 0, 0.2);
.shadow-big
box-shadow: 0 1rem 2rem 0.25rem rgba(0, 0, 0, 0.2);

Module box-sizing

Examples View CSS
.border-box
box-sizing: border-box;
.content-box
box-sizing: content-box;

Module color

Examples View CSS
.black
color: #000;
.near-black
color: #111;
.dark-gray
color: #333;
.mid-gray
color: #555;
.gray
color: #777;
.silver
color: #999;
.light-silver
color: #aaa;
.moon-gray
color: #ccc;
.light-gray
color: #eee;
.near-white
color: #f4f4f4;
.white
color: #fff;
.dark-red
color: #e7040f;
.red
color: #ff4136;
.light-red
color: #ff725c;
.washed-red
color: #ffdfdf;
.orange
color: #ff6300;
.gold
color: #ffb700;
.yellow
color: #ffd700;
.light-yellow
color: #fbf1a9;
.washed-yellow
color: #fffceb;
.purple
color: #5e2ca5;
.light-purple
color: #a463f2;
.dark-pink
color: #d5008f;
.hot-pink
color: #ff41b4;
.pink
color: #ff80cc;
.light-pink
color: #ffa3d7;
.dark-green
color: #137752;
.green
color: #19a974;
.light-green
color: #9eebcf;
.washed-green
color: #e8fdf5;
.navy
color: #001b44;
.dark-blue
color: #00449e;
.blue
color: #357edd;
.light-blue
color: #96ccff;
.lightest-blue
color: #cdecff;
.washed-blue
color: #f6fffe;
.black-90
color: rgba(0, 0, 0, 0.9);
.black-80
color: rgba(0, 0, 0, 0.8);
.black-70
color: rgba(0, 0, 0, 0.7);
.black-60
color: rgba(0, 0, 0, 0.6);
.black-50
color: rgba(0, 0, 0, 0.5);
.black-40
color: rgba(0, 0, 0, 0.4);
.black-30
color: rgba(0, 0, 0, 0.3);
.black-20
color: rgba(0, 0, 0, 0.2);
.black-10
color: rgba(0, 0, 0, 0.1);
.black-05
color: rgba(0, 0, 0, 0.05);
.black-025
color: rgba(0, 0, 0, 0.025);
.black-0125
color: rgba(0, 0, 0, 0.0125);
.white-90
color: rgba(255, 255, 255, 0.9);
.white-80
color: rgba(255, 255, 255, 0.8);
.white-70
color: rgba(255, 255, 255, 0.7);
.white-60
color: rgba(255, 255, 255, 0.6);
.white-50
color: rgba(255, 255, 255, 0.5);
.white-40
color: rgba(255, 255, 255, 0.4);
.white-30
color: rgba(255, 255, 255, 0.3);
.white-20
color: rgba(255, 255, 255, 0.2);
.white-10
color: rgba(255, 255, 255, 0.1);
.white-05
color: rgba(255, 255, 255, 0.05);
.white-025
color: rgba(255, 255, 255, 0.025);
.white-0125
color: rgba(255, 255, 255, 0.0125);
.transparent
color: transparent;
.color-inherit
color: inherit;

Module complex

Examples View CSS
.bt-between + .bt-between
  • border-top-style: solid;
  • border-top-width: 1px;
.bl-between + .bl-between
  • border-left-style: solid;
  • border-left-width: 1px;
.pt0-between + .pt0-between
padding-top: 0;
.pt1-between + .pt1-between
padding-top: 0.25rem;
.pt2-between + .pt2-between
padding-top: 0.5rem;
.pt3-between + .pt3-between
padding-top: 1rem;
.pt4-between + .pt4-between
padding-top: 2rem;
.pt5-between + .pt5-between
padding-top: 4rem;
.pt6-between + .pt6-between
padding-top: 8rem;
.pt7-between + .pt7-between
padding-top: 16rem;
.pl0-between + .pl0-between
padding-left: 0;
.pl1-between + .pl1-between
padding-left: 0.25rem;
.pl2-between + .pl2-between
padding-left: 0.5rem;
.pl3-between + .pl3-between
padding-left: 1rem;
.pl4-between + .pl4-between
padding-left: 2rem;
.pl5-between + .pl5-between
padding-left: 4rem;
.pl6-between + .pl6-between
padding-left: 8rem;
.pl7-between + .pl7-between
padding-left: 16rem;
.mt0-between + .mt0-between
margin-top: 0;
.mt1-between + .mt1-between
margin-top: 0.25rem;
.mt2-between + .mt2-between
margin-top: 0.5rem;
.mt3-between + .mt3-between
margin-top: 1rem;
.mt4-between + .mt4-between
margin-top: 2rem;
.mt5-between + .mt5-between
margin-top: 4rem;
.mt6-between + .mt6-between
margin-top: 8rem;
.mt7-between + .mt7-between
margin-top: 16rem;
.ml0-between + .ml0-between
margin-left: 0;
.ml1-between + .ml1-between
margin-left: 0.25rem;
.ml2-between + .ml2-between
margin-left: 0.5rem;
.ml3-between + .ml3-between
margin-left: 1rem;
.ml4-between + .ml4-between
margin-left: 2rem;
.ml5-between + .ml5-between
margin-left: 4rem;
.ml6-between + .ml6-between
margin-left: 8rem;
.ml7-between + .ml7-between
margin-left: 16rem;

Module coordinates

Examples View CSS
.top-0
top: 0;
.right-0
right: 0;
.bottom-0
bottom: 0;
.left-0
left: 0;
.top-1
top: 1rem;
.right-1
right: 1rem;
.bottom-1
bottom: 1rem;
.left-1
left: 1rem;
.top-2
top: 2rem;
.right-2
right: 2rem;
.bottom-2
bottom: 2rem;
.left-2
left: 2rem;
.top-50
top: 50%;
.right-50
right: 50%;
.bottom-50
bottom: 50%;
.left-50
left: 50%;
.top-100
top: 100%;
.right-100
right: 100%;
.bottom-100
bottom: 100%;
.left-100
left: 100%;

Module cursor

Examples View CSS
.cursor-pointer
cursor: pointer;
.cursor-text
cursor: text;
.cursor-none
cursor: none;
.cursor-not-allowed
cursor: not-allowed;
.cursor-progress
cursor: progress;
.cursor-wait
cursor: wait;

Module debug

Examples View CSS
.debug-grid
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=") repeat top left;
.debug-grid-16
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=") repeat top left;
.debug-grid-solid-8
background: white url("data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==") repeat top left;
.debug-grid-solid-16
background: white url("data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7") repeat top left;
.debug-outlines *
outline: 1px solid gold;
.debug-striped
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px);
.debug-striped-light
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 10px, transparent 10px, transparent 20px);
.debug-striped-black
background-image: repeating-linear-gradient(-45deg, #000, #000 10px, transparent 10px, transparent 20px);

Module display

Examples View CSS
.db
display: block;
.block
display: block;
.di
display: inline;
.inline
display: inline;
.dib
display: inline-block;
.inline-block
display: inline-block;
.dn
display: none;
.dt
display: table;
.dtc
display: table-cell;
.df
display: flex;
.flex
display: flex;
.dif
display: inline-flex;
.inline-flex
display: inline-flex;
.dg
display: grid;
.grid
display: grid;
.dc
display: contents;
.dfr
display: flow-root;

Module flex

Examples View CSS
.flex-wrap
flex-wrap: wrap;
.flex-nowrap
flex-wrap: nowrap;
.flex-wrap-reverse
flex-wrap: wrap-reverse;
.items-start
align-items: flex-start;
.items-end
align-items: flex-end;
.items-center
align-items: center;
.items-baseline
align-items: baseline;
.items-stretch
align-items: stretch;
.self-start
align-self: flex-start;
.self-end
align-self: flex-end;
.self-center
align-self: center;
.self-baseline
align-self: baseline;
.self-stretch
align-self: stretch;
.content-start
align-content: flex-start;
.content-end
align-content: flex-end;
.content-center
align-content: center;
.content-between
align-content: space-between;
.content-around
align-content: space-around;
.content-stretch
align-content: stretch;
.justify-start
justify-content: flex-start;
.justify-end
justify-content: flex-end;
.justify-center
justify-content: center;
.justify-between
justify-content: space-between;
.justify-around
justify-content: space-around;
.justify-evenly
justify-content: space-evenly;
.flex-grow-0
flex-grow: 0;
.flex-grow-1
flex-grow: 1;
.flex-shrink-0
flex-shrink: 0;
.flex-shrink-1
flex-shrink: 1;
.order-1
order: 1;
.order-2
order: 2;
.order-3
order: 3;
.order-4
order: 4;
.order-5
order: 5;
.order-6
order: 6;
.order-7
order: 7;
.order-8
order: 8;
.order-9
order: 9;
.order-last
order: 99999;

Module flex-direction

Examples View CSS
.flex-column
flex-direction: column;
.flex-row
flex-direction: row;
.flex-column-reverse
flex-direction: column-reverse;
.flex-row-reverse
flex-direction: row-reverse;

Module float

Examples View CSS
.fl
float: left;
.fr
float: right;
.fn
float: none;
.clearfix::after
  • content: "";
  • display: block;
  • clear: both;

Module font-family

Examples View CSS
.sans-serif
font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
.serif
font-family: georgia, times, serif;
.code
font-family: consolas, monaco, monospace;
.font-inherit
font-family: inherit;

Module font-size

Examples View CSS
.f-headline
font-size: 6rem;
.f-subheadline
font-size: 5rem;
.f1
font-size: 3.0517578125em;
.f2
font-size: 2.44140625em;
.f3
font-size: 1.953125em;
.f4
font-size: 1.5625em;
.f5
font-size: 1.25em;
.f6
font-size: 1em;
.small
font-size: 0.8em;

Module font-style

Examples View CSS
.fs-normal
font-style: normal;
.fs-italic
font-style: italic;
.i
font-style: italic;

Module font-weight

Examples View CSS
.fw-100
font-weight: 100;
.fw-200
font-weight: 200;
.fw-300
font-weight: 300;
.fw-400
font-weight: 400;
.fw-500
font-weight: 500;
.fw-600
font-weight: 600;
.fw-700
font-weight: 700;
.fw-800
font-weight: 800;
.fw-900
font-weight: 900;
.fw-lighter
font-weight: lighter;
.fw-bolder
font-weight: bolder;
.fw-normal
font-weight: 400;
.b
font-weight: 700;

Module grid

Examples View CSS
.row
  • display: flex;
  • flex-wrap: wrap;
.col
flex: 1 0 0%;
.col-auto
flex: 0 0 auto;
.col-1
flex: 0 0 auto;
.col-2
flex: 0 0 auto;
.col-3
flex: 0 0 auto;
.col-4
flex: 0 0 auto;
.col-5
flex: 0 0 auto;
.col-6
flex: 0 0 auto;
.col-7
flex: 0 0 auto;
.col-8
flex: 0 0 auto;
.col-9
flex: 0 0 auto;
.col-10
flex: 0 0 auto;
.col-11
flex: 0 0 auto;
.col-12
flex: 0 0 auto;
.col-auto
width: auto;
.col-1
width: calc(8.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 12);
.col-2
width: calc(16.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 6);
.col-3
width: calc(25% - var(--column-gap, 0px) + var(--column-gap, 0px) / 4);
.col-4
width: calc(33.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 3);
.col-5
width: calc(41.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 2.4);
.col-6
width: calc(50% - var(--column-gap, 0px) + var(--column-gap, 0px) / 2);
.col-7
width: calc(58.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.7142857143);
.col-8
width: calc(66.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.5);
.col-9
width: calc(75% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.3333333333);
.col-10
width: calc(83.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.2);
.col-11
width: calc(91.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.0909090909);
.col-12
width: 100%;
.column-gap
  • --column-gap: 1rem;
  • -moz-column-gap: var(--column-gap);
  • column-gap: var(--column-gap);
.row-gap
row-gap: 1rem;

Module height

Examples View CSS
.h0
height: 0;
.h1
height: 1rem;
.h2
height: 2rem;
.h3
height: 4rem;
.h4
height: 8rem;
.h5
height: 16rem;
.h6
height: 32rem;
.h-0
height: 0;
.h-25
height: 25%;
.h-50
height: 50%;
.h-75
height: 75%;
.h-100
height: 100%;
.h-auto
height: auto;
.h-inherit
height: inherit;
.vh-25
height: 25vh;
.vh-50
height: 50vh;
.vh-75
height: 75vh;
.vh-100
height: 100vh;
.min-vh-100
min-height: 100vh;

Module hover

Examples View CSS
.dim
transition: opacity 0.15s ease-in;
.dim:hover,
.dim:focus
opacity: 0.5;
.grow,
.grow-large
transition: transform 0.25s ease-out;
.grow:hover,
.grow:focus
transform: scale(1.05);
.grow:active
transform: scale(0.9);
.grow-large:hover,
.grow-large:focus
transform: scale(1.2);
.grow-large:active
transform: scale(0.95);
.link
  • text-decoration: none;
  • transition: color 0.15s ease-in;
.link:focus
outline: 1px dotted currentcolor;
.hide-child .child
  • opacity: 0;
  • transition: opacity 0.15s ease-in;
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child
opacity: 1;
.hover-underline:hover,
.hover-underline:focus
text-decoration: underline;

Module hover-background-color

Examples View CSS
.hover-bg-black:hover
background-color: #000;
.hover-bg-near-black:hover
background-color: #111;
.hover-bg-dark-gray:hover
background-color: #333;
.hover-bg-mid-gray:hover
background-color: #555;
.hover-bg-gray:hover
background-color: #777;
.hover-bg-silver:hover
background-color: #999;
.hover-bg-light-silver:hover
background-color: #aaa;
.hover-bg-moon-gray:hover
background-color: #ccc;
.hover-bg-light-gray:hover
background-color: #eee;
.hover-bg-near-white:hover
background-color: #f4f4f4;
.hover-bg-white:hover
background-color: #fff;
.hover-bg-dark-red:hover
background-color: #e7040f;
.hover-bg-red:hover
background-color: #ff4136;
.hover-bg-light-red:hover
background-color: #ff725c;
.hover-bg-washed-red:hover
background-color: #ffdfdf;
.hover-bg-orange:hover
background-color: #ff6300;
.hover-bg-gold:hover
background-color: #ffb700;
.hover-bg-yellow:hover
background-color: #ffd700;
.hover-bg-light-yellow:hover
background-color: #fbf1a9;
.hover-bg-washed-yellow:hover
background-color: #fffceb;
.hover-bg-purple:hover
background-color: #5e2ca5;
.hover-bg-light-purple:hover
background-color: #a463f2;
.hover-bg-dark-pink:hover
background-color: #d5008f;
.hover-bg-hot-pink:hover
background-color: #ff41b4;
.hover-bg-pink:hover
background-color: #ff80cc;
.hover-bg-light-pink:hover
background-color: #ffa3d7;
.hover-bg-dark-green:hover
background-color: #137752;
.hover-bg-green:hover
background-color: #19a974;
.hover-bg-light-green:hover
background-color: #9eebcf;
.hover-bg-washed-green:hover
background-color: #e8fdf5;
.hover-bg-navy:hover
background-color: #001b44;
.hover-bg-dark-blue:hover
background-color: #00449e;
.hover-bg-blue:hover
background-color: #357edd;
.hover-bg-light-blue:hover
background-color: #96ccff;
.hover-bg-lightest-blue:hover
background-color: #cdecff;
.hover-bg-washed-blue:hover
background-color: #f6fffe;
.hover-bg-black-90:hover
background-color: rgba(0, 0, 0, 0.9);
.hover-bg-black-80:hover
background-color: rgba(0, 0, 0, 0.8);
.hover-bg-black-70:hover
background-color: rgba(0, 0, 0, 0.7);
.hover-bg-black-60:hover
background-color: rgba(0, 0, 0, 0.6);
.hover-bg-black-50:hover
background-color: rgba(0, 0, 0, 0.5);
.hover-bg-black-40:hover
background-color: rgba(0, 0, 0, 0.4);
.hover-bg-black-30:hover
background-color: rgba(0, 0, 0, 0.3);
.hover-bg-black-20:hover
background-color: rgba(0, 0, 0, 0.2);
.hover-bg-black-10:hover
background-color: rgba(0, 0, 0, 0.1);
.hover-bg-black-05:hover
background-color: rgba(0, 0, 0, 0.05);
.hover-bg-black-025:hover
background-color: rgba(0, 0, 0, 0.025);
.hover-bg-black-0125:hover
background-color: rgba(0, 0, 0, 0.0125);
.hover-bg-white-90:hover
background-color: rgba(255, 255, 255, 0.9);
.hover-bg-white-80:hover
background-color: rgba(255, 255, 255, 0.8);
.hover-bg-white-70:hover
background-color: rgba(255, 255, 255, 0.7);
.hover-bg-white-60:hover
background-color: rgba(255, 255, 255, 0.6);
.hover-bg-white-50:hover
background-color: rgba(255, 255, 255, 0.5);
.hover-bg-white-40:hover
background-color: rgba(255, 255, 255, 0.4);
.hover-bg-white-30:hover
background-color: rgba(255, 255, 255, 0.3);
.hover-bg-white-20:hover
background-color: rgba(255, 255, 255, 0.2);
.hover-bg-white-10:hover
background-color: rgba(255, 255, 255, 0.1);
.hover-bg-white-05:hover
background-color: rgba(255, 255, 255, 0.05);
.hover-bg-white-025:hover
background-color: rgba(255, 255, 255, 0.025);
.hover-bg-white-0125:hover
background-color: rgba(255, 255, 255, 0.0125);
.hover-bg-transparent:hover
background-color: transparent;
.hover-bg-color-inherit:hover
background-color: inherit;
.bg-animate
transition: background-color 0.15s ease-in-out;

Module hover-color

Examples View CSS
.hover-black:hover
color: #000;
.hover-near-black:hover
color: #111;
.hover-dark-gray:hover
color: #333;
.hover-mid-gray:hover
color: #555;
.hover-gray:hover
color: #777;
.hover-silver:hover
color: #999;
.hover-light-silver:hover
color: #aaa;
.hover-moon-gray:hover
color: #ccc;
.hover-light-gray:hover
color: #eee;
.hover-near-white:hover
color: #f4f4f4;
.hover-white:hover
color: #fff;
.hover-dark-red:hover
color: #e7040f;
.hover-red:hover
color: #ff4136;
.hover-light-red:hover
color: #ff725c;
.hover-washed-red:hover
color: #ffdfdf;
.hover-orange:hover
color: #ff6300;
.hover-gold:hover
color: #ffb700;
.hover-yellow:hover
color: #ffd700;
.hover-light-yellow:hover
color: #fbf1a9;
.hover-washed-yellow:hover
color: #fffceb;
.hover-purple:hover
color: #5e2ca5;
.hover-light-purple:hover
color: #a463f2;
.hover-dark-pink:hover
color: #d5008f;
.hover-hot-pink:hover
color: #ff41b4;
.hover-pink:hover
color: #ff80cc;
.hover-light-pink:hover
color: #ffa3d7;
.hover-dark-green:hover
color: #137752;
.hover-green:hover
color: #19a974;
.hover-light-green:hover
color: #9eebcf;
.hover-washed-green:hover
color: #e8fdf5;
.hover-navy:hover
color: #001b44;
.hover-dark-blue:hover
color: #00449e;
.hover-blue:hover
color: #357edd;
.hover-light-blue:hover
color: #96ccff;
.hover-lightest-blue:hover
color: #cdecff;
.hover-washed-blue:hover
color: #f6fffe;
.hover-black-90:hover
color: rgba(0, 0, 0, 0.9);
.hover-black-80:hover
color: rgba(0, 0, 0, 0.8);
.hover-black-70:hover
color: rgba(0, 0, 0, 0.7);
.hover-black-60:hover
color: rgba(0, 0, 0, 0.6);
.hover-black-50:hover
color: rgba(0, 0, 0, 0.5);
.hover-black-40:hover
color: rgba(0, 0, 0, 0.4);
.hover-black-30:hover
color: rgba(0, 0, 0, 0.3);
.hover-black-20:hover
color: rgba(0, 0, 0, 0.2);
.hover-black-10:hover
color: rgba(0, 0, 0, 0.1);
.hover-black-05:hover
color: rgba(0, 0, 0, 0.05);
.hover-black-025:hover
color: rgba(0, 0, 0, 0.025);
.hover-black-0125:hover
color: rgba(0, 0, 0, 0.0125);
.hover-white-90:hover
color: rgba(255, 255, 255, 0.9);
.hover-white-80:hover
color: rgba(255, 255, 255, 0.8);
.hover-white-70:hover
color: rgba(255, 255, 255, 0.7);
.hover-white-60:hover
color: rgba(255, 255, 255, 0.6);
.hover-white-50:hover
color: rgba(255, 255, 255, 0.5);
.hover-white-40:hover
color: rgba(255, 255, 255, 0.4);
.hover-white-30:hover
color: rgba(255, 255, 255, 0.3);
.hover-white-20:hover
color: rgba(255, 255, 255, 0.2);
.hover-white-10:hover
color: rgba(255, 255, 255, 0.1);
.hover-white-05:hover
color: rgba(255, 255, 255, 0.05);
.hover-white-025:hover
color: rgba(255, 255, 255, 0.025);
.hover-white-0125:hover
color: rgba(255, 255, 255, 0.0125);
.hover-transparent:hover
color: transparent;
.hover-color-inherit:hover
color: inherit;

Module letter-spacing

Examples View CSS
.tracked
letter-spacing: 0.1em;
.tracked-tight
letter-spacing: -0.05em;
.tracked-mega
letter-spacing: 0.25em;

Module line-height

Examples View CSS
.lh-solid
line-height: 1;
.lh-title
line-height: 1.15;
.lh-copy
line-height: 1.5;
.lh-extra
line-height: 2;

Module margin

Examples View CSS
.m0
margin: 0;
.m1
margin: 0.25rem;
.m2
margin: 0.5rem;
.m3
margin: 1rem;
.m4
margin: 2rem;
.m5
margin: 4rem;
.m6
margin: 8rem;
.m7
margin: 16rem;
.mt0
margin-top: 0;
.mt1
margin-top: 0.25rem;
.mt2
margin-top: 0.5rem;
.mt3
margin-top: 1rem;
.mt4
margin-top: 2rem;
.mt5
margin-top: 4rem;
.mt6
margin-top: 8rem;
.mt7
margin-top: 16rem;
.mt-auto
margin-top: auto;
.mr0
margin-right: 0;
.mr1
margin-right: 0.25rem;
.mr2
margin-right: 0.5rem;
.mr3
margin-right: 1rem;
.mr4
margin-right: 2rem;
.mr5
margin-right: 4rem;
.mr6
margin-right: 8rem;
.mr7
margin-right: 16rem;
.mr-auto
margin-right: auto;
.mb0
margin-bottom: 0;
.mb1
margin-bottom: 0.25rem;
.mb2
margin-bottom: 0.5rem;
.mb3
margin-bottom: 1rem;
.mb4
margin-bottom: 2rem;
.mb5
margin-bottom: 4rem;
.mb6
margin-bottom: 8rem;
.mb7
margin-bottom: 16rem;
.mb-auto
margin-bottom: auto;
.ml0
margin-left: 0;
.ml1
margin-left: 0.25rem;
.ml2
margin-left: 0.5rem;
.ml3
margin-left: 1rem;
.ml4
margin-left: 2rem;
.ml5
margin-left: 4rem;
.ml6
margin-left: 8rem;
.ml7
margin-left: 16rem;
.ml-auto
margin-left: auto;
.mh0
  • margin-left: 0;
  • margin-right: 0;
.mh1
  • margin-left: 0.25rem;
  • margin-right: 0.25rem;
.mh2
  • margin-left: 0.5rem;
  • margin-right: 0.5rem;
.mh3
  • margin-left: 1rem;
  • margin-right: 1rem;
.mh4
  • margin-left: 2rem;
  • margin-right: 2rem;
.mh5
  • margin-left: 4rem;
  • margin-right: 4rem;
.mh6
  • margin-left: 8rem;
  • margin-right: 8rem;
.mh7
  • margin-left: 16rem;
  • margin-right: 16rem;
.mh-auto
  • margin-left: auto;
  • margin-right: auto;
.center
  • margin-left: auto;
  • margin-right: auto;
.mv0
  • margin-top: 0;
  • margin-bottom: 0;
.mv1
  • margin-top: 0.25rem;
  • margin-bottom: 0.25rem;
.mv2
  • margin-top: 0.5rem;
  • margin-bottom: 0.5rem;
.mv3
  • margin-top: 1rem;
  • margin-bottom: 1rem;
.mv4
  • margin-top: 2rem;
  • margin-bottom: 2rem;
.mv5
  • margin-top: 4rem;
  • margin-bottom: 4rem;
.mv6
  • margin-top: 8rem;
  • margin-bottom: 8rem;
.mv7
  • margin-top: 16rem;
  • margin-bottom: 16rem;
.n1
margin: -0.25rem;
.n2
margin: -0.5rem;
.n3
margin: -1rem;
.n4
margin: -2rem;
.n5
margin: -4rem;
.nt1
margin-top: -0.25rem;
.nt2
margin-top: -0.5rem;
.nt3
margin-top: -1rem;
.nt4
margin-top: -2rem;
.nt5
margin-top: -4rem;
.nr1
margin-right: -0.25rem;
.nr2
margin-right: -0.5rem;
.nr3
margin-right: -1rem;
.nr4
margin-right: -2rem;
.nr5
margin-right: -4rem;
.nb1
margin-bottom: -0.25rem;
.nb2
margin-bottom: -0.5rem;
.nb3
margin-bottom: -1rem;
.nb4
margin-bottom: -2rem;
.nb5
margin-bottom: -4rem;
.nl1
margin-left: -0.25rem;
.nl2
margin-left: -0.5rem;
.nl3
margin-left: -1rem;
.nl4
margin-left: -2rem;
.nl5
margin-left: -4rem;
.nh1
  • margin-left: -0.25rem;
  • margin-right: -0.25rem;
.nh2
  • margin-left: -0.5rem;
  • margin-right: -0.5rem;
.nh3
  • margin-left: -1rem;
  • margin-right: -1rem;
.nh4
  • margin-left: -2rem;
  • margin-right: -2rem;
.nh5
  • margin-left: -4rem;
  • margin-right: -4rem;
.nv1
  • margin-top: -0.25rem;
  • margin-bottom: -0.25rem;
.nv2
  • margin-top: -0.5rem;
  • margin-bottom: -0.5rem;
.nv3
  • margin-top: -1rem;
  • margin-bottom: -1rem;
.nv4
  • margin-top: -2rem;
  • margin-bottom: -2rem;
.nv5
  • margin-top: -4rem;
  • margin-bottom: -4rem;

Module max-height

Examples View CSS
.mh-100
max-height: 100%;
.mh-none
max-height: none;

Module max-width

Examples View CSS
.mw0
max-width: 0;
.mw1
max-width: 1rem;
.mw2
max-width: 2rem;
.mw3
max-width: 4rem;
.mw4
max-width: 8rem;
.mw5
max-width: 16rem;
.mw6
max-width: 32rem;
.mw7
max-width: 48rem;
.mw8
max-width: 64rem;
.mw9
max-width: 96rem;
.mw-100
max-width: 100%;
.mw-none
max-width: none;

Module measure

Examples View CSS
.measure-narrow
max-width: 20em;
.measure
max-width: 30em;
.measure-wide
max-width: 34em;

Module miscellaneous

Examples View CSS
.list-reset
  • list-style-type: none;
  • padding-left: 0;
  • margin-top: 0;
  • margin-bottom: 0;
.button-reset
  • font-size: inherit;
  • font-family: inherit;
  • line-height: inherit;
  • background-color: inherit;
  • text-align: inherit;
  • border-style: none;
  • padding: 0;
.stretch
  • position: absolute;
  • inset: 0;
.stretch-pseudo::after
  • position: absolute;
  • inset: 0;
  • content: "";
  • pointer-events: auto;
  • background-color: transparent;
.dn-empty:empty
display: none;
.truncate
  • white-space: nowrap;
  • overflow: hidden;
  • text-overflow: ellipsis;
.svg-wrapper
  • width: 1.5rem;
  • height: 1.5rem;
  • max-height: 100%;
.svg-wrapper svg
  • width: 100%;
  • height: 100%;
  • vertical-align: top;
.sr-only
  • position: absolute;
  • clip: rect(0, 0, 0, 0);
.isolate
isolation: isolate;

Module object-fit

Examples View CSS
.contain
  • -o-object-fit: contain;
  • object-fit: contain;
.cover
  • -o-object-fit: cover;
  • object-fit: cover;
.fill
  • -o-object-fit: fill;
  • object-fit: fill;

Module opacity

Examples View CSS
.o-100
opacity: 1;
.o-90
opacity: 0.9;
.o-80
opacity: 0.8;
.o-70
opacity: 0.7;
.o-60
opacity: 0.6;
.o-50
opacity: 0.5;
.o-40
opacity: 0.4;
.o-30
opacity: 0.3;
.o-20
opacity: 0.2;
.o-10
opacity: 0.1;
.o-05
opacity: 0.05;
.o-025
opacity: 0.025;
.o-0
opacity: 0;

Module overflow

Examples View CSS
.overflow-visible
overflow: visible;
.overflow-hidden
overflow: hidden;
.overflow-scroll
overflow: scroll;
.overflow-auto
overflow: auto;
.overflow-x-visible
overflow-x: visible;
.overflow-x-hidden
overflow-x: hidden;
.overflow-x-scroll
overflow-x: scroll;
.overflow-x-auto
overflow-x: auto;
.overflow-y-visible
overflow-y: visible;
.overflow-y-hidden
overflow-y: hidden;
.overflow-y-scroll
overflow-y: scroll;
.overflow-y-auto
overflow-y: auto;

Module padding

Examples View CSS
.p0
padding: 0;
.p1
padding: 0.25rem;
.p2
padding: 0.5rem;
.p3
padding: 1rem;
.p4
padding: 2rem;
.p5
padding: 4rem;
.p6
padding: 8rem;
.p7
padding: 16rem;
.pt0
padding-top: 0;
.pt1
padding-top: 0.25rem;
.pt2
padding-top: 0.5rem;
.pt3
padding-top: 1rem;
.pt4
padding-top: 2rem;
.pt5
padding-top: 4rem;
.pt6
padding-top: 8rem;
.pt7
padding-top: 16rem;
.pr0
padding-right: 0;
.pr1
padding-right: 0.25rem;
.pr2
padding-right: 0.5rem;
.pr3
padding-right: 1rem;
.pr4
padding-right: 2rem;
.pr5
padding-right: 4rem;
.pr6
padding-right: 8rem;
.pr7
padding-right: 16rem;
.pb0
padding-bottom: 0;
.pb1
padding-bottom: 0.25rem;
.pb2
padding-bottom: 0.5rem;
.pb3
padding-bottom: 1rem;
.pb4
padding-bottom: 2rem;
.pb5
padding-bottom: 4rem;
.pb6
padding-bottom: 8rem;
.pb7
padding-bottom: 16rem;
.pl0
padding-left: 0;
.pl1
padding-left: 0.25rem;
.pl2
padding-left: 0.5rem;
.pl3
padding-left: 1rem;
.pl4
padding-left: 2rem;
.pl5
padding-left: 4rem;
.pl6
padding-left: 8rem;
.pl7
padding-left: 16rem;
.ph0
  • padding-left: 0;
  • padding-right: 0;
.ph1
  • padding-left: 0.25rem;
  • padding-right: 0.25rem;
.ph2
  • padding-left: 0.5rem;
  • padding-right: 0.5rem;
.ph3
  • padding-left: 1rem;
  • padding-right: 1rem;
.ph4
  • padding-left: 2rem;
  • padding-right: 2rem;
.ph5
  • padding-left: 4rem;
  • padding-right: 4rem;
.ph6
  • padding-left: 8rem;
  • padding-right: 8rem;
.ph7
  • padding-left: 16rem;
  • padding-right: 16rem;
.pv0
  • padding-top: 0;
  • padding-bottom: 0;
.pv1
  • padding-top: 0.25rem;
  • padding-bottom: 0.25rem;
.pv2
  • padding-top: 0.5rem;
  • padding-bottom: 0.5rem;
.pv3
  • padding-top: 1rem;
  • padding-bottom: 1rem;
.pv4
  • padding-top: 2rem;
  • padding-bottom: 2rem;
.pv5
  • padding-top: 4rem;
  • padding-bottom: 4rem;
.pv6
  • padding-top: 8rem;
  • padding-bottom: 8rem;
.pv7
  • padding-top: 16rem;
  • padding-bottom: 16rem;

Module position

Examples View CSS
.static
position: static;
.absolute
position: absolute;
.relative
position: relative;
.fixed
position: fixed;
.sticky
position: sticky;

Module reset

Examples View CSS
html
  • line-height: 1.15;
  • -webkit-text-size-adjust: 100%;
body
  • margin: 0;
  • box-sizing: border-box;
*,
*::before,
*::after
box-sizing: inherit;
img:where(:not(.no-reset))
  • display: block;
  • max-width: 100%;
  • height: auto;
button,
input,
optgroup,
select,
textarea
  • font-family: inherit;
  • font-size: 100%;
  • line-height: 1.15;
  • margin: 0;
h1,
h2,
h3,
h4,
h5,
h6
  • margin-top: 2.75rem;
  • margin-bottom: 1rem;
  • line-height: 1.15;
h1
font-size: 3.0517578125em;
h2
font-size: 2.44140625em;
h3
font-size: 1.953125em;
h4
font-size: 1.5625em;
h5
font-size: 1.25em;
h6
font-size: 1em;
small
font-size: 0.8em;
p
line-height: 1.5;
code
font-family: consolas, monaco, monospace;

Module resize

Examples View CSS
.resize
resize: both;
.resize-h
resize: horizontal;
.resize-v
resize: vertical;

Module spanning-breakpoints

Examples View CSS
.container
width: 100%;
.container-s
width: 100%;
.container-m
width: 100%;
.container-l
width: 100%;
.container-h
width: 100%;
.show-breakpoints::before
content: "[breakpoint: base] ";

Module table

Examples View CSS
.collapse
  • border-collapse: collapse;
  • border-spacing: 0;
.stripe-light:nth-child(odd)
background-color: rgba(0, 0, 0, 0.05);
.stripe-dark:nth-child(odd)
background-color: rgba(0, 0, 0, 0.1);

Module text-align

Examples View CSS
.tl
text-align: left;
.tr
text-align: right;
.tc
text-align: center;
.tj
text-align: justify;

Module text-decoration

Examples View CSS
.underline
text-decoration: underline;
.line-through
text-decoration: line-through;
.strike
text-decoration: line-through;
.no-underline
text-decoration: none;

Module text-shadow

Examples View CSS
.text-shadow
text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.6);

Module text-transform

Examples View CSS
.capitalize
text-transform: capitalize;
.uppercase
text-transform: uppercase;

Module transform

Examples View CSS
.translateX-0
transform: translateX(0);
.translateX-100
transform: translateX(100%);
.translateX-n100
transform: translateX(-100%);
.translateX-50
transform: translateX(50%);
.translateX-n50
transform: translateX(-50%);
.translateY-0
transform: translateY(0);
.translateY-100
transform: translateY(100%);
.translateY-n100
transform: translateY(-100%);
.translateY-50
transform: translateY(50%);
.translateY-n50
transform: translateY(-50%);

Module transition

Examples View CSS
.transition-slow
transition: all 0.5s ease-in-out;
.transition-medium
transition: all 0.25s ease-in-out;
.transition-fast
transition: all 0.15s ease-in-out;
.transition-transform-slow
transition: transform 0.5s ease-in-out;
.transition-transform-medium
transition: transform 0.25s ease-in-out;
.transition-transform-fast
transition: transform 0.15s ease-in-out;

Module user-select

Examples View CSS
.user-select-none
  • -webkit-user-select: none;
  • -moz-user-select: none;
  • user-select: none;
.user-select-all
  • -webkit-user-select: all;
  • -moz-user-select: all;
  • user-select: all;
.user-select-text
  • -webkit-user-select: text;
  • -moz-user-select: text;
  • user-select: text;

Module vertical-align

Examples View CSS
.v-mid
vertical-align: middle;
.v-middle
vertical-align: middle;
.v-top
vertical-align: top;
.v-bottom
vertical-align: bottom;

Module visibility

Examples View CSS
.visible
visibility: visible;
.hidden
visibility: hidden;
.invisible
visibility: hidden;

Module white-space

Examples View CSS
.nowrap
white-space: nowrap;
.pre
white-space: pre;
.pre-wrap
white-space: pre-wrap;

Module width

Examples View CSS
.w0
width: 0;
.w1
width: 1rem;
.w2
width: 2rem;
.w3
width: 4rem;
.w4
width: 8rem;
.w5
width: 16rem;
.w6
width: 32rem;
.w-10
width: 10%;
.w-20
width: 20%;
.w-25
width: 25%;
.w-30
width: 30%;
.w-third
width: 33.3333333333%;
.w-40
width: 40%;
.w-50
width: 50%;
.w-60
width: 60%;
.w-two-thirds
width: 66.6666666667%;
.w-70
width: 70%;
.w-75
width: 75%;
.w-80
width: 80%;
.w-90
width: 90%;
.w-100
width: 100%;
.w-auto
width: auto;
.vw-25
width: 25vw;
.vw-50
width: 50vw;
.vw-75
width: 75vw;
.vw-100
width: 100vw;
.min-vw-100
min-width: 100vw;

Module word-break

Examples View CSS
.word-break-all
word-break: break-all;
.word-break-word
word-break: break-word;
.word-break-normal
word-break: normal;

Module z-index

Examples View CSS
.z-last
z-index: 9999;
.z-n1
z-index: -1;
.z-0
z-index: 0;
.z-1
z-index: 1;
.z-2
z-index: 2;
.z-3
z-index: 3;
.z-4
z-index: 4;
.z-5
z-index: 5;
.z-6
z-index: 6;
.z-7
z-index: 7;
.z-8
z-index: 8;
.z-9
z-index: 9;