C4S documentation

Aspect Ratio

More information

.ratio-1x1 {
  aspect-ratio: 1;
}

Element with class ratio-1x1

.ratio-16x9 {
  aspect-ratio: 16 / 9;
}

Element with class ratio-16x9

Background Attachment

More information

.bg-scroll {
  background-attachment: scroll;
}

(Example not found)

.bg-fixed {
  background-attachment: fixed;
}

(Example not found)

.bg-local {
  background-attachment: local;
}

(Example not found)

Background Clip

More information

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

Element with class bg-clip-text

Background Color

More information

.bg-black {
  background-color: #000;
}

Element with class bg-black

.bg-near-black {
  background-color: #111;
}

Element with class bg-near-black

.bg-dark-gray {
  background-color: #333;
}

Element with class bg-dark-gray

.bg-mid-gray {
  background-color: #555;
}

Element with class bg-mid-gray

.bg-gray {
  background-color: #777;
}

Element with class bg-gray

.bg-silver {
  background-color: #999;
}

Element with class bg-silver

.bg-light-silver {
  background-color: #aaa;
}

Element with class bg-light-silver

.bg-moon-gray {
  background-color: #ccc;
}

Element with class bg-moon-gray

.bg-light-gray {
  background-color: #eee;
}

Element with class bg-light-gray

.bg-near-white {
  background-color: #f4f4f4;
}

Element with class bg-near-white

.bg-white {
  background-color: #fff;
}

Element with class bg-white

.bg-dark-red {
  background-color: #e7040f;
}

Element with class bg-dark-red

.bg-red {
  background-color: #ff4136;
}

Element with class bg-red

.bg-light-red {
  background-color: #ff725c;
}

Element with class bg-light-red

.bg-washed-red {
  background-color: #ffdfdf;
}

Element with class bg-washed-red

.bg-orange {
  background-color: #ff6300;
}

Element with class bg-orange

.bg-gold {
  background-color: #ffb700;
}

Element with class bg-gold

.bg-yellow {
  background-color: #ffd700;
}

Element with class bg-yellow

.bg-light-yellow {
  background-color: #fbf1a9;
}

Element with class bg-light-yellow

.bg-washed-yellow {
  background-color: #fffceb;
}

Element with class bg-washed-yellow

.bg-purple {
  background-color: #5e2ca5;
}

Element with class bg-purple

.bg-light-purple {
  background-color: #a463f2;
}

Element with class bg-light-purple

.bg-dark-pink {
  background-color: #d5008f;
}

Element with class bg-dark-pink

.bg-hot-pink {
  background-color: #ff41b4;
}

Element with class bg-hot-pink

.bg-pink {
  background-color: #ff80cc;
}

Element with class bg-pink

.bg-light-pink {
  background-color: #ffa3d7;
}

Element with class bg-light-pink

.bg-dark-green {
  background-color: #137752;
}

Element with class bg-dark-green

.bg-green {
  background-color: #19a974;
}

Element with class bg-green

.bg-light-green {
  background-color: #9eebcf;
}

Element with class bg-light-green

.bg-washed-green {
  background-color: #e8fdf5;
}

Element with class bg-washed-green

.bg-navy {
  background-color: #001b44;
}

Element with class bg-navy

.bg-dark-blue {
  background-color: #00449e;
}

Element with class bg-dark-blue

.bg-blue {
  background-color: #357edd;
}

Element with class bg-blue

.bg-light-blue {
  background-color: #96ccff;
}

Element with class bg-light-blue

.bg-lightest-blue {
  background-color: #cdecff;
}

Element with class bg-lightest-blue

.bg-washed-blue {
  background-color: #f6fffe;
}

Element with class bg-washed-blue

.bg-black-90 {
  background-color: rgba(0, 0, 0, 0.9);
}

Element with class bg-black-90

.bg-black-80 {
  background-color: rgba(0, 0, 0, 0.8);
}

Element with class bg-black-80

.bg-black-70 {
  background-color: rgba(0, 0, 0, 0.7);
}

Element with class bg-black-70

.bg-black-60 {
  background-color: rgba(0, 0, 0, 0.6);
}

Element with class bg-black-60

.bg-black-50 {
  background-color: rgba(0, 0, 0, 0.5);
}

Element with class bg-black-50

.bg-black-40 {
  background-color: rgba(0, 0, 0, 0.4);
}

Element with class bg-black-40

.bg-black-30 {
  background-color: rgba(0, 0, 0, 0.3);
}

Element with class bg-black-30

.bg-black-20 {
  background-color: rgba(0, 0, 0, 0.2);
}

Element with class bg-black-20

.bg-black-10 {
  background-color: rgba(0, 0, 0, 0.1);
}

Element with class bg-black-10

.bg-black-05 {
  background-color: rgba(0, 0, 0, 0.05);
}

Element with class bg-black-05

.bg-black-025 {
  background-color: rgba(0, 0, 0, 0.025);
}

Element with class bg-black-025

.bg-black-0125 {
  background-color: rgba(0, 0, 0, 0.0125);
}

Element with class bg-black-0125

.bg-white-90 {
  background-color: rgba(255, 255, 255, 0.9);
}

Element with class bg-white-90

.bg-white-80 {
  background-color: rgba(255, 255, 255, 0.8);
}

Element with class bg-white-80

.bg-white-70 {
  background-color: rgba(255, 255, 255, 0.7);
}

Element with class bg-white-70

.bg-white-60 {
  background-color: rgba(255, 255, 255, 0.6);
}

Element with class bg-white-60

.bg-white-50 {
  background-color: rgba(255, 255, 255, 0.5);
}

Element with class bg-white-50

.bg-white-40 {
  background-color: rgba(255, 255, 255, 0.4);
}

Element with class bg-white-40

.bg-white-30 {
  background-color: rgba(255, 255, 255, 0.3);
}

Element with class bg-white-30

.bg-white-20 {
  background-color: rgba(255, 255, 255, 0.2);
}

Element with class bg-white-20

.bg-white-10 {
  background-color: rgba(255, 255, 255, 0.1);
}

Element with class bg-white-10

.bg-white-05 {
  background-color: rgba(255, 255, 255, 0.05);
}

Element with class bg-white-05

.bg-white-025 {
  background-color: rgba(255, 255, 255, 0.025);
}

Element with class bg-white-025

.bg-white-0125 {
  background-color: rgba(255, 255, 255, 0.0125);
}

Element with class bg-white-0125

.bg-transparent {
  background-color: transparent;
}

Element with class bg-transparent

.bg-color-inherit {
  background-color: inherit;
}

Element with class bg-color-inherit

Background Position

More information

.bg-top {
  background-position: top;
}

(Example not found)

.bg-center {
  background-position: center;
}

(Example not found)

Background Repeat

More information

.bg-no-repeat {
  background-repeat: no-repeat;
}

Element with class bg-no-repeat

Background Size

More information

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

Border

More information

.ba {
  border-style: solid;
  border-width: 1px;
}

Element with class ba

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

Element with class bt

.br {
  border-right-style: solid;
  border-right-width: 1px;
}

Element with class br

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

Element with class bb

.bl {
  border-left-style: solid;
  border-left-width: 1px;
}

Element with class bl

.bn {
  border-style: none;
  border-width: 0;
}

Element with class bn

Border Color

More information

.b--black {
  border-color: #000;
}

Element with class b--black

.b--near-black {
  border-color: #111;
}

Element with class b--near-black

.b--dark-gray {
  border-color: #333;
}

Element with class b--dark-gray

.b--mid-gray {
  border-color: #555;
}

Element with class b--mid-gray

.b--gray {
  border-color: #777;
}

Element with class b--gray

.b--silver {
  border-color: #999;
}

Element with class b--silver

.b--light-silver {
  border-color: #aaa;
}

Element with class b--light-silver

.b--moon-gray {
  border-color: #ccc;
}

Element with class b--moon-gray

.b--light-gray {
  border-color: #eee;
}

Element with class b--light-gray

.b--near-white {
  border-color: #f4f4f4;
}

Element with class b--near-white

.b--white {
  border-color: #fff;
}

Element with class b--white

.b--dark-red {
  border-color: #e7040f;
}

Element with class b--dark-red

.b--red {
  border-color: #ff4136;
}

Element with class b--red

.b--light-red {
  border-color: #ff725c;
}

Element with class b--light-red

.b--washed-red {
  border-color: #ffdfdf;
}

Element with class b--washed-red

.b--orange {
  border-color: #ff6300;
}

Element with class b--orange

.b--gold {
  border-color: #ffb700;
}

Element with class b--gold

.b--yellow {
  border-color: #ffd700;
}

Element with class b--yellow

.b--light-yellow {
  border-color: #fbf1a9;
}

Element with class b--light-yellow

.b--washed-yellow {
  border-color: #fffceb;
}

Element with class b--washed-yellow

.b--purple {
  border-color: #5e2ca5;
}

Element with class b--purple

.b--light-purple {
  border-color: #a463f2;
}

Element with class b--light-purple

.b--dark-pink {
  border-color: #d5008f;
}

Element with class b--dark-pink

.b--hot-pink {
  border-color: #ff41b4;
}

Element with class b--hot-pink

.b--pink {
  border-color: #ff80cc;
}

Element with class b--pink

.b--light-pink {
  border-color: #ffa3d7;
}

Element with class b--light-pink

.b--dark-green {
  border-color: #137752;
}

Element with class b--dark-green

.b--green {
  border-color: #19a974;
}

Element with class b--green

.b--light-green {
  border-color: #9eebcf;
}

Element with class b--light-green

.b--washed-green {
  border-color: #e8fdf5;
}

Element with class b--washed-green

.b--navy {
  border-color: #001b44;
}

Element with class b--navy

.b--dark-blue {
  border-color: #00449e;
}

Element with class b--dark-blue

.b--blue {
  border-color: #357edd;
}

Element with class b--blue

.b--light-blue {
  border-color: #96ccff;
}

Element with class b--light-blue

.b--lightest-blue {
  border-color: #cdecff;
}

