Display
css
1
/* grid */
Sizes & Spaces
css
1234567891011121314151617181920212223242526272829303132333435
/* gap */
.gap--s{gap:0.5em;}
.gap--m{gap:1em;}
.gap--l{gap:2em;}
/* margin */
/* padding */
.padding--l{padding:2em;}
/* height */
/* width
width--50 Sets max-width to 50% of vp-max.
width--auto Sets width to auto. Very useful for grids that shouldn't be 100% width.
width--full Sets max-width to 100%.
width--l Sets max-width to 60% of vp-max.
width--m Sets max-width to 40% of vp-max.
width--s Sets max-width to 20% of vp-max.
width--vp-max Sets max-width to 100% of vp-max minus left/right default padding.
width--xl Sets max-width to 80% of vp-max.
width--xs Sets max-width to 10% of vp-max.
width--xxl Sets max-width to 90% of vp-max.
*/
Texts
css
123456789101112131415161718
/* text align */
.txt--c{text-align:center;}
.txt--l{text-align:left;}
.txt--r{text-align:right;}
/* text color */
/* font weight */
/* text transform */
/* heading style */
.h--1{}
.h--2{}
.h--3{}
.h--4{}
.h--5{}
Opacity
css
1
/* */
Border & Radius
css
123
/* radius */
.border-r--s{border-radius:1em;}
Transition
css
1
/* */
Box Shadow
css
12345
/* */
.shadow--s{}
.shadow--m{box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);}
.shadow--l{}
Visibility
css
1
/* Visibility */
Sticky
css
123456
/* sticky */
.sticky{position:sticky;}
.stycky-top--s{position:sticky;top:2em;}
.stycky-top--m{position:sticky;top:4em;}
.stycky-top--l{position:sticky;top:8em;}