Element with class b--lightest-blue

.b--washed-blue {
  border-color: #f6fffe;
}

Element with class b--washed-blue

.b--black-90 {
  border-color: rgba(0, 0, 0, 0.9);
}

Element with class b--black-90

.b--black-80 {
  border-color: rgba(0, 0, 0, 0.8);
}

Element with class b--black-80

.b--black-70 {
  border-color: rgba(0, 0, 0, 0.7);
}

Element with class b--black-70

.b--black-60 {
  border-color: rgba(0, 0, 0, 0.6);
}

Element with class b--black-60

.b--black-50 {
  border-color: rgba(0, 0, 0, 0.5);
}

Element with class b--black-50

.b--black-40 {
  border-color: rgba(0, 0, 0, 0.4);
}

Element with class b--black-40

.b--black-30 {
  border-color: rgba(0, 0, 0, 0.3);
}

Element with class b--black-30

.b--black-20 {
  border-color: rgba(0, 0, 0, 0.2);
}

Element with class b--black-20

.b--black-10 {
  border-color: rgba(0, 0, 0, 0.1);
}

Element with class b--black-10

.b--black-05 {
  border-color: rgba(0, 0, 0, 0.05);
}

Element with class b--black-05

.b--black-025 {
  border-color: rgba(0, 0, 0, 0.025);
}

Element with class b--black-025

.b--black-0125 {
  border-color: rgba(0, 0, 0, 0.0125);
}

Element with class b--black-0125

.b--white-90 {
  border-color: rgba(255, 255, 255, 0.9);
}

Element with class b--white-90

.b--white-80 {
  border-color: rgba(255, 255, 255, 0.8);
}

Element with class b--white-80

.b--white-70 {
  border-color: rgba(255, 255, 255, 0.7);
}

Element with class b--white-70

.b--white-60 {
  border-color: rgba(255, 255, 255, 0.6);
}

Element with class b--white-60

.b--white-50 {
  border-color: rgba(255, 255, 255, 0.5);
}

Element with class b--white-50

.b--white-40 {
  border-color: rgba(255, 255, 255, 0.4);
}

Element with class b--white-40

.b--white-30 {
  border-color: rgba(255, 255, 255, 0.3);
}

Element with class b--white-30

.b--white-20 {
  border-color: rgba(255, 255, 255, 0.2);
}

Element with class b--white-20

.b--white-10 {
  border-color: rgba(255, 255, 255, 0.1);
}

Element with class b--white-10

.b--white-05 {
  border-color: rgba(255, 255, 255, 0.05);
}

Element with class b--white-05

.b--white-025 {
  border-color: rgba(255, 255, 255, 0.025);
}

Element with class b--white-025

.b--white-0125 {
  border-color: rgba(255, 255, 255, 0.0125);
}

Element with class b--white-0125

.b--transparent {
  border-color: transparent;
}

Element with class b--transparent

.b--color-inherit {
  border-color: inherit;
}

Element with class b--color-inherit

Border Radius

More information

.br0 {
  border-radius: 0;
}

Element with class br0

.br1 {
  border-radius: 0.125rem;
}

Element with class br1

.br2 {
  border-radius: 0.25rem;
}

Element with class br2

.br3 {
  border-radius: 0.5rem;
}

Element with class br3

.br4 {
  border-radius: 1rem;
}

Element with class br4

.br5 {
  border-radius: 2rem;
}

Element with class br5

.br6 {
  border-radius: 4rem;
}

Element with class br6

.br-100 {
  border-radius: 100%;
}

Element with class br-100

.br-pill {
  border-radius: 9999999px;
}

Element with class br-pill

.br--top {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Element with class br--top

.br--right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Element with class br--right

.br--bottom {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

Element with class br--bottom

.br--left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Element with class br--left

Border Style

More information

.b--solid {
  border-style: solid;
}

Element with class b--solid

.b--dotted {
  border-style: dotted;
}

Element with class b--dotted

.b--dashed {
  border-style: dashed;
}

Element with class b--dashed

.b--double {
  border-style: double;
}

Element with class b--double

.b--groove {
  border-style: groove;
}

Element with class b--groove

.b--ridge {
  border-style: ridge;
}

Element with class b--ridge

.b--inset {
  border-style: inset;
}

Element with class b--inset

.b--outset {
  border-style: outset;
}

Element with class b--outset

Border Width

More information

.bw1 {
  border-width: 0.125rem;
}

Element with class bw1

.bw2 {
  border-width: 0.25rem;
}

Element with class bw2

.bw3 {
  border-width: 0.5rem;
}

Element with class bw3

.bw4 {
  border-width: 1rem;
}

Element with class bw4

.bw5 {
  border-width: 2rem;
}

Element with class bw5

Box Shadow

More information

.shadow-small {
  box-shadow: 0 0.125rem 0.5rem 0.125rem rgba(0, 0, 0, 0.2);
}

Element with class shadow-small

.shadow {
  box-shadow: 0 0.5rem 1rem 0.125rem rgba(0, 0, 0, 0.2);
}

Element with class shadow

.shadow-big {
  box-shadow: 0 1rem 2rem 0.25rem rgba(0, 0, 0, 0.2);
}

Element with class shadow-big

Box Sizing

More information

.border-box {
  box-sizing: border-box;
}

Element with class w5

Element with class border-box and w5

.content-box {
  box-sizing: content-box;
}

Element with class w5

Element with class content-box and w5

Color

More information

List of rules for module

.black {
  color: #000;
}

Element with class black without background

Element with class black and black background

.near-black {
  color: #111;
}

Element with class near-black without background

Element with class near-black and black background

.dark-gray {
  color: #333;
}

Element with class dark-gray without background

Element with class dark-gray and black background

.mid-gray {
  color: #555;
}

Element with class mid-gray without background

Element with class mid-gray and black background

.gray {
  color: #777;
}

Element with class gray without background

Element with class gray and black background

.silver {
  color: #999;
}

Element with class silver without background

Element with class silver and black background

.light-silver {
  color: #aaa;
}

Element with class light-silver without background

Element with class light-silver and black background

.moon-gray {
  color: #ccc;
}

Element with class moon-gray without background

Element with class moon-gray and black background

.light-gray {
  color: #eee;
}

Element with class light-gray without background

Element with class light-gray and black background

.near-white {
  color: #f4f4f4;
}

Element with class near-white without background

Element with class near-white and black background

.white {
  color: #fff;
}

Element with class white without background

Element with class white and black background

.dark-red {
  color: #e7040f;
}

Element with class dark-red without background

Element with class dark-red and black background

.red {
  color: #ff4136;
}

Element with class red without background

Element with class red and black background

.light-red {
  color: #ff725c;
}

Element with class light-red without background

Element with class light-red and black background

.washed-red {
  color: #ffdfdf;
}

Element with class washed-red without background

Element with class washed-red and black background

.orange {
  color: #ff6300;
}

Element with class orange without background

Element with class orange and black background

.gold {
  color: #ffb700;
}

Element with class gold without background

Element with class gold and black background

.yellow {
  color: #ffd700;
}

Element with class yellow without background

Element with class yellow and black background

.light-yellow {
  color: #fbf1a9;
}

Element with class light-yellow without background

Element with class light-yellow and black background

.washed-yellow {
  color: #fffceb;
}

Element with class washed-yellow without background

Element with class washed-yellow and black background

.purple {
  color: #5e2ca5;
}

Element with class purple without background

Element with class purple and black background

.light-purple {
  color: #a463f2;
}

Element with class light-purple without background

Element with class light-purple and black background

.dark-pink {
  color: #d5008f;
}

Element with class dark-pink without background

Element with class dark-pink and black background

.hot-pink {
  color: #ff41b4;
}

Element with class hot-pink without background

Element with class hot-pink and black background

.pink {
  color: #ff80cc;
}

Element with class pink without background

Element with class pink and black background

.light-pink {
  color: #ffa3d7;
}

Element with class light-pink without background

Element with class light-pink and black background

.dark-green {
  color: #137752;
}

Element with class dark-green without background

Element with class dark-green and black background

.green {
  color: #19a974;
}

Element with class green without background

Element with class green and black background

.light-green {
  color: #9eebcf;
}

Element with class light-green without background

Element with class light-green and black background

.washed-green {
  color: #e8fdf5;
}

Element with class washed-green without background

Element with class washed-green and black background

.navy {
  color: #001b44;
}

Element with class navy without background

Element with class navy and black background

.dark-blue {
  color: #00449e;
}

Element with class dark-blue without background

Element with class dark-blue and black background

.blue {
  color: #357edd;
}

Element with class blue without background

Element with class blue and black background

.light-blue {
  color: #96ccff;
}

Element with class light-blue without background

Element with class light-blue and black background

.lightest-blue {
  color: #cdecff;
}

Element with class lightest-blue without background

Element with class lightest-blue and black background

.washed-blue {
  color: #f6fffe;
}

Element with class washed-blue without background

Element with class washed-blue and black background

.black-90 {
  color: rgba(0, 0, 0, 0.9);
}

Element with class black-90 without background

Element with class black-90 and black background

.black-80 {
  color: rgba(0, 0, 0, 0.8);
}

Element with class black-80 without background

Element with class black-80 and black background

.black-70 {
  color: rgba(0, 0, 0, 0.7);
}

Element with class black-70 without background

Element with class black-70 and black background

.black-60 {
  color: rgba(0, 0, 0, 0.6);
}

Element with class black-60 without background

Element with class black-60 and black background

.black-50 {
  color: rgba(0, 0, 0, 0.5);
}

Element with class black-50 without background

Element with class black-50 and black background

.black-40 {
  color: rgba(0, 0, 0, 0.4);
}

Element with class black-40 without background

Element with class black-40 and black background

.black-30 {
  color: rgba(0, 0, 0, 0.3);
}

Element with class black-30 without background

Element with class black-30 and black background

.black-20 {
  color: rgba(0, 0, 0, 0.2);
}

Element with class black-20 without background

Element with class black-20 and black background

.black-10 {
  color: rgba(0, 0, 0, 0.1);
}

Element with class black-10 without background

Element with class black-10 and black background

.black-05 {
  color: rgba(0, 0, 0, 0.05);
}

Element with class black-05 without background

Element with class black-05 and black background

.black-025 {
  color: rgba(0, 0, 0, 0.025);
}

Element with class black-025 without background

Element with class black-025 and black background

.black-0125 {
  color: rgba(0, 0, 0, 0.0125);
}

Element with class black-0125 without background

Element with class black-0125 and black background

.white-90 {
  color: rgba(255, 255, 255, 0.9);
}

Element with class white-90 without background

Element with class white-90 and black background

.white-80 {
  color: rgba(255, 255, 255, 0.8);
}

Element with class white-80 without background

Element with class white-80 and black background

.white-70 {
  color: rgba(255, 255, 255, 0.7);
}

Element with class white-70 without background

Element with class white-70 and black background

.white-60 {
  color: rgba(255, 255, 255, 0.6);
}

Element with class white-60 without background

Element with class white-60 and black background

.white-50 {
  color: rgba(255, 255, 255, 0.5);
}

Element with class white-50 without background

Element with class white-50 and black background

.white-40 {
  color: rgba(255, 255, 255, 0.4);
}

Element with class white-40 without background

Element with class white-40 and black background

.white-30 {
  color: rgba(255, 255, 255, 0.3);
}

Element with class white-30 without background

Element with class white-30 and black background

.white-20 {
  color: rgba(255, 255, 255, 0.2);
}

Element with class white-20 without background

Element with class white-20 and black background

.white-10 {
  color: rgba(255, 255, 255, 0.1);
}

Element with class white-10 without background

Element with class white-10 and black background

.white-05 {
  color: rgba(255, 255, 255, 0.05);
}

Element with class white-05 without background

Element with class white-05 and black background

.white-025 {
  color: rgba(255, 255, 255, 0.025);
}

Element with class white-025 without background

Element with class white-025 and black background

.white-0125 {
  color: rgba(255, 255, 255, 0.0125);
}

Element with class white-0125 without background

Element with class white-0125 and black background

.transparent {
  color: transparent;
}

Element with class transparent without background

Element with class transparent and black background

.color-inherit {
  color: inherit;
}

Element with class color-inherit without background

Element with class color-inherit and black background

Complex

More information

List of rules for module

.bt-between + .bt-between {
  border-top-style: solid;
  border-top-width: 1px;
}

Element with class bt-between

.bl-between + .bl-between {
  border-left-style: solid;
  border-left-width: 1px;
}

Element with class bl-between

.pt0-between + .pt0-between {
  padding-top: 0;
}

Element with class pt0-between

.pt1-between + .pt1-between {
  padding-top: 0.25rem;
}

Element with class pt1-between

.pt2-between + .pt2-between {
  padding-top: 0.5rem;
}

Element with class pt2-between

.pt3-between + .pt3-between {
  padding-top: 1rem;
}

Element with class pt3-between

.pt4-between + .pt4-between {
  padding-top: 2rem;
}

Element with class pt4-between

.pt5-between + .pt5-between {
  padding-top: 4rem;
}

Element with class pt5-between

.pt6-between + .pt6-between {
  padding-top: 8rem;
}

Element with class pt6-between

.pt7-between + .pt7-between {
  padding-top: 16rem;
}

Element with class pt7-between

.pl0-between + .pl0-between {
  padding-left: 0;
}

Element with class pl0-between

.pl1-between + .pl1-between {
  padding-left: 0.25rem;
}

Element with class pl1-between

.pl2-between + .pl2-between {
  padding-left: 0.5rem;
}

Element with class pl2-between

.pl3-between + .pl3-between {
  padding-left: 1rem;
}

Element with class pl3-between

.pl4-between + .pl4-between {
  padding-left: 2rem;
}

Element with class pl4-between

.pl5-between + .pl5-between {
  padding-left: 4rem;
}

Element with class pl5-between

.pl6-between + .pl6-between {
  padding-left: 8rem;
}

Element with class pl6-between

.pl7-between + .pl7-between {
  padding-left: 16rem;
}

Element with class pl7-between

.mt0-between + .mt0-between {
  margin-top: 0;
}

Element with class mt0-between

.mt1-between + .mt1-between {
  margin-top: 0.25rem;
}

Element with class mt1-between

.mt2-between + .mt2-between {
  margin-top: 0.5rem;
}

Element with class mt2-between

.mt3-between + .mt3-between {
  margin-top: 1rem;
}

Element with class mt3-between

.mt4-between + .mt4-between {
  margin-top: 2rem;
}

Element with class mt4-between

.mt5-between + .mt5-between {
  margin-top: 4rem;
}

Element with class mt5-between

.mt6-between + .mt6-between {
  margin-top: 8rem;
}

Element with class mt6-between

.mt7-between + .mt7-between {
  margin-top: 16rem;
}

Element with class mt7-between

.ml0-between + .ml0-between {
  margin-left: 0;
}

Element with class ml0-between

.ml1-between + .ml1-between {
  margin-left: 0.25rem;
}

Element with class ml1-between

.ml2-between + .ml2-between {
  margin-left: 0.5rem;
}

Element with class ml2-between

.ml3-between + .ml3-between {
  margin-left: 1rem;
}

Element with class ml3-between

.ml4-between + .ml4-between {
  margin-left: 2rem;
}

Element with class ml4-between

.ml5-between + .ml5-between {
  margin-left: 4rem;
}

Element with class ml5-between

.ml6-between + .ml6-between {
  margin-left: 8rem;
}

Element with class ml6-between

.ml7-between + .ml7-between {
  margin-left: 16rem;
}

Element with class ml7-between

Coordinates

More information

List of rules for module

.top-0 {
  top: 0;
}

Element with class top-0

.right-0 {
  right: 0;
}

Element with class right-0

.bottom-0 {
  bottom: 0;
}

Element with class bottom-0

.left-0 {
  left: 0;
}

Element with class left-0

.top-1 {
  top: 1rem;
}

Element with class top-1

.right-1 {
  right: 1rem;
}

Element with class right-1

.bottom-1 {
  bottom: 1rem;
}

Element with class bottom-1

.left-1 {
  left: 1rem;
}

Element with class left-1

.top-2 {
  top: 2rem;
}

Element with class top-2

.right-2 {
  right: 2rem;
}

Element with class right-2

.bottom-2 {
  bottom: 2rem;
}

Element with class bottom-2

.left-2 {
  left: 2rem;
}

Element with class left-2

.top-50 {
  top: 50%;
}

Element with class top-50

.right-50 {
  right: 50%;
}

Element with class right-50

.bottom-50 {
  bottom: 50%;
}

Element with class bottom-50

.left-50 {
  left: 50%;
}

Element with class left-50

.top-100 {
  top: 100%;
}

Element with class top-100

.right-100 {
  right: 100%;
}

Element with class right-100

.bottom-100 {
  bottom: 100%;
}

Element with class bottom-100

.left-100 {
  left: 100%;
}

Element with class left-100

Cursor

More information

.cursor-pointer {
  cursor: pointer;
}

Element with class cursor-pointer, hover to see effect

.cursor-text {
  cursor: text;
}

Element with class cursor-text, hover to see effect

.cursor-none {
  cursor: none;
}

Element with class cursor-none, hover to see effect

.cursor-not-allowed {
  cursor: not-allowed;
}

Element with class cursor-not-allowed, hover to see effect

.cursor-progress {
  cursor: progress;
}

Element with class cursor-progress, hover to see effect

.cursor-wait {
  cursor: wait;
}

Element with class cursor-wait, hover to see effect

Debug

More information

List of rules for module

.debug-grid {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=") repeat top left;
}

Element with class debug-grid

.debug-grid-16 {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=") repeat top left;
}

Element with class debug-grid-16

.debug-grid-solid-8 {
  background: white url("data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==") repeat top left;
}

Element with class debug-grid-solid-8

.debug-grid-solid-16 {
  background: white url("data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7") repeat top left;
}

Element with class debug-grid-solid-16

.debug-outlines * {
  outline: 1px solid gold;
}

Element with class debug-outlines

.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);
}

Element with class debug-striped

.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);
}

Element with class debug-striped-light

.debug-striped-black {
  background-image: repeating-linear-gradient(-45deg, #000, #000 10px, transparent 10px, transparent 20px);
}

Element with class debug-striped-black

Display

More information

⚠️ Also see Mozilla Developer Network documentation External link icon for more information on how the CSS box model works.

.db {
  display: block;
}

Element with class db

.block {
  display: block;
}

Element with class block

.di {
  display: inline;
}

Element with class di

.inline {
  display: inline;
}

Element with class inline

.dib {
  display: inline-block;
}

Element with class dib

.inline-block {
  display: inline-block;
}

Element with class inline-block

.dn {
  display: none;
}

Element with class dn

.dt {
  display: table;
}

Element with class dt

.dtc {
  display: table-cell;
}

Element with class dtc

.df {
  display: flex;
}

Element with class df

.flex {
  display: flex;
}

Element with class flex

.dif {
  display: inline-flex;
}

Element with class dif

.inline-flex {
  display: inline-flex;
}

Element with class inline-flex

.dg {
  display: grid;
}

Element with class dg

.grid {
  display: grid;
}

Element with class grid

.dc {
  display: contents;
}

Element with class dc

.dfr {
  display: flow-root;
}

Element with class dfr

Flex

More information

.flex-wrap {
  flex-wrap: wrap;
}

Child of element with class flex-wrap

Child 2

Child 3

Child 4

Child 5

.flex-nowrap {
  flex-wrap: nowrap;
}

Child of element with class flex-nowrap

Child 2

Child 3

Child 4

Child 5

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

Child of element with class flex-wrap-reverse

Child 2

Child 3

Child 4

Child 5

.items-start {
  align-items: flex-start;
}

Child of element with class items-start

Child 2

.items-end {
  align-items: flex-end;
}

Child of element with class items-end

Child 2

.items-center {
  align-items: center;
}

Child of element with class items-center

Child 2

.items-baseline {
  align-items: baseline;
}

Child of element with class items-baseline

Child 2

.items-stretch {
  align-items: stretch;
}

Child of element with class items-stretch

Child 2

.self-start {
  align-self: flex-start;
}

(Example not found)

.self-end {
  align-self: flex-end;
}

(Example not found)

.self-center {
  align-self: center;
}

(Example not found)

.self-baseline {
  align-self: baseline;
}

(Example not found)

.self-stretch {
  align-self: stretch;
}

(Example not found)

.content-start {
  align-content: flex-start;
}

(Example not found)

.content-end {
  align-content: flex-end;
}

(Example not found)

.content-center {
  align-content: center;
}

(Example not found)

.content-between {
  align-content: space-between;
}

(Example not found)

.content-around {
  align-content: space-around;
}

(Example not found)

.content-stretch {
  align-content: stretch;
}

(Example not found)

.justify-start {
  justify-content: flex-start;
}

(Example not found)

.justify-end {
  justify-content: flex-end;
}

(Example not found)

.justify-center {
  justify-content: center;
}

(Example not found)

.justify-between {
  justify-content: space-between;
}

(Example not found)

.justify-around {
  justify-content: space-around;
}

(Example not found)

.justify-evenly {
  justify-content: space-evenly;
}

(Example not found)

.flex-grow-0 {
  flex-grow: 0;
}

(Example not found)

.flex-grow-1 {
  flex-grow: 1;
}

(Example not found)

.flex-shrink-0 {
  flex-shrink: 0;
}

(Example not found)

.flex-shrink-1 {
  flex-shrink: 1;
}

(Example not found)

.order-1 {
  order: 1;
}

(Example not found)

.order-2 {
  order: 2;
}

(Example not found)

.order-3 {
  order: 3;
}

(Example not found)

.order-4 {
  order: 4;
}

(Example not found)

.order-5 {
  order: 5;
}

(Example not found)

.order-6 {
  order: 6;
}

(Example not found)

.order-7 {
  order: 7;
}

(Example not found)

.order-8 {
  order: 8;
}

(Example not found)

.order-9 {
  order: 9;
}

(Example not found)

.order-last {
  order: 99999;
}

(Example not found)

Flex Direction

More information

.flex-column {
  flex-direction: column;
}

Child 1

Child 2

Child 3

.flex-row {
  flex-direction: row;
}

Child 1

Child 2

Child 3

.flex-column-reverse {
  flex-direction: column-reverse;
}

Child 1

Child 2

Child 3

.flex-row-reverse {
  flex-direction: row-reverse;
}

Child 1

Child 2

Child 3

Float

More information

List of rules for module

.fl {
  float: left;
}

Image of a bear — Element with class `fl`

Lorem incididunt Lorem est nulla commodo cupidatat fugiat amet sit aliquip est. Do consectetur enim culpa commodo officia ut Lorem consequat. Elit ad fugiat ut cupidatat Lorem exercitation aliqua do. Enim sit officia deserunt commodo aute quis non ut reprehenderit nostrud laboris ex exercitation eu. Consequat ut eiusmod enim laborum amet eiusmod.

.fr {
  float: right;
}

Ullamco ullamco esse Lorem laborum et tempor incididunt. Sint eu est ex consequat commodo reprehenderit. Consectetur mollit velit do amet dolore amet. Culpa dolore veniam ad quis pariatur id sit eiusmod proident minim nulla dolore velit amet. Anim aliqua veniam Lorem non mollit in minim ad laborum aliqua qui adipisicing non ullamco. Eu reprehenderit velit elit eu minim in enim fugiat veniam laboris labore ea consectetur. Pariatur in consectetur exercitation laboris incididunt reprehenderit mollit ea culpa dolor sunt officia qui.

.fn {
  float: none;
}

Irure est officia ut esse irure et cupidatat aute elit ipsum nostrud magna. Proident pariatur esse culpa quis esse. Consequat elit laborum ullamco proident. Eiusmod cupidatat adipisicing officia ullamco labore adipisicing.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Element with class clearfix

Element without class clearfix

Font Family

More information

List of rules for module

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
}

Element with class sans-serif

.serif {
  font-family: georgia, times, serif;
}

Element with class serif

.code {
  font-family: consolas, monaco, monospace;
}

Element with class code

.font-inherit {
  font-family: inherit;
}

Element with class font-inherit

Font Style

More information

List of rules for module

.fs-normal {
  font-style: normal;
}

Element with class fs-normal

.fs-italic {
  font-style: italic;
}

Element with class fs-italic

.i {
  font-style: italic;
}

Element with class i

Font Weight

More information

List of rules for module

.fw-100 {
  font-weight: 100;
}

Element with class fw-100

.fw-200 {
  font-weight: 200;
}

Element with class fw-200

.fw-300 {
  font-weight: 300;
}

Element with class fw-300

.fw-400 {
  font-weight: 400;
}

Element with class fw-400

.fw-500 {
  font-weight: 500;
}

Element with class fw-500

.fw-600 {
  font-weight: 600;
}

Element with class fw-600

.fw-700 {
  font-weight: 700;
}

Element with class fw-700

.fw-800 {
  font-weight: 800;
}

Element with class fw-800

.fw-900 {
  font-weight: 900;
}

Element with class fw-900

.fw-lighter {
  font-weight: lighter;
}

Element with class fw-lighter

.fw-bolder {
  font-weight: bolder;
}

Element with class fw-bolder

.fw-normal {
  font-weight: 400;
}

Element with class fw-normal

.b {
  font-weight: 700;
}

Element with class b

Forms

More information

List of rules for module

Grid

More information

.row {
  display: flex;
  flex-wrap: wrap;
}

(Example not found)

.col {
  flex: 1 0 0%;
}

(Example not found)

.col-auto {
  flex: 0 0 auto;
}

(Example not found)

.col-1 {
  flex: 0 0 auto;
}

(Example not found)

.col-2 {
  flex: 0 0 auto;
}

(Example not found)

.col-3 {
  flex: 0 0 auto;
}

(Example not found)

.col-4 {
  flex: 0 0 auto;
}

(Example not found)

.col-5 {
  flex: 0 0 auto;
}

(Example not found)

.col-6 {
  flex: 0 0 auto;
}

(Example not found)

.col-7 {
  flex: 0 0 auto;
}

(Example not found)

.col-8 {
  flex: 0 0 auto;
}

(Example not found)

.col-9 {
  flex: 0 0 auto;
}

(Example not found)

.col-10 {
  flex: 0 0 auto;
}

(Example not found)

.col-11 {
  flex: 0 0 auto;
}

(Example not found)

.col-12 {
  flex: 0 0 auto;
}

(Example not found)

.col-auto {
  width: auto;
}

(Example not found)

.col-1 {
  width: calc(8.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 12);
}

(Example not found)

.col-2 {
  width: calc(16.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 6);
}

(Example not found)

.col-3 {
  width: calc(25% - var(--column-gap, 0px) + var(--column-gap, 0px) / 4);
}

(Example not found)

.col-4 {
  width: calc(33.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 3);
}

(Example not found)

.col-5 {
  width: calc(41.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 2.4);
}

(Example not found)

.col-6 {
  width: calc(50% - var(--column-gap, 0px) + var(--column-gap, 0px) / 2);
}

(Example not found)

.col-7 {
  width: calc(58.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.7142857143);
}

(Example not found)

.col-8 {
  width: calc(66.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.5);
}

(Example not found)

.col-9 {
  width: calc(75% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.3333333333);
}

(Example not found)

.col-10 {
  width: calc(83.3333333333% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.2);
}

(Example not found)

.col-11 {
  width: calc(91.6666666667% - var(--column-gap, 0px) + var(--column-gap, 0px) / 1.0909090909);
}

(Example not found)

.col-12 {
  width: 100%;
}

(Example not found)

.column-gap {
  --column-gap: 1rem;
  -moz-column-gap: var(--column-gap);
  column-gap: var(--column-gap);
}

Element with class column-gap

col-6

col-3

col-6

col-3

.row-gap {
  --row-gap: 1rem;
  row-gap: var(--row-gap);
}

Element with class row-gap

col-6

col-3

col-6

col-3

.gap {
  --gap: 1rem;
  gap: var(--gap);
}

(Example not found)

Height

More information

List of rules for module

.h0 {
  height: 0;
}

Element with class h0

.h1 {
  height: 1rem;
}

Element with class h1

.h2 {
  height: 2rem;
}

Element with class h2

.h3 {
  height: 4rem;
}

Element with class h3

.h4 {
  height: 8rem;
}

Element with class h4

.h5 {
  height: 16rem;
}

Element with class h5

.h6 {
  height: 32rem;
}

Element with class h6

.h-0 {
  height: 0;
}

Element with class h-0

.h-25 {
  height: 25%;
}

Element with class h-25

.h-50 {
  height: 50%;
}

Element with class h-50

.h-75 {
  height: 75%;
}

Element with class h-75

.h-100 {
  height: 100%;
}

Element with class h-100

.h-auto {
  height: auto;
}

Element with class h-auto

.h-inherit {
  height: inherit;
}

Element with class h-inherit

.vh-25 {
  height: 25vh;
}

Element with class vh-25

.vh-50 {
  height: 50vh;
}

Element with class vh-50

.vh-75 {
  height: 75vh;
}

Element with class vh-75

.vh-100 {
  height: 100vh;
}

Element with class vh-100

.min-vh-100 {
  min-height: 100vh;
}

Element with class min-vh-100

Hover

More information

List of rules for module

.dim {
  transition: opacity 0.15s ease-in;
}

(Example not found)

.dim:hover, .dim:focus {
  opacity: 0.5;
}

(Example not found)

.grow, .grow-large {
  transition: transform 0.25s ease-out;
}

(Example not found)

.grow:hover, .grow:focus {
  transform: scale(1.05);
}

(Example not found)

.grow:active {
  transform: scale(0.9);
}

(Example not found)

.grow-large:hover, .grow-large:focus {
  transform: scale(1.2);
}

(Example not found)

.grow-large:active {
  transform: scale(0.95);
}

(Example not found)

.link {
  text-decoration: none;
  transition: color 0.15s ease-in;
}

(Example not found)

.link:focus {
  outline: 1px dotted currentcolor;
}

(Example not found)

.hide-child .child {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

(Example not found)

.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child {
  opacity: 1;
}

(Example not found)

.hover-underline:hover, .hover-underline:focus {
  text-decoration: underline;
}

(Example not found)

Hover Background Color

More information

List of rules for module

.hover-bg-black:hover {
  background-color: #000;
}

Element with class hover-bg-black, hover to see effect

.hover-bg-near-black:hover {
  background-color: #111;
}

Element with class hover-bg-near-black, hover to see effect

.hover-bg-dark-gray:hover {
  background-color: #333;
}

Element with class hover-bg-dark-gray, hover to see effect

.hover-bg-mid-gray:hover {
  background-color: #555;
}

Element with class hover-bg-mid-gray, hover to see effect

.hover-bg-gray:hover {
  background-color: #777;
}

Element with class hover-bg-gray, hover to see effect

.hover-bg-silver:hover {
  background-color: #999;
}

Element with class hover-bg-silver, hover to see effect

.hover-bg-light-silver:hover {
  background-color: #aaa;
}

Element with class hover-bg-light-silver, hover to see effect

.hover-bg-moon-gray:hover {
  background-color: #ccc;
}

Element with class hover-bg-moon-gray, hover to see effect

.hover-bg-light-gray:hover {
  background-color: #eee;
}

Element with class hover-bg-light-gray, hover to see effect

.hover-bg-near-white:hover {
  background-color: #f4f4f4;
}

Element with class hover-bg-near-white, hover to see effect

.hover-bg-white:hover {
  background-color: #fff;
}

Element with class hover-bg-white, hover to see effect

.hover-bg-dark-red:hover {
  background-color: #e7040f;
}

Element with class hover-bg-dark-red, hover to see effect

.hover-bg-red:hover {
  background-color: #ff4136;
}

Element with class hover-bg-red, hover to see effect

.hover-bg-light-red:hover {
  background-color: #ff725c;
}

Element with class hover-bg-light-red, hover to see effect

.hover-bg-washed-red:hover {
  background-color: #ffdfdf;
}

Element with class hover-bg-washed-red, hover to see effect

.hover-bg-orange:hover {
  background-color: #ff6300;
}

Element with class hover-bg-orange, hover to see effect

.hover-bg-gold:hover {
  background-color: #ffb700;
}

Element with class hover-bg-gold, hover to see effect

.hover-bg-yellow:hover {
  background-color: #ffd700;
}

Element with class hover-bg-yellow, hover to see effect

.hover-bg-light-yellow:hover {
  background-color: #fbf1a9;
}

Element with class hover-bg-light-yellow, hover to see effect

.hover-bg-washed-yellow:hover {
  background-color: #fffceb;
}

Element with class hover-bg-washed-yellow, hover to see effect

.hover-bg-purple:hover {
  background-color: #5e2ca5;
}

Element with class hover-bg-purple, hover to see effect

.hover-bg-light-purple:hover {
  background-color: #a463f2;
}

Element with class hover-bg-light-purple, hover to see effect

.hover-bg-dark-pink:hover {
  background-color: #d5008f;
}

Element with class hover-bg-dark-pink, hover to see effect

.hover-bg-hot-pink:hover {
  background-color: #ff41b4;
}

Element with class hover-bg-hot-pink, hover to see effect

.hover-bg-pink:hover {
  background-color: #ff80cc;
}

Element with class hover-bg-pink, hover to see effect

.hover-bg-light-pink:hover {
  background-color: #ffa3d7;
}

Element with class hover-bg-light-pink, hover to see effect

.hover-bg-dark-green:hover {
  background-color: #137752;
}

Element with class hover-bg-dark-green, hover to see effect

.hover-bg-green:hover {
  background-color: #19a974;
}

Element with class hover-bg-green, hover to see effect

.hover-bg-light-green:hover {
  background-color: #9eebcf;
}

Element with class hover-bg-light-green, hover to see effect

.hover-bg-washed-green:hover {
  background-color: #e8fdf5;
}

Element with class hover-bg-washed-green, hover to see effect

.hover-bg-navy:hover {
  background-color: #001b44;
}

Element with class hover-bg-navy, hover to see effect

.hover-bg-dark-blue:hover {
  background-color: #00449e;
}

Element with class hover-bg-dark-blue, hover to see effect

.hover-bg-blue:hover {
  background-color: #357edd;
}

Element with class hover-bg-blue, hover to see effect

.hover-bg-light-blue:hover {
  background-color: #96ccff;
}

Element with class hover-bg-light-blue, hover to see effect

.hover-bg-lightest-blue:hover {
  background-color: #cdecff;
}

Element with class hover-bg-lightest-blue, hover to see effect

.hover-bg-washed-blue:hover {
  background-color: #f6fffe;
}

Element with class hover-bg-washed-blue, hover to see effect

.hover-bg-black-90:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

Element with class hover-bg-black-90, hover to see effect

.hover-bg-black-80:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

Element with class hover-bg-black-80, hover to see effect

.hover-bg-black-70:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

Element with class hover-bg-black-70, hover to see effect

.hover-bg-black-60:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

Element with class hover-bg-black-60, hover to see effect

.hover-bg-black-50:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Element with class hover-bg-black-50, hover to see effect

.hover-bg-black-40:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

Element with class hover-bg-black-40, hover to see effect

.hover-bg-black-30:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

Element with class hover-bg-black-30, hover to see effect

.hover-bg-black-20:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

Element with class hover-bg-black-20, hover to see effect

.hover-bg-black-10:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

Element with class hover-bg-black-10, hover to see effect

.hover-bg-black-05:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

Element with class hover-bg-black-05, hover to see effect

.hover-bg-black-025:hover {
  background-color: rgba(0, 0, 0, 0.025);
}

Element with class hover-bg-black-025, hover to see effect

.hover-bg-black-0125:hover {
  background-color: rgba(0, 0, 0, 0.0125);
}

Element with class hover-bg-black-0125, hover to see effect

.hover-bg-white-90:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

Element with class hover-bg-white-90, hover to see effect

.hover-bg-white-80:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

Element with class hover-bg-white-80, hover to see effect

.hover-bg-white-70:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

Element with class hover-bg-white-70, hover to see effect

.hover-bg-white-60:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

Element with class hover-bg-white-60, hover to see effect

.hover-bg-white-50:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

Element with class hover-bg-white-50, hover to see effect

.hover-bg-white-40:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

Element with class hover-bg-white-40, hover to see effect

.hover-bg-white-30:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

Element with class hover-bg-white-30, hover to see effect

.hover-bg-white-20:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

Element with class hover-bg-white-20, hover to see effect

.hover-bg-white-10:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

Element with class hover-bg-white-10, hover to see effect

.hover-bg-white-05:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

Element with class hover-bg-white-05, hover to see effect

.hover-bg-white-025:hover {
  background-color: rgba(255, 255, 255, 0.025);
}

Element with class hover-bg-white-025, hover to see effect

.hover-bg-white-0125:hover {
  background-color: rgba(255, 255, 255, 0.0125);
}

Element with class hover-bg-white-0125, hover to see effect

.hover-bg-transparent:hover {
  background-color: transparent;
}

Element with class hover-bg-transparent, hover to see effect

.hover-bg-color-inherit:hover {
  background-color: inherit;
}

Element with class hover-bg-color-inherit, hover to see effect

.bg-animate {
  transition: background-color 0.15s ease-in-out;
}

Element with class bg-animate, hover to see effect

Hover Color

More information

List of rules for module

.hover-black:hover {
  color: #000;
}

Element with class hover-black, hover to see effect

.hover-near-black:hover {
  color: #111;
}

Element with class hover-near-black, hover to see effect

.hover-dark-gray:hover {
  color: #333;
}

Element with class hover-dark-gray, hover to see effect

.hover-mid-gray:hover {
  color: #555;
}

Element with class hover-mid-gray, hover to see effect

.hover-gray:hover {
  color: #777;
}

Element with class hover-gray, hover to see effect

.hover-silver:hover {
  color: #999;
}

Element with class hover-silver, hover to see effect

.hover-light-silver:hover {
  color: #aaa;
}

Element with class hover-light-silver, hover to see effect

.hover-moon-gray:hover {
  color: #ccc;
}

Element with class hover-moon-gray, hover to see effect

.hover-light-gray:hover {
  color: #eee;
}

Element with class hover-light-gray, hover to see effect

.hover-near-white:hover {
  color: #f4f4f4;
}

Element with class hover-near-white, hover to see effect

.hover-white:hover {
  color: #fff;
}

Element with class hover-white, hover to see effect

.hover-dark-red:hover {
  color: #e7040f;
}

Element with class hover-dark-red, hover to see effect

.hover-red:hover {
  color: #ff4136;
}

Element with class hover-red, hover to see effect

.hover-light-red:hover {
  color: #ff725c;
}

Element with class hover-light-red, hover to see effect

.hover-washed-red:hover {
  color: #ffdfdf;
}

Element with class hover-washed-red, hover to see effect

.hover-orange:hover {
  color: #ff6300;
}

Element with class hover-orange, hover to see effect

.hover-gold:hover {
  color: #ffb700;
}

Element with class hover-gold, hover to see effect

.hover-yellow:hover {
  color: #ffd700;
}

Element with class hover-yellow, hover to see effect

.hover-light-yellow:hover {
  color: #fbf1a9;
}

Element with class hover-light-yellow, hover to see effect

.hover-washed-yellow:hover {
  color: #fffceb;
}

Element with class hover-washed-yellow, hover to see effect

.hover-purple:hover {
  color: #5e2ca5;
}

Element with class hover-purple, hover to see effect

.hover-light-purple:hover {
  color: #a463f2;
}

Element with class hover-light-purple, hover to see effect

.hover-dark-pink:hover {
  color: #d5008f;
}

Element with class hover-dark-pink, hover to see effect

.hover-hot-pink:hover {
  color: #ff41b4;
}

Element with class hover-hot-pink, hover to see effect

.hover-pink:hover {
  color: #ff80cc;
}

Element with class hover-pink, hover to see effect

.hover-light-pink:hover {
  color: #ffa3d7;
}

Element with class hover-light-pink, hover to see effect

.hover-dark-green:hover {
  color: #137752;
}

Element with class hover-dark-green, hover to see effect

.hover-green:hover {
  color: #19a974;
}

Element with class hover-green, hover to see effect

.hover-light-green:hover {
  color: #9eebcf;
}

Element with class hover-light-green, hover to see effect

.hover-washed-green:hover {
  color: #e8fdf5;
}

Element with class hover-washed-green, hover to see effect

.hover-navy:hover {
  color: #001b44;
}

Element with class hover-navy, hover to see effect

.hover-dark-blue:hover {
  color: #00449e;
}

Element with class hover-dark-blue, hover to see effect

.hover-blue:hover {
  color: #357edd;
}

Element with class hover-blue, hover to see effect

.hover-light-blue:hover {
  color: #96ccff;
}

Element with class hover-light-blue, hover to see effect

.hover-lightest-blue:hover {
  color: #cdecff;
}

Element with class hover-lightest-blue, hover to see effect

.hover-washed-blue:hover {
  color: #f6fffe;
}

Element with class hover-washed-blue, hover to see effect

.hover-black-90:hover {
  color: rgba(0, 0, 0, 0.9);
}

Element with class hover-black-90, hover to see effect

.hover-black-80:hover {
  color: rgba(0, 0, 0, 0.8);
}

Element with class hover-black-80, hover to see effect

.hover-black-70:hover {
  color: rgba(0, 0, 0, 0.7);
}

Element with class hover-black-70, hover to see effect

.hover-black-60:hover {
  color: rgba(0, 0, 0, 0.6);
}

Element with class hover-black-60, hover to see effect

.hover-black-50:hover {
  color: rgba(0, 0, 0, 0.5);
}

Element with class hover-black-50, hover to see effect

.hover-black-40:hover {
  color: rgba(0, 0, 0, 0.4);
}

Element with class hover-black-40, hover to see effect

.hover-black-30:hover {
  color: rgba(0, 0, 0, 0.3);
}

Element with class hover-black-30, hover to see effect

.hover-black-20:hover {
  color: rgba(0, 0, 0, 0.2);
}

Element with class hover-black-20, hover to see effect

.hover-black-10:hover {
  color: rgba(0, 0, 0, 0.1);
}

Element with class hover-black-10, hover to see effect

.hover-black-05:hover {
  color: rgba(0, 0, 0, 0.05);
}

Element with class hover-black-05, hover to see effect

.hover-black-025:hover {
  color: rgba(0, 0, 0, 0.025);
}

Element with class hover-black-025, hover to see effect

.hover-black-0125:hover {
  color: rgba(0, 0, 0, 0.0125);
}

Element with class hover-black-0125, hover to see effect

.hover-white-90:hover {
  color: rgba(255, 255, 255, 0.9);
}

Element with class hover-white-90, hover to see effect

.hover-white-80:hover {
  color: rgba(255, 255, 255, 0.8);
}

Element with class hover-white-80, hover to see effect

.hover-white-70:hover {
  color: rgba(255, 255, 255, 0.7);
}

Element with class hover-white-70, hover to see effect

.hover-white-60:hover {
  color: rgba(255, 255, 255, 0.6);
}

Element with class hover-white-60, hover to see effect

.hover-white-50:hover {
  color: rgba(255, 255, 255, 0.5);
}

Element with class hover-white-50, hover to see effect

.hover-white-40:hover {
  color: rgba(255, 255, 255, 0.4);
}

Element with class hover-white-40, hover to see effect

.hover-white-30:hover {
  color: rgba(255, 255, 255, 0.3);
}

Element with class hover-white-30, hover to see effect

.hover-white-20:hover {
  color: rgba(255, 255, 255, 0.2);
}

Element with class hover-white-20, hover to see effect

.hover-white-10:hover {
  color: rgba(255, 255, 255, 0.1);
}

Element with class hover-white-10, hover to see effect

.hover-white-05:hover {
  color: rgba(255, 255, 255, 0.05);
}

Element with class hover-white-05, hover to see effect

.hover-white-025:hover {
  color: rgba(255, 255, 255, 0.025);
}

Element with class hover-white-025, hover to see effect

.hover-white-0125:hover {
  color: rgba(255, 255, 255, 0.0125);
}

Element with class hover-white-0125, hover to see effect

.hover-transparent:hover {
  color: transparent;
}

Element with class hover-transparent, hover to see effect

.hover-color-inherit:hover {
  color: inherit;
}

Element with class hover-color-inherit, hover to see effect

Letter Spacing

More information

.tracked {
  letter-spacing: 0.1em;
}

Element with class tracked

.tracked-tight {
  letter-spacing: -0.05em;
}

Element with class tracked-tight

.tracked-mega {
  letter-spacing: 0.25em;
}

Element with class tracked-mega

Line Height

More information

List of rules for module

.lh-solid {
  line-height: 1;
}

Element with class lh-solid

.lh-title {
  line-height: 1.15;
}

Element with class lh-title

.lh-copy {
  line-height: 1.5;
}

Element with class lh-copy

.lh-extra {
  line-height: 2;
}

Element with class lh-extra

Margin

More information

List of rules for module

.m0 {
  margin: 0;
}

Element with class m0

.m1 {
  margin: 0.25rem;
}

Element with class m1

.m2 {
  margin: 0.5rem;
}

Element with class m2

.m3 {
  margin: 1rem;
}

Element with class m3

.m4 {
  margin: 2rem;
}

Element with class m4

.m5 {
  margin: 4rem;
}

Element with class m5

.m6 {
  margin: 8rem;
}

Element with class m6

.m7 {
  margin: 16rem;
}

Element with class m7

.mt0 {
  margin-top: 0;
}

Element with class mt0

.mt1 {
  margin-top: 0.25rem;
}

Element with class mt1

.mt2 {
  margin-top: 0.5rem;
}

Element with class mt2

.mt3 {
  margin-top: 1rem;
}

Element with class mt3

.mt4 {
  margin-top: 2rem;
}

Element with class mt4

.mt5 {
  margin-top: 4rem;
}

Element with class mt5

.mt6 {
  margin-top: 8rem;
}

Element with class mt6

.mt7 {
  margin-top: 16rem;
}

Element with class mt7

.mt-auto {
  margin-top: auto;
}

Element with class mt-auto

.mr0 {
  margin-right: 0;
}

Element with class mr0

.mr1 {
  margin-right: 0.25rem;
}

Element with class mr1

.mr2 {
  margin-right: 0.5rem;
}

Element with class mr2

.mr3 {
  margin-right: 1rem;
}

Element with class mr3

.mr4 {
  margin-right: 2rem;
}

Element with class mr4

.mr5 {
  margin-right: 4rem;
}

Element with class mr5

.mr6 {
  margin-right: 8rem;
}

Element with class mr6

.mr7 {
  margin-right: 16rem;
}

Element with class mr7

.mr-auto {
  margin-right: auto;
}

Element with class mr-auto

.mb0 {
  margin-bottom: 0;
}

Element with class mb0

.mb1 {
  margin-bottom: 0.25rem;
}

Element with class mb1

.mb2 {
  margin-bottom: 0.5rem;
}

Element with class mb2

.mb3 {
  margin-bottom: 1rem;
}

Element with class mb3

.mb4 {
  margin-bottom: 2rem;
}

Element with class mb4

.mb5 {
  margin-bottom: 4rem;
}

Element with class mb5

.mb6 {
  margin-bottom: 8rem;
}

Element with class mb6

.mb7 {
  margin-bottom: 16rem;
}

Element with class mb7

.mb-auto {
  margin-bottom: auto;
}

Element with class mb-auto

.ml0 {
  margin-left: 0;
}

Element with class ml0

.ml1 {
  margin-left: 0.25rem;
}

Element with class ml1

.ml2 {
  margin-left: 0.5rem;
}

Element with class ml2

.ml3 {
  margin-left: 1rem;
}

Element with class ml3

.ml4 {
  margin-left: 2rem;
}

Element with class ml4

.ml5 {
  margin-left: 4rem;
}

Element with class ml5

.ml6 {
  margin-left: 8rem;
}

Element with class ml6

.ml7 {
  margin-left: 16rem;
}

Element with class ml7

.ml-auto {
  margin-left: auto;
}

Element with class ml-auto

.mh0 {
  margin-left: 0;
  margin-right: 0;
}

Element with class mh0

.mh1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

Element with class mh1

.mh2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

Element with class mh2

.mh3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

Element with class mh3

.mh4 {
  margin-left: 2rem;
  margin-right: 2rem;
}

Element with class mh4

.mh5 {
  margin-left: 4rem;
  margin-right: 4rem;
}

Element with class mh5

.mh6 {
  margin-left: 8rem;
  margin-right: 8rem;
}

Element with class mh6

.mh7 {
  margin-left: 16rem;
  margin-right: 16rem;
}

Element with class mh7

.mh-auto {
  margin-left: auto;
  margin-right: auto;
}

Element with class mh-auto

.center {
  margin-left: auto;
  margin-right: auto;
}

Element with class center

.mv0 {
  margin-top: 0;
  margin-bottom: 0;
}

Element with class mv0

.mv1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

Element with class mv1

.mv2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

Element with class mv2

.mv3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

Element with class mv3

.mv4 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

Element with class mv4

.mv5 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

Element with class mv5

.mv6 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

Element with class mv6

.mv7 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

Element with class mv7

.n1 {
  margin: -0.25rem;
}

Element with class n1

.n2 {
  margin: -0.5rem;
}

Element with class n2

.n3 {
  margin: -1rem;
}

Element with class n3

.n4 {
  margin: -2rem;
}

Element with class n4

.n5 {
  margin: -4rem;
}

Element with class n5

.nt1 {
  margin-top: -0.25rem;
}

Element with class nt1

.nt2 {
  margin-top: -0.5rem;
}

Element with class nt2

.nt3 {
  margin-top: -1rem;
}

Element with class nt3

.nt4 {
  margin-top: -2rem;
}

Element with class nt4

.nt5 {
  margin-top: -4rem;
}

Element with class nt5

.nr1 {
  margin-right: -0.25rem;
}

Element with class nr1

.nr2 {
  margin-right: -0.5rem;
}

Element with class nr2

.nr3 {
  margin-right: -1rem;
}

Element with class nr3

.nr4 {
  margin-right: -2rem;
}

Element with class nr4

.nr5 {
  margin-right: -4rem;
}

Element with class nr5

.nb1 {
  margin-bottom: -0.25rem;
}

Element with class nb1

.nb2 {
  margin-bottom: -0.5rem;
}

Element with class nb2

.nb3 {
  margin-bottom: -1rem;
}

Element with class nb3

.nb4 {
  margin-bottom: -2rem;
}

Element with class nb4

.nb5 {
  margin-bottom: -4rem;
}

Element with class nb5

.nl1 {
  margin-left: -0.25rem;
}

Element with class nl1

.nl2 {
  margin-left: -0.5rem;
}

Element with class nl2

.nl3 {
  margin-left: -1rem;
}

Element with class nl3

.nl4 {
  margin-left: -2rem;
}

Element with class nl4

.nl5 {
  margin-left: -4rem;
}

Element with class nl5

.nh1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

Element with class nh1

.nh2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

Element with class nh2

.nh3 {
  margin-left: -1rem;
  margin-right: -1rem;
}

Element with class nh3

.nh4 {
  margin-left: -2rem;
  margin-right: -2rem;
}

Element with class nh4

.nh5 {
  margin-left: -4rem;
  margin-right: -4rem;
}

Element with class nh5

.nv1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

Element with class nv1

.nv2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

Element with class nv2

.nv3 {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

Element with class nv3

.nv4 {
  margin-top: -2rem;
  margin-bottom: -2rem;
}

Element with class nv4

.nv5 {
  margin-top: -4rem;
  margin-bottom: -4rem;
}

Element with class nv5

Max Height

More information

List of rules for module

.max-h-100 {
  max-height: 100%;
}

(Example not found)

.max-h-none {
  max-height: none;
}

(Example not found)

.max-vh-100 {
  max-height: 100vh;
}

(Example not found)

Max Width

More information

List of rules for module

.mw0 {
  max-width: 0;
}

Element with class mw0

Very wide child element

.mw1 {
  max-width: 1rem;
}

Element with class mw1

Very wide child element

.mw2 {
  max-width: 2rem;
}

Element with class mw2

Very wide child element

.mw3 {
  max-width: 4rem;
}

Element with class mw3

Very wide child element

.mw4 {
  max-width: 8rem;
}

Element with class mw4

Very wide child element

.mw5 {
  max-width: 16rem;
}

Element with class mw5

Very wide child element

.mw6 {
  max-width: 32rem;
}

Element with class mw6

Very wide child element

.mw7 {
  max-width: 48rem;
}

Element with class mw7

Very wide child element

.mw8 {
  max-width: 64rem;
}

Element with class mw8

Very wide child element

.mw9 {
  max-width: 96rem;
}

Element with class mw9

Very wide child element

.mw-100 {
  max-width: 100%;
}

Element with class mw-100

Very wide child element

.mw-none {
  max-width: none;
}

Element with class mw-none

Very wide child element

Measure

More information

List of rules for module

.measure-narrow {
  max-width: 20em;
}

Element with class measure-narrow

.measure {
  max-width: 30em;
}

Element with class measure

.measure-wide {
  max-width: 34em;
}

Element with class measure-wide

Min Height

More information

List of rules for module

.min-h-100 {
  min-height: 100%;
}

(Example not found)

.min-h-none {
  min-height: none;
}

(Example not found)

.min-vh-100 {
  min-height: 100vh;
}

(Example not found)

Miscellaneous

More information

List of rules for module

.list-reset {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

List item in <ul> with class list-reset
List item in <ul> with class list-reset
List item in <ul> with class list-reset

.button-reset {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  background-color: inherit;
  text-align: inherit;
  border-style: none;
  padding: 0;
}

(Example not found)

.stretch {
  position: absolute;
  inset: 0;
}

Element with class stretch

.stretch-pseudo::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: auto;
  background-color: transparent;
}

Element with class stretch-pseudo

.dn-empty:empty {
  display: none;
}

Element with class dn-empty

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(Example not found)

.svg-wrapper {
  width: 1.5rem;
  height: 1.5rem;
  max-height: 100%;
}

(Example not found)

.svg-wrapper svg {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

(Example not found)

.sr-only {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

(Example not found)

.isolate {
  isolation: isolate;
}

(Example not found)

Object Fit

More information

.contain {
  -o-object-fit: contain;
  object-fit: contain;
}

(Example not found)

.cover {
  -o-object-fit: cover;
  object-fit: cover;
}

(Example not found)

.fill {
  -o-object-fit: fill;
  object-fit: fill;
}

(Example not found)

Opacity

More information

List of rules for module

.o-100 {
  opacity: 1;
}

Element with class o-100

.o-90 {
  opacity: 0.9;
}

Element with class o-90

.o-80 {
  opacity: 0.8;
}

Element with class o-80

.o-70 {
  opacity: 0.7;
}

Element with class o-70

.o-60 {
  opacity: 0.6;
}

Element with class o-60

.o-50 {
  opacity: 0.5;
}

Element with class o-50

.o-40 {
  opacity: 0.4;
}

Element with class o-40

.o-30 {
  opacity: 0.3;
}

Element with class o-30

.o-20 {
  opacity: 0.2;
}

Element with class o-20

.o-10 {
  opacity: 0.1;
}

Element with class o-10

.o-05 {
  opacity: 0.05;
}

Element with class o-05

.o-025 {
  opacity: 0.025;
}

Element with class o-025

.o-0 {
  opacity: 0;
}

Element with class o-0

Overflow

More information

List of rules for module

.overflow-visible {
  overflow: visible;
}

(Example not found)

.overflow-hidden {
  overflow: hidden;
}

(Example not found)

.overflow-scroll {
  overflow: scroll;
}

(Example not found)

.overflow-auto {
  overflow: auto;
}

(Example not found)

.overflow-x-visible {
  overflow-x: visible;
}

(Example not found)

.overflow-x-hidden {
  overflow-x: hidden;
}

(Example not found)

.overflow-x-scroll {
  overflow-x: scroll;
}

(Example not found)

.overflow-x-auto {
  overflow-x: auto;
}

(Example not found)

.overflow-y-visible {
  overflow-y: visible;
}

(Example not found)

.overflow-y-hidden {
  overflow-y: hidden;
}

(Example not found)

.overflow-y-scroll {
  overflow-y: scroll;
}

(Example not found)

.overflow-y-auto {
  overflow-y: auto;
}

(Example not found)

Padding

More information

List of rules for module

.p0 {
  padding: 0;
}

Element with class p0

.p1 {
  padding: 0.25rem;
}

Element with class p1

.p2 {
  padding: 0.5rem;
}

Element with class p2

.p3 {
  padding: 1rem;
}

Element with class p3

.p4 {
  padding: 2rem;
}

Element with class p4

.p5 {
  padding: 4rem;
}

Element with class p5

.p6 {
  padding: 8rem;
}

Element with class p6

.p7 {
  padding: 16rem;
}

Element with class p7

.pt0 {
  padding-top: 0;
}

Element with class pt0

.pt1 {
  padding-top: 0.25rem;
}

Element with class pt1

.pt2 {
  padding-top: 0.5rem;
}

Element with class pt2

.pt3 {
  padding-top: 1rem;
}

Element with class pt3

.pt4 {
  padding-top: 2rem;
}

Element with class pt4

.pt5 {
  padding-top: 4rem;
}

Element with class pt5

.pt6 {
  padding-top: 8rem;
}

Element with class pt6

.pt7 {
  padding-top: 16rem;
}

Element with class pt7

.pr0 {
  padding-right: 0;
}

Element with class pr0

.pr1 {
  padding-right: 0.25rem;
}

Element with class pr1

.pr2 {
  padding-right: 0.5rem;
}

Element with class pr2

.pr3 {
  padding-right: 1rem;
}

Element with class pr3

.pr4 {
  padding-right: 2rem;
}

Element with class pr4

.pr5 {
  padding-right: 4rem;
}

Element with class pr5

.pr6 {
  padding-right: 8rem;
}

Element with class pr6

.pr7 {
  padding-right: 16rem;
}

Element with class pr7

.pb0 {
  padding-bottom: 0;
}

Element with class pb0

.pb1 {
  padding-bottom: 0.25rem;
}

Element with class pb1

.pb2 {
  padding-bottom: 0.5rem;
}

Element with class pb2

.pb3 {
  padding-bottom: 1rem;
}

Element with class pb3

.pb4 {
  padding-bottom: 2rem;
}

Element with class pb4

.pb5 {
  padding-bottom: 4rem;
}

Element with class pb5

.pb6 {
  padding-bottom: 8rem;
}

Element with class pb6

.pb7 {
  padding-bottom: 16rem;
}

Element with class pb7

.pl0 {
  padding-left: 0;
}

Element with class pl0

.pl1 {
  padding-left: 0.25rem;
}

Element with class pl1

.pl2 {
  padding-left: 0.5rem;
}

Element with class pl2

.pl3 {
  padding-left: 1rem;
}

Element with class pl3

.pl4 {
  padding-left: 2rem;
}

Element with class pl4

.pl5 {
  padding-left: 4rem;
}

Element with class pl5

.pl6 {
  padding-left: 8rem;
}

Element with class pl6

.pl7 {
  padding-left: 16rem;
}

Element with class pl7

.ph0 {
  padding-left: 0;
  padding-right: 0;
}

Element with class ph0

.ph1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

Element with class ph1

.ph2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

Element with class ph2

.ph3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

Element with class ph3

.ph4 {
  padding-left: 2rem;
  padding-right: 2rem;
}

Element with class ph4

.ph5 {
  padding-left: 4rem;
  padding-right: 4rem;
}

Element with class ph5

.ph6 {
  padding-left: 8rem;
  padding-right: 8rem;
}

Element with class ph6

.ph7 {
  padding-left: 16rem;
  padding-right: 16rem;
}

Element with class ph7

.pv0 {
  padding-top: 0;
  padding-bottom: 0;
}

Element with class pv0

.pv1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

Element with class pv1

.pv2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

Element with class pv2

.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

Element with class pv3

.pv4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

Element with class pv4

.pv5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

Element with class pv5

.pv6 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

Element with class pv6

.pv7 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

Element with class pv7

Position

More information

List of rules for module

.static {
  position: static;
}

(Example not found)

.absolute {
  position: absolute;
}

(Example not found)

.relative {
  position: relative;
}

(Example not found)

.fixed {
  position: fixed;
}

(Example not found)

.sticky {
  position: sticky;
}

(Example not found)

Reset

More information

List of rules for module

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;
}

header

(Example not found)

h1 {
  font-size: 3.0517578125em;
}

header

(Example not found)

h2 {
  font-size: 2.44140625em;
}

header

(Example not found)

h3 {
  font-size: 1.953125em;
}

header

(Example not found)

h4 {
  font-size: 1.5625em;
}

header

(Example not found)

h5 {
  font-size: 1.25em;
}

header

(Example not found)

h6 {
  font-size: 1em;
}

header

(Example not found)

small {
  font-size: 0.8em;
}

small

(Example not found)

p {
  line-height: 1.5;
}

paragraph

(Example not found)

code {
  font-family: consolas, monaco, monospace;
}

code

(Example not found)

Resize

More information

.resize {
  resize: both;
}

(Example not found)

.resize-h {
  resize: horizontal;
}

(Example not found)

.resize-v {
  resize: vertical;
}

(Example not found)

Spanning Breakpoints

More information

List of rules for module

.container {
  width: 100%;
}

(Example not found)

.container-s {
  width: 100%;
}

(Example not found)

.container-m {
  width: 100%;
}

(Example not found)

.container-l {
  width: 100%;
}

(Example not found)

.container-h {
  width: 100%;
}

(Example not found)

.show-breakpoints::before {
  content: "[breakpoint: base] ";
}

(Example not found)

Table

More information

List of rules for module

.collapse {
  border-collapse: collapse;
  border-spacing: 0;
}

Element with class collapse

.stripe-light:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Element with class stripe-light

.stripe-dark:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.1);
}

Element with class stripe-dark

Text Align

More information

.tl {
  text-align: left;
}

Element with class tl

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.tr {
  text-align: right;
}

Element with class tr

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.tc {
  text-align: center;
}

Element with class tc

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.tj {
  text-align: justify;
}

Element with class tj

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Decoration

More information

.underline {
  text-decoration: underline;
}

Element with class underline

.line-through {
  text-decoration: line-through;
}

Element with class line-through

.strike {
  text-decoration: line-through;
}

Element with class strike

.no-underline {
  text-decoration: none;
}

Element with class no-underline

Text Shadow

More information

.text-shadow {
  text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.6);
}

Element with class text-shadow

Text Transform

More information

.capitalize {
  text-transform: capitalize;
}

Element with class capitalize

.uppercase {
  text-transform: uppercase;
}

Element with class uppercase

Transform

More information

.translateX-0 {
  transform: translateX(0);
}

Element with class translateX-0

.translateX-100 {
  transform: translateX(100%);
}

Element with class translateX-100

.translateX-n100 {
  transform: translateX(-100%);
}

Element with class translateX-n100

.translateX-50 {
  transform: translateX(50%);
}

Element with class translateX-50

.translateX-n50 {
  transform: translateX(-50%);
}

Element with class translateX-n50

.translateY-0 {
  transform: translateY(0);
}

Element with class translateY-0

.translateY-100 {
  transform: translateY(100%);
}

Element with class translateY-100

.translateY-n100 {
  transform: translateY(-100%);
}

Element with class translateY-n100

.translateY-50 {
  transform: translateY(50%);
}

Element with class translateY-50

.translateY-n50 {
  transform: translateY(-50%);
}

Element with class translateY-n50

Transition

More information

.transition-slow {
  transition: all 0.5s ease-in-out;
}

(Example not found)

.transition-medium {
  transition: all 0.25s ease-in-out;
}

(Example not found)

.transition-fast {
  transition: all 0.15s ease-in-out;
}

(Example not found)

.transition-transform-slow {
  transition: transform 0.5s ease-in-out;
}

(Example not found)

.transition-transform-medium {
  transition: transform 0.25s ease-in-out;
}

(Example not found)

.transition-transform-fast {
  transition: transform 0.15s ease-in-out;
}

(Example not found)

User Select

More information

List of rules for module

.user-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

(Example not found)

.user-select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all;
}

(Example not found)

.user-select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

(Example not found)

Vertical Align

More information

List of rules for module

.v-mid {
  vertical-align: middle;
}

Element with class v-mid

.v-middle {
  vertical-align: middle;
}

Element with class v-middle

.v-top {
  vertical-align: top;
}

Element with class v-top

.v-bottom {
  vertical-align: bottom;
}

Element with class v-bottom

Visibility

More information

.visible {
  visibility: visible;
}

Element with class visible

.hidden {
  visibility: hidden;
}

Element with class hidden

.invisible {
  visibility: hidden;
}

Element with class invisible

White Space

More information

.nowrap {
  white-space: nowrap;
}

Element with class nowrap Element with class nowrap

.pre {
  white-space: pre;
}

Element with class pre Element with class pre

.pre-wrap {
  white-space: pre-wrap;
}

Element with class pre-wrap Element with class pre-wrap

Width

More information

List of rules for module

.w0 {
  width: 0;
}

Element with class w0

.w1 {
  width: 1rem;
}

Element with class w1

.w2 {
  width: 2rem;
}

Element with class w2

.w3 {
  width: 4rem;
}

Element with class w3

.w4 {
  width: 8rem;
}

Element with class w4

.w5 {
  width: 16rem;
}

Element with class w5

.w6 {
  width: 32rem;
}

Element with class w6

.w-10 {
  width: 10%;
}

Element with class w-10

.w-20 {
  width: 20%;
}

Element with class w-20

.w-25 {
  width: 25%;
}

Element with class w-25

.w-30 {
  width: 30%;
}

Element with class w-30

.w-third {
  width: 33.3333333333%;
}

Element with class w-third

.w-40 {
  width: 40%;
}

Element with class w-40

.w-50 {
  width: 50%;
}

Element with class w-50

.w-60 {
  width: 60%;
}

Element with class w-60

.w-two-thirds {
  width: 66.6666666667%;
}

Element with class w-two-thirds

.w-70 {
  width: 70%;
}

Element with class w-70

.w-75 {
  width: 75%;
}

Element with class w-75

.w-80 {
  width: 80%;
}

Element with class w-80

.w-90 {
  width: 90%;
}

Element with class w-90

.w-100 {
  width: 100%;
}

Element with class w-100

.w-auto {
  width: auto;
}

Element with class w-auto

.vw-25 {
  width: 25vw;
}

Element with class vw-25

.vw-50 {
  width: 50vw;
}

Element with class vw-50

.vw-75 {
  width: 75vw;
}

Element with class vw-75

.vw-100 {
  width: 100vw;
}

Element with class vw-100

.min-vw-100 {
  min-width: 100vw;
}

Element with class min-vw-100

Word Break

More information

.word-break-all {
  word-break: break-all;
}

Element with class word-break-all

ElementWithClassWord-break-allToIllustrateWordBreakingWithLongWords

.word-break-word {
  word-break: break-word;
}

Element with class word-break-word

ElementWithClassWord-break-wordToIllustrateWordBreakingWithLongWords

.word-break-normal {
  word-break: normal;
}

Element with class word-break-normal

ElementWithClassWord-break-normalToIllustrateWordBreakingWithLongWords

Z Index

More information

List of rules for module

.z-last {
  z-index: 9999;
}

(Example not found)

.z-n1 {
  z-index: -1;
}

(Example not found)

.z-0 {
  z-index: 0;
}

(Example not found)

.z-1 {
  z-index: 1;
}

(Example not found)

.z-2 {
  z-index: 2;
}

(Example not found)

.z-3 {
  z-index: 3;
}

(Example not found)

.z-4 {
  z-index: 4;
}

(Example not found)

.z-5 {
  z-index: 5;
}

(Example not found)

.z-6 {
  z-index: 6;
}

(Example not found)

.z-7 {
  z-index: 7;
}

(Example not found)

.z-8 {
  z-index: 8;
}

(Example not found)

.z-9 {
  z-index: 9;
}

(Example not found)

C4S docs docu­menta­tion

Aspect Ratio

Background Attachment

Background Clip

Background Color

Background Position

Background Repeat

Background Size

Border

Border Color

Border Radius

Border Style

Border Width

Box Shadow

Box Sizing

Color

Complex

Coordinates

Cursor

Debug

Display

Flex

Flex Direction

Float

Font Family

Font Size

Font Style

Font Weight

Forms

Grid

Height

Hover

Hover Background Color

Hover Color

Letter Spacing

Line Height

Margin

Max Height

Max Width

Measure

Min Height

Miscellaneous

Object Fit

Opacity

Overflow

Padding

Position

Reset

Resize

Spanning Breakpoints

Table

Text Align

Text Decoration

Text Shadow

Text Transform

Transform

Transition

User Select

Vertical Align

Visibility

White Space

Width

Word Break

Z Index

C4S docs documentation