Automatic.css Cheat Sheet
Here is a full list of all classes and variables in the Automatic.css framework. Use the search or filters to quickly find what you're looking for.
Dark version
light version
| Selector | Category | Type | Description |
|---|---|---|---|
| align-content--baseline | Flex & Grid Alignment | class | Sets flex or grid content to container baseline. |
| align-content--center | Flex & Grid Alignment | class | Sets flex or grid content to container center. |
| align-content--end | Flex & Grid Alignment | class | Sets flex or grid content to container end. |
| align-content--start | Flex & Grid Alignment | class | Sets flex or grid content to container start. |
| align-items--baseline | Flex & Grid Alignment | class | Sets flex or grid items to baseline. |
| align-items--center | Flex & Grid Alignment | class | Sets flex or grid items to container center. |
| align-items--end | Flex & Grid Alignment | class | Sets flex or grid items to container end. |
| align-items--start | Flex & Grid Alignment | class | Sets flex or grid items to container start. |
| aspect--1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 |
| aspect--1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 |
| aspect--16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 |
| aspect--2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 |
| aspect--2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 |
| aspect--3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 |
| aspect--3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 |
| aspect--4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 |
| aspect--9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 |
| aspect--l-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at L breakpoint |
| aspect--l-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at L breakpoint |
| aspect--l-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at L breakpoint |
| aspect--l-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at L breakpoint |
| aspect--l-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at L breakpoint |
| aspect--l-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at L breakpoint |
| aspect--l-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at L breakpoint |
| aspect--l-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at L breakpoint |
| aspect--l-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at L breakpoint |
| aspect--m-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at M breakpoint |
| aspect--m-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at M breakpoint |
| aspect--m-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at M breakpoint |
| aspect--m-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at M breakpoint |
| aspect--m-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at M breakpoint |
| aspect--m-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at M breakpoint |
| aspect--m-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at M breakpoint |
| aspect--m-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at M breakpoint |
| aspect--m-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at M breakpoint |
| aspect--s-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at S breakpoint |
| aspect--s-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at S breakpoint |
| aspect--s-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at S breakpoint |
| aspect--s-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at S breakpoint |
| aspect--s-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at S breakpoint |
| aspect--s-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at S breakpoint |
| aspect--s-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at S breakpoint |
| aspect--s-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at S breakpoint |
| aspect--s-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at S breakpoint |
| aspect--xl-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at XL breakpoint |
| aspect--xl-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at XL breakpoint |
| aspect--xl-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at XL breakpoint |
| aspect--xl-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at XL breakpoint |
| aspect--xl-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at XL breakpoint |
| aspect--xl-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at XL breakpoint |
| aspect--xl-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at XL breakpoint |
| aspect--xl-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at XL breakpoint |
| aspect--xl-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at XL breakpoint |
| bg--accent | Background Colors | class | Sets accent color as background color. |
| bg--accent-comp | Background Colors | class | Sets accent's complimentary color as background color. |
| bg--accent-dark | Background Colors | class | Sets accent dark shade as background color. |
| bg--accent-hover | Background Colors | class | Sets accent hover shade as background color. |
| bg--accent-light | Background Colors | class | Sets accent light shade as background color. |
| bg--accent-light-trans-10 | Background Colors | class | Sets accent light 10% color opacity as background color. |
| bg--accent-light-trans-20 | Background Colors | class | Sets accent light 20% color opacity as background color. |
| bg--accent-light-trans-40 | Background Colors | class | Sets accent light 40% color opacity as background color. |
| bg--accent-light-trans-60 | Background Colors | class | Sets accent light 60% color opacity as background color. |
| bg--accent-light-trans-80 | Background Colors | class | Sets accent light 80% color opacity as background color. |
| bg--accent-light-trans-90 | Background Colors | class | Sets accent light 90% color opacity as background color. |
| bg--accent-medium | Background Colors | class | Sets accent medium shade as background color. |
| bg--accent-trans-10 | Background Colors | class | Sets accent 10% color opacity as background color. |
| bg--accent-trans-20 | Background Colors | class | Sets accent 20% color opacity as background color. |
| bg--accent-trans-40 | Background Colors | class | Sets accent 40% color opacity as background color. |
| bg--accent-trans-60 | Background Colors | class | Sets accent 60% color opacity as background color. |
| bg--accent-trans-80 | Background Colors | class | Sets accent 80% color opacity as background color. |
| bg--accent-trans-90 | Background Colors | class | Sets accent 90% color opacity as background color. |
| bg--accent-ultra-dark | Background Colors | class | Sets accent ultra dark shade as background color. |
| bg--accent-ultra-dark-trans-10 | Background Colors | class | Sets accent ultra dark 10% shade as background color. |
| bg--accent-ultra-dark-trans-20 | Background Colors | class | Sets accent ultra dark 20% shade as background color. |
| bg--accent-ultra-dark-trans-40 | Background Colors | class | Sets accent ultra dark 40% shade as background color. |
| bg--accent-ultra-dark-trans-60 | Background Colors | class | Sets accent ultra dark 60% shade as background color. |
| bg--accent-ultra-dark-trans-80 | Background Colors | class | Sets accent ultra dark 80% shade as background color. |
| bg--accent-ultra-dark-trans-90 | Background Colors | class | Sets accent ultra dark 90% shade as background color. |
| bg--accent-ultra-light | Background Colors | class | Sets accent ultra light shade as background color. |
| bg--base | Background Colors | class | Sets base color as background color. |
| bg--base-comp | Background Colors | class | Sets base's complimentary color as background color. |
| bg--base-dark | Background Colors | class | Sets base dark shade as background color. |
| bg--base-hover | Background Colors | class | Sets base hover shade as background color. |
| bg--base-light | Background Colors | class | Sets base light shade as background color. |
| bg--base-light-trans-10 | Background Colors | class | Sets base light 10% color opacity as background color. |
| bg--base-light-trans-20 | Background Colors | class | Sets base light 20% color opacity as background color. |
| bg--base-light-trans-40 | Background Colors | class | Sets base light 40% color opacity as background color. |
| bg--base-light-trans-60 | Background Colors | class | Sets base light 60% color opacity as background color. |
| bg--base-light-trans-80 | Background Colors | class | Sets base light 80% color opacity as background color. |
| bg--base-light-trans-90 | Background Colors | class | Sets base light 90% color opacity as background color. |
| bg--base-medium | Background Colors | class | Sets base medium shade as background color. |
| bg--base-trans-10 | Background Colors | class | Sets base 10% color opacity as background color. |
| bg--base-trans-20 | Background Colors | class | Sets base 20% color opacity as background color. |
| bg--base-trans-40 | Background Colors | class | Sets base 40% color opacity as background color. |
| bg--base-trans-60 | Background Colors | class | Sets base 60% color opacity as background color. |
| bg--base-trans-80 | Background Colors | class | Sets base 80% color opacity as background color. |
| bg--base-trans-90 | Background Colors | class | Sets base 90% color opacity as background color. |
| bg--base-ultra-dark | Background Colors | class | Sets base ultra dark shade as background color. |
| bg--base-ultra-dark-trans-10 | Background Colors | class | Sets base ultra dark 10% shade as background color. |
| bg--base-ultra-dark-trans-20 | Background Colors | class | Sets base ultra dark 20% shade as background color. |
| bg--base-ultra-dark-trans-40 | Background Colors | class | Sets base ultra dark 40% shade as background color. |
| bg--base-ultra-dark-trans-60 | Background Colors | class | Sets base ultra dark 60% shade as background color. |
| bg--base-ultra-dark-trans-80 | Background Colors | class | Sets base ultra dark 80% shade as background color. |
| bg--base-ultra-dark-trans-90 | Background Colors | class | Sets base ultra dark 90% shade as background color. |
| bg--base-ultra-light | Background Colors | class | Sets base ultra light shade as background color. |
| bg--black | Background Colors | class | Sets black background color. |
| bg--black-trans-10 | Background Colors | class | Sets 10% black background color. |
| bg--black-trans-20 | Background Colors | class | Sets 20% black background color. |
| bg--black-trans-40 | Background Colors | class | Sets 40% black background color. |
| bg--black-trans-60 | Background Colors | class | Sets 60% black background color. |
| bg--black-trans-80 | Background Colors | class | Sets 80% black background color. |
| bg--black-trans-90 | Background Colors | class | Sets 90% black background color. |
| bg--primary | Background Colors | class | Sets primary color as background color. |
| bg--primary-comp | Background Colors | class | Sets primary's complimentary color as background color. |
| bg--primary-dark | Background Colors | class | Sets primary dark shade as background color. |
| bg--primary-hover | Background Colors | class | Sets primary hover shade as background color. |
| bg--primary-light | Background Colors | class | Sets primary light shade as background color. |
| bg--primary-light-trans-10 | Background Colors | class | Sets primary light 10% color opacity as background color. |
| bg--primary-light-trans-20 | Background Colors | class | Sets primary light 20% color opacity as background color. |
| bg--primary-light-trans-40 | Background Colors | class | Sets primary light 40% color opacity as background color. |
| bg--primary-light-trans-60 | Background Colors | class | Sets primary light 60% color opacity as background color. |
| bg--primary-light-trans-80 | Background Colors | class | Sets primary light 80% color opacity as background color. |
| bg--primary-light-trans-90 | Background Colors | class | Sets primary light 90% color opacity as background color. |
| bg--primary-medium | Background Colors | class | Sets primary medium shade as background color. |
| bg--primary-trans-10 | Background Colors | class | Sets primary 10% color opacity as background color. |
| bg--primary-trans-20 | Background Colors | class | Sets primary 20% color opacity as background color. |
| bg--primary-trans-40 | Background Colors | class | Sets primary 40% color opacity as background color. |
| bg--primary-trans-60 | Background Colors | class | Sets primary 60% color opacity as background color. |
| bg--primary-trans-80 | Background Colors | class | Sets primary 80% color opacity as background color. |
| bg--primary-trans-90 | Background Colors | class | Sets primary 90% color opacity as background color. |
| bg--primary-ultra-dark | Background Colors | class | Sets primary ultra dark shade as background color. |
| bg--primary-ultra-dark-trans-10 | Background Colors | class | Sets primary ultra dark 10% shade as background color. |
| bg--primary-ultra-dark-trans-20 | Background Colors | class | Sets primary ultra dark 20% shade as background color. |
| bg--primary-ultra-dark-trans-40 | Background Colors | class | Sets primary ultra dark 40% shade as background color. |
| bg--primary-ultra-dark-trans-60 | Background Colors | class | Sets primary ultra dark 60% shade as background color. |
| bg--primary-ultra-dark-trans-80 | Background Colors | class | Sets primary ultra dark 80% shade as background color. |
| bg--primary-ultra-dark-trans-90 | Background Colors | class | Sets primary ultra dark 90% shade as background color. |
| bg--primary-ultra-light | Background Colors | class | Sets primary ultra light shade as background color. |
| bg--secondary | Background Colors | class | Sets secondary color as background color. |
| bg--secondary-comp | Background Colors | class | Sets secondary's complimentary color as background color. |
| bg--secondary-dark | Background Colors | class | Sets secondary dark shade as background color. |
| bg--secondary-hover | Background Colors | class | Sets secondary hover shade as background color. |
| bg--secondary-light | Background Colors | class | Sets secondary light shade as background color. |
| bg--secondary-light-trans-10 | Background Colors | class | Sets secondary light 10% color opacity as background color. |
| bg--secondary-light-trans-20 | Background Colors | class | Sets secondary light 20% color opacity as background color. |
| bg--secondary-light-trans-40 | Background Colors | class | Sets secondary light 40% color opacity as background color. |
| bg--secondary-light-trans-60 | Background Colors | class | Sets secondary light 60% color opacity as background color. |
| bg--secondary-light-trans-80 | Background Colors | class | Sets secondary light 80% color opacity as background color. |
| bg--secondary-light-trans-90 | Background Colors | class | Sets secondary light 90% color opacity as background color. |
| bg--secondary-medium | Background Colors | class | Sets secondary medium shade as background color. |
| bg--secondary-trans-10 | Background Colors | class | Sets secondary 10% color opacity as background color. |
| bg--secondary-trans-20 | Background Colors | class | Sets secondary 20% color opacity as background color. |
| bg--secondary-trans-40 | Background Colors | class | Sets secondary 40% color opacity as background color. |
| bg--secondary-trans-60 | Background Colors | class | Sets secondary 60% color opacity as background color. |
| bg--secondary-trans-80 | Background Colors | class | Sets secondary 80% color opacity as background color. |
| bg--secondary-trans-90 | Background Colors | class | Sets secondary 90% color opacity as background color. |
| bg--secondary-ultra-dark | Background Colors | class | Sets secondary ultra dark shade as background color. |
| bg--secondary-ultra-dark-trans-10 | Background Colors | class | Sets secondary ultra dark 10% shade as background color. |
| bg--secondary-ultra-dark-trans-20 | Background Colors | class | Sets secondary ultra dark 20% shade as background color. |
| bg--secondary-ultra-dark-trans-40 | Background Colors | class | Sets secondary ultra dark 40% shade as background color. |
| bg--secondary-ultra-dark-trans-60 | Background Colors | class | Sets secondary ultra dark 60% shade as background color. |
| bg--secondary-ultra-dark-trans-80 | Background Colors | class | Sets secondary ultra dark 80% shade as background color. |
| bg--secondary-ultra-dark-trans-90 | Background Colors | class | Sets secondary ultra dark 90% shade as background color. |
| bg--secondary-ultra-light | Background Colors | class | Sets secondary ultra light shade as background color. |
| bg--shade-dark | Background Colors | class | Sets dark shade color as background color. |
| bg--shade-light | Background Colors | class | Sets light shade color as background color. |
| bg--shade-light-trans-10 | Background Colors | class | Sets shade light 10% color opacity as background color. |
| bg--shade-light-trans-20 | Background Colors | class | Sets shade light 20% color opacity as background color. |
| bg--shade-light-trans-40 | Background Colors | class | Sets shade light 40% color opacity as background color. |
| bg--shade-light-trans-60 | Background Colors | class | Sets shade light 60% color opacity as background color. |
| bg--shade-light-trans-80 | Background Colors | class | Sets shade light 80% color opacity as background color. |
| bg--shade-light-trans-90 | Background Colors | class | Sets shade light 90% color opacity as background color. |
| bg--shade-medium | Background Colors | class | Sets medium shade color as background color. |
| bg--shade-trans-10 | Background Colors | class | Sets shade 10% color opacity as background color. |
| bg--shade-trans-20 | Background Colors | class | Sets shade 20% color opacity as background color. |
| bg--shade-trans-40 | Background Colors | class | Sets shade 40% color opacity as background color. |
| bg--shade-trans-60 | Background Colors | class | Sets shade 60% color opacity as background color. |
| bg--shade-trans-80 | Background Colors | class | Sets shade 80% color opacity as background color. |
| bg--shade-trans-90 | Background Colors | class | Sets shade 90% color opacity as background color. |
| bg--shade-ultra-dark | Background Colors | class | Sets ultra dark shade color as background color. |
| bg--shade-ultra-dark-trans-10 | Background Colors | class | Sets ultra dark 10% shade as background color. |
| bg--shade-ultra-dark-trans-20 | Background Colors | class | Sets ultra dark 20% shade as background color. |
| bg--shade-ultra-dark-trans-40 | Background Colors | class | Sets ultra dark 40% shade as background color. |
| bg--shade-ultra-dark-trans-60 | Background Colors | class | Sets ultra dark 60% shade as background color. |
| bg--shade-ultra-dark-trans-80 | Background Colors | class | Sets ultra dark 80% shade as background color. |
| bg--shade-ultra-dark-trans-90 | Background Colors | class | Sets ultra dark 90% shade as background color. |
| bg--shade-ultra-light | Background Colors | class | Sets ultra light shade color as background color. |
| bg--white | Background Colors | class | Sets white background color. |
| bg--white-trans-10 | Background Colors | class | Sets white 10% color opacity as background color. |
| bg--white-trans-20 | Background Colors | class | Sets white 20% color opacity as background color. |
| bg--white-trans-40 | Background Colors | class | Sets white 40% color opacity as background color. |
| bg--white-trans-60 | Background Colors | class | Sets white 60% color opacity as background color. |
| bg--white-trans-80 | Background Colors | class | Sets white 80% color opacity as background color. |
| bg--white-trans-90 | Background Colors | class | Sets white 90% color opacity as background color. |
| box-shadow--l | Box Shadows | class | Sets large multi-layer box shadow. |
| box-shadow--m | Box Shadows | class | Sets medium multi-layer box shadow. |
| box-shadow--xl | Box Shadows | class | Sets x-large multi-layer box shadow. |
| breakout--full | Breakouts | class | Breakout object to full viewport width. |
| breakout--l | Breakouts | class | Breakout object to 80% viewport width. |
| breakout--m | Breakouts | class | Breakout object to 70% viewport width. |
| breakout--s | Breakouts | class | Breakout object to 60% viewport width. |
| breakout--xl | Breakouts | class | Breakout object to 90% viewport width. |
| btn--accent | Buttons | class | Sets button background color to accent. |
| btn--base | Buttons | class | Sets button background color to base. |
| btn--black | Buttons | class | Sets button background color to black. |
| btn--l | Buttons | class | Sets button text size to large. |
| btn--m | Buttons | class | Sets button text size to medium (default). |
| btn--outline | Buttons | class | Changes button style to outline. |
| btn--primary | Buttons | class | Sets button background color to primary. |
| btn--s | Buttons | class | Sets button text size to small. |
| btn--secondary | Buttons | class | Sets button background color to secondary. |
| btn--white | Buttons | class | Sets button background color to white. |
| btn--xl | Buttons | class | Sets button text size to x-large. |
| btn--xs | Buttons | class | Sets button text size to x-small. |
| btn--xxl | Buttons | class | Sets button text size to xx-large. |
| center--all | Centering | class | Centers content along X and Y axis. |
| center--all-l | Centering | class | Centers content along X and Y axis at L breakpoint. |
| center--all-m | Centering | class | Centers content along X and Y axis at M breakpoint. |
| center--all-s | Centering | class | Centers content along X and Y axis at S breakpoint. |
| center--all-xl | Centering | class | Centers content along X and Y axis at XL breakpoint. |
| center--bottom | Centering | class | Horizontally centers content to the bottom. |
| center--bottom-l | Centering | class | Horizontally centers content to the bottom at L breakpoint. |
| center--bottom-m | Centering | class | Horizontally centers content to the bottom at M breakpoint. |
| center--bottom-s | Centering | class | Horizontally centers content to the bottom at S breakpoint. |
| center--bottom-xl | Centering | class | Horizontally centers content to the bottom at XL breakpoint. |
| center--left | Centering | class | Vertically centers content to the left. |
| center--left-l | Centering | class | Vertically centers content to the left at L breakpoint. |
| center--left-m | Centering | class | Vertically centers content to the left at M breakpoint. |
| center--left-s | Centering | class | Vertically centers content to the left at S breakpoint. |
| center--left-xl | Centering | class | Vertically centers content to the left at XL breakpoint. |
| center--right | Centering | class | Vertically centers content to the right. |
| center--right-l | Centering | class | Vertically centers content to the right at L breakpoint. |
| center--right-m | Centering | class | Vertically centers content to the right at M breakpoint. |
| center--right-s | Centering | class | Vertically centers content to the right at S breakpoint. |
| center--right-xl | Centering | class | Vertically centers content to the right at XL breakpoint. |
| center--self | Centering | class | Horizontally centers content using auto margins. |
| center--top | Centering | class | Horizontally centers content to the top. |
| center--top-l | Centering | class | Horizontally centers content to the top at L breakpoint. |
| center--top-m | Centering | class | Horizontally centers content to the top at M breakpoint. |
| center--top-s | Centering | class | Horizontally centers content to the top at S breakpoint. |
| center--top-xl | Centering | class | Horizontally centers content to the top at XL breakpoint. |
| col-span--2 | Grid Spans | class | Spans the grid cell 2 columns. |
| col-span--3 | Grid Spans | class | Spans the grid cell 3 columns. |
| col-span--4 | Grid Spans | class | Spans the grid cell 4 columns. |
| col-span--5 | Grid Spans | class | Spans the grid cell 5 columns. |
| col-span--6 | Grid Spans | class | Spans the grid cell 6 columns. |
| col-span--l-1 | Grid Spans | class | Spans the grid cell 1 column at L breakpoint. |
| col-span--l-2 | Grid Spans | class | Spans the grid cell 2 columns at L breakpoint. |
| col-span--l-3 | Grid Spans | class | Spans the grid cell 3 columns at L breakpoint. |
| col-span--l-4 | Grid Spans | class | Spans the grid cell 4 columns at L breakpoint. |
| col-span--l-5 | Grid Spans | class | Spans the grid cell 5 columns at L breakpoint. |
| col-span--l-6 | Grid Spans | class | Spans the grid cell 6 columns at L breakpoint. |
| col-span--m-1 | Grid Spans | class | Spans the grid cell 1 column at M breakpoint. |
| col-span--m-2 | Grid Spans | class | Spans the grid cell 2 columns at M breakpoint. |
| col-span--m-3 | Grid Spans | class | Spans the grid cell 3 columns at M breakpoint. |
| col-span--m-4 | Grid Spans | class | Spans the grid cell 4 columns at M breakpoint. |
| col-span--m-5 | Grid Spans | class | Spans the grid cell 5 columns at M breakpoint. |
| col-span--m-6 | Grid Spans | class | Spans the grid cell 6 columns at M breakpoint. |
| col-span--s-1 | Grid Spans | class | Spans the grid cell 1 column at S breakpoint. |
| col-span--s-2 | Grid Spans | class | Spans the grid cell 2 columns at S breakpoint. |
| col-span--s-3 | Grid Spans | class | Spans the grid cell 3 columns at S breakpoint. |
| col-span--s-4 | Grid Spans | class | Spans the grid cell 4 columns at S breakpoint. |
| col-span--s-5 | Grid Spans | class | Spans the grid cell 5 columns at S breakpoint. |
| col-span--s-6 | Grid Spans | class | Spans the grid cell 6 columns at S breakpoint. |
| col-span--xl-1 | Grid Spans | class | Spans the grid cell 1 column at XL breakpoint. |
| col-span--xl-2 | Grid Spans | class | Spans the grid cell 2 columns at XL breakpoint. |
| col-span--xl-3 | Grid Spans | class | Spans the grid cell 3 columns at XL breakpoint. |
| col-span--xl-4 | Grid Spans | class | Spans the grid cell 4 columns at XL breakpoint. |
| col-span--xl-5 | Grid Spans | class | Spans the grid cell 5 columns at XL breakpoint. |
| col-span--xl-6 | Grid Spans | class | Spans the grid cell 6 columns at XL breakpoint. |
| col-start--1 | Grid Order | class | Sets grid cell start to 1 |
| col-start--2 | Grid Order | class | Sets grid cell start to 2 |
| col-start--3 | Grid Order | class | Sets grid cell start to 3 |
| col-start--4 | Grid Order | class | Sets grid cell start to 4 |
| col-start--5 | Grid Order | class | Sets grid cell start to 5 |
| col-start--6 | Grid Order | class | Sets grid cell start to 6 |
| col-start--l-1 | Grid Order | class | Sets grid cell start to 1 at L breakpoint |
| col-start--l-2 | Grid Order | class | Sets grid cell start to 2 at L breakpoint |
| col-start--l-3 | Grid Order | class | Sets grid cell start to 3 at L breakpoint |
| col-start--l-4 | Grid Order | class | Sets grid cell start to 4 at L breakpoint |
| col-start--l-5 | Grid Order | class | Sets grid cell start to 5 at L breakpoint |
| col-start--l-6 | Grid Order | class | Sets grid cell start to 6 at L breakpoint |
| col-start--m-1 | Grid Order | class | Sets grid cell start to 1 at M breakpoint |
| col-start--m-2 | Grid Order | class | Sets grid cell start to 2 at M breakpoint |
| col-start--m-3 | Grid Order | class | Sets grid cell start to 3 at M breakpoint |
| col-start--m-4 | Grid Order | class | Sets grid cell start to 4 at M breakpoint |
| col-start--m-5 | Grid Order | class | Sets grid cell start to 5 at M breakpoint |
| col-start--m-6 | Grid Order | class | Sets grid cell start to 6 at M breakpoint |
| col-start--s-1 | Grid Order | class | Sets grid cell start to 1 at S breakpoint |
| col-start--s-2 | Grid Order | class | Sets grid cell start to 2 at S breakpoint |
| col-start--s-3 | Grid Order | class | Sets grid cell start to 3 at S breakpoint |
| col-start--s-4 | Grid Order | class | Sets grid cell start to 4 at S breakpoint |
| col-start--s-5 | Grid Order | class | Sets grid cell start to 5 at S breakpoint |
| col-start--s-6 | Grid Order | class | Sets grid cell start to 6 at S breakpoint |
| col-start--xl-1 | Grid Order | class | Sets grid cell start to 1 at XL breakpoint |
| col-start--xl-2 | Grid Order | class | Sets grid cell start to 2 at XL breakpoint |
| col-start--xl-3 | Grid Order | class | Sets grid cell start to 3 at XL breakpoint |
| col-start--xl-4 | Grid Order | class | Sets grid cell start to 4 at XL breakpoint |
| col-start--xl-5 | Grid Order | class | Sets grid cell start to 5 at XL breakpoint |
| col-start--xl-6 | Grid Order | class | Sets grid cell start to 6 at XL breakpoint |
| flex--col | Flexbox | class | Sets flex direction to column. |
| flex--col-l | Flexbox | class | Sets flex direction to column at L breakpoint. |
| flex--col-m | Flexbox | class | Sets flex direction to column at M breakpoint. |
| flex--col-reverse | Flexbox | class | Reverses column direction. |
| flex--col-reverse-l | Flexbox | class | Reverses column direction at L breakpont. |
| flex--col-reverse-m | Flexbox | class | Reverses column direction at M breakpont. |
| flex--col-reverse-s | Flexbox | class | Reverses column direction at S breakpont. |
| flex--col-reverse-xl | Flexbox | class | Reverses column direction at XL breakpont. |
| flex--col-s | Flexbox | class | Sets flex direction to column at S breakpoint. |
| flex--col-xl | Flexbox | class | Sets flex direction to column at XL breakpoint. |
| flex--row | Flexbox | class | Sets flex direction to row. |
| flex--row-l | Flexbox | class | Sets flex direction to row at L breakpoint. |
| flex--row-m | Flexbox | class | Sets flex direction to row at M breakpoint. |
| flex--row-reverse | Flexbox | class | Reverses row direction. |
| flex--row-reverse-l | Flexbox | class | Reverses row direction at L breakpont. |
| flex--row-reverse-m | Flexbox | class | Reverses row direction at M breakpont. |
| flex--row-reverse-s | Flexbox | class | Reverses row direction at S breakpont. |
| flex--row-reverse-xl | Flexbox | class | Reverses row direction at XL breakpont. |
| flex--row-s | Flexbox | class | Sets flex direction to row at S breakpoint. |
| flex--row-xl | Flexbox | class | Sets flex direction to row at XL breakpoint. |
| flex--wrap | Flexbox | class | Sets flex to wrap. |
| flip--x | Flip | class | Flips object along the X axis. |
| flip--xy | Flip | class | Flips object along both axes. |
| flip--y | Flip | class | Flips object along the Y axis. |
| gap--l | Grid & Flex Gaps | class | Sets grid or flex gap to large. |
| gap--m | Grid & Flex Gaps | class | Sets grid or flex gap to medium. |
| gap--s | Grid & Flex Gaps | class | Sets grid or flex gap to small. |
| gap--xl | Grid & Flex Gaps | class | Sets grid or flex gap to x-large. |
| gap--xs | Grid & Flex Gaps | class | Sets grid or flex gap to x-small. |
| gap--xxl | Grid & Flex Gaps | class | Sets grid or flex gap to xx-large. |
| grid--1 | Grids | class | Sets grid structure to 1 column. |
| grid--1-2 | Grids | class | Sets grid structure to 1fr 2fr. |
| grid--1-3 | Grids | class | Sets grid structure to 1fr 3fr. |
| grid--2 | Grids | class | Sets grid structure to 2 columns. |
| grid--2-1 | Grids | class | Sets grid structure to 2fr 1fr. |
| grid--2-3 | Grids | class | Sets grid structure to 2fr 3fr. |
| grid--3 | Grids | class | Sets grid structure to 3 columns. |
| grid--3-1 | Grids | class | Sets grid structure to 3fr 1fr. |
| grid--3-2 | Grids | class | Sets grid structure to 3fr 2fr. |
| grid--4 | Grids | class | Sets grid structure to 4 columns. |
| grid--5 | Grids | class | Sets grid structure to 5 columns. |
| grid--6 | Grids | class | Sets grid structure to 6 columns. |
| grid--auto-1-2 | Auto Grids | class | Sets grid structure to 1fr 2fr with auto responsiveness. |
| grid--auto-1-3 | Auto Grids | class | Sets grid structure to 1fr 3fr with auto responsiveness. |
| grid--auto-2 | Auto Grids | class | Sets grid structure to 2 columns with auto responsiveness. |
| grid--auto-2-1 | Auto Grids | class | Sets grid structure to 2fr 1fr with auto responsiveness. |
| grid--auto-2-3 | Auto Grids | class | Sets grid structure to 2fr 3fr with auto responsiveness. |
| grid--auto-3 | Auto Grids | class | Sets grid structure to 3 columns with auto responsiveness. |
| grid--auto-3-1 | Auto Grids | class | Sets grid structure to 3fr 1fr with auto responsiveness. |
| grid--auto-3-2 | Auto Grids | class | Sets grid structure to 3fr 2fr with auto responsiveness. |
| grid--auto-4 | Auto Grids | class | Sets grid structure to 4 columns with auto responsiveness. |
| grid--auto-5 | Auto Grids | class | Sets grid structure to 5 columns with auto responsiveness. |
| grid--auto-6 | Auto Grids | class | Sets grid structure to 6 columns with auto responsiveness. |
| grid--l-1 | Grids | class | Sets grid structure to 1 column at L breakpoint. |
| grid--l-2 | Grids | class | Sets grid structure to 2 column at L breakpoint. |
| grid--l-3 | Grids | class | Sets grid structure to 3 column at L breakpoint. |
| grid--l-4 | Grids | class | Sets grid structure to 4 column at L breakpoint. |
| grid--l-5 | Grids | class | Sets grid structure to 5 column at L breakpoint. |
| grid--m-1 | Grids | class | Sets grid structure to 1 column at M breakpoint. |
| grid--m-2 | Grids | class | Sets grid structure to 2 column at M breakpoint. |
| grid--m-3 | Grids | class | Sets grid structure to 3 column at M breakpoint. |
| grid--m-4 | Grids | class | Sets grid structure to 4 column at M breakpoint. |
| grid--s-1 | Grids | class | Sets grid structure to 1 column at S breakpoint. |
| grid--s-2 | Grids | class | Sets grid structure to 2 column at S breakpoint. |
| grid--s-3 | Grids | class | Sets grid structure to 3 column at S breakpoint. |
| grid--s-4 | Grids | class | Sets grid structure to 4 column at S breakpoint. |
| grid--xl-1 | Grids | class | Sets grid structure to 1 column at XL breakpoint. |
| grid--xl-2 | Grids | class | Sets grid structure to 2 column at XL breakpoint. |
| grid--xl-3 | Grids | class | Sets grid structure to 3 column at XL breakpoint. |
| grid--xl-4 | Grids | class | Sets grid structure to 4 column at XL breakpoint. |
| grid--xl-5 | Grids | class | Sets grid structure to 5 column at XL breakpoint. |
| height--30 | Height | class | Sets min-height to 30vh. |
| height--40 | Height | class | Sets min-height to 40vh. |
| height--50 | Height | class | Sets min-height to 50vh. |
| height--60 | Height | class | Sets min-height to 60vh. |
| height--70 | Height | class | Sets min-height to 70vh. |
| height--80 | Height | class | Sets min-height to 80vh. |
| height--90 | Height | class | Sets min-height to 90vh. |
| height--full | Height | class | Sets min-height to 100vh. |
| height--xl-30 | Height | class | Sets min-height to 30vh at XL breakpoint. |
| height--xl-40 | Height | class | Sets min-height to 40vh at XL breakpoint. |
| height--xl-50 | Height | class | Sets min-height to 50vh at XL breakpoint. |
| height--xl-60 | Height | class | Sets min-height to 60vh at XL breakpoint. |
| height--xl-70 | Height | class | Sets min-height to 70vh at XL breakpoint. |
| height--xl-80 | Height | class | Sets min-height to 80vh at XL breakpoint. |
| height--xl-90 | Height | class | Sets min-height to 90vh at XL breakpoint. |
| height--l-30 | Height | class | Sets min-height to 30vh at L breakpoint. |
| height--l-40 | Height | class | Sets min-height to 40vh at L breakpoint. |
| height--l-50 | Height | class | Sets min-height to 50vh at L breakpoint. |
| height--l-60 | Height | class | Sets min-height to 60vh at L breakpoint. |
| height--l-70 | Height | class | Sets min-height to 70vh at L breakpoint. |
| height--l-80 | Height | class | Sets min-height to 80vh at L breakpoint. |
| height--l-90 | Height | class | Sets min-height to 90vh at L breakpoint. |
| height--m-30 | Height | class | Sets min-height to 30vh at M breakpoint. |
| height--m-40 | Height | class | Sets min-height to 40vh at M breakpoint. |
| height--m-50 | Height | class | Sets min-height to 50vh at M breakpoint. |
| height--m-60 | Height | class | Sets min-height to 60vh at M breakpoint. |
| height--m-70 | Height | class | Sets min-height to 70vh at M breakpoint. |
| height--m-80 | Height | class | Sets min-height to 80vh at M breakpoint. |
| height--m-90 | Height | class | Sets min-height to 90vh at M breakpoint. |
| height--s-30 | Height | class | Sets min-height to 30vh at S breakpoint. |
| height--s-40 | Height | class | Sets min-height to 40vh at S breakpoint. |
| height--s-50 | Height | class | Sets min-height to 50vh at S breakpoint. |
| height--s-60 | Height | class | Sets min-height to 60vh at S breakpoint. |
| height--s-70 | Height | class | Sets min-height to 70vh at S breakpoint. |
| height--s-80 | Height | class | Sets min-height to 80vh at S breakpoint. |
| height--s-90 | Height | class | Sets min-height to 90vh at S breakpoint. |
| justify-content--around | Flex & Grid Alignment | class | Sets flex or grid content to space-around. |
| justify-content--between | Flex & Grid Alignment | class | Sets flex or grid content to space-between. |
| justify-content--center | Flex & Grid Alignment | class | Sets flex or grid content to container center. |
| justify-content--end | Flex & Grid Alignment | class | Sets flex or grid content to container end. |
| justify-content--start | Flex & Grid Alignment | class | Sets flex or grid content to container start. |
| justify-items--center | Flex & Grid Alignment | class | Sets grid content to container center. |
| justify-items--end | Flex & Grid Alignment | class | Sets grid content to container end. |
| justify-items--start | Flex & Grid Alignment | class | Sets grid content to container start. |
| link--accent | Links | class | Sets accent color as link color. |
| link--accent-dark | Links | class | Sets accent dark shade as link color. |
| link--accent-light | Links | class | Sets accent light shade as link color. |
| link--accent-medium | Links | class | Sets accent medium shade as link color. |
| link--accent-ultra-dark | Links | class | Sets accent ultra dark shade as link color. |
| link--accent-ultra-light | Links | class | Sets accent ultra light shade as link color. |
| link--base | Links | class | Sets base color as link color. |
| link--base-dark | Links | class | Sets base dark shade as link color. |
| link--base-light | Links | class | Sets base light shade as link color. |
| link--base-medium | Links | class | Sets base medium shade as link color. |
| link--base-ultra-dark | Links | class | Sets base ultra dark shade as link color. |
| link--base-ultra-light | Links | class | Sets base ultra light shade as link color. |
| link--black | Links | class | Sets black as link color. |
| link--primary | Links | class | Sets primary color as link color. |
| link--primary-dark | Links | class | Sets primary dark shade as link color. |
| link--primary-light | Links | class | Sets primary light shade as link color. |
| link--primary-medium | Links | class | Sets primary medium shade as link color. |
| link--primary-ultra-dark | Links | class | Sets primary ultra dark shade as link color. |
| link--primary-ultra-light | Links | class | Sets primary ultra light shade as link color. |
| link--secondary | Links | class | Sets secondary color as link color. |
| link--secondary-dark | Links | class | Sets secondary dark shade as link color. |
| link--secondary-light | Links | class | Sets secondary light shade as link color. |
| link--secondary-medium | Links | class | Sets secondary medium shade as link color. |
| link--secondary-ultra-dark | Links | class | Sets secondary ultra dark shade as link color. |
| link--secondary-ultra-light | Links | class | Sets secondary ultra light shade as link color. |
| link--shade-dark | Links | class | Sets shade dark as link color. |
| link--shade-light | Links | class | Sets shade light as link color. |
| link--shade-medium | Links | class | Sets shade medium as link color. |
| link--shade-ultra-dark | Links | class | Sets shade ultra dark as link color. |
| link--shade-ultra-light | Links | class | Sets shade ultra light as link color. |
| link--skip | Links | class | Allows you to easily create an on-brand Skip Link in your primary template |
| link--white | Links | class | Sets white as link color. |
| margin-bottom--l | Margin | class | Sets bottom margin to large. |
| margin-bottom--m | Margin | class | Sets bottom margin to medium. |
| margin-bottom--s | Margin | class | Sets bottom margin to small. |
| margin-bottom--xl | Margin | class | Sets bottom margin to x-large. |
| margin-bottom--xs | Margin | class | Sets bottom margin to x-small. |
| margin-bottom--xxl | Margin | class | Sets bottom margin to xx-large. |
| margin-left--l | Margin | class | Sets left margin to large. |
| margin-left--m | Margin | class | Sets left margin to medium. |
| margin-left--s | Margin | class | Sets left margin to small. |
| margin-left--xl | Margin | class | Sets left margin to x-large. |
| margin-left--xs | Margin | class | Sets left margin to x-small. |
| margin-left--xxl | Margin | class | Sets left margin to xx-large. |
| margin-right--l | Margin | class | Sets right margin to large. |
| margin-right--m | Margin | class | Sets right margin to medium. |
| margin-right--s | Margin | class | Sets right margin to small. |
| margin-right--xl | Margin | class | Sets right margin to x-large. |
| margin-right--xs | Margin | class | Sets right margin to x-small. |
| margin-right--xxl | Margin | class | Sets right margin to xx-large. |
| margin-top--l | Margin | class | Sets top margin to large. |
| margin-top--m | Margin | class | Sets top margin to medium. |
| margin-top--s | Margin | class | Sets top margin to small. |
| margin-top--xl | Margin | class | Sets top margin to x-large. |
| margin-top--xs | Margin | class | Sets top margin to x-small. |
| margin-top--xxl | Margin | class | Sets top margin to xx-large. |
| max-height--30 | Max Height | class | Sets Max Height Height to 30vh. |
| max-height--40 | Max Height | class | Sets Max Height Height to 40vh. |
| max-height--50 | Max Height | class | Sets Max Height Height to 50vh. |
| max-height--60 | Max Height | class | Sets Max Height Height to 60vh. |
| max-height--70 | Max Height | class | Sets Max Height Height to 70vh. |
| max-height--80 | Max Height | class | Sets Max Height Height to 80vh. |
| max-height--90 | Max Height | class | Sets Max Height Height to 90vh. |
| max-height--xl-30 | Max Height | class | Sets Max Height Height to 30vh at XL breakpoint. |
| max-height--xl-40 | Max Height | class | Sets Max Height Height to 40vh at XL breakpoint. |
| max-height--xl-50 | Max Height | class | Sets Max Height Height to 50vh at XL breakpoint. |
| max-height--xl-60 | Max Height | class | Sets Max Height Height to 60vh at XL breakpoint. |
| max-height--xl-70 | Max Height | class | Sets Max Height Height to 70vh at XL breakpoint. |
| max-height--xl-80 | Max Height | class | Sets Max Height Height to 80vh at XL breakpoint. |
| max-height--xl-90 | Max Height | class | Sets Max Height Height to 90vh at XL breakpoint. |
| max-height--l-30 | Max Height | class | Sets Max Height Height to 30vh at L breakpoint. |
| max-height--l-40 | Max Height | class | Sets Max Height Height to 40vh at L breakpoint. |
| max-height--l-50 | Max Height | class | Sets Max Height Height to 50vh at L breakpoint. |
| max-height--l-60 | Max Height | class | Sets Max Height Height to 60vh at L breakpoint. |
| max-height--l-70 | Max Height | class | Sets Max Height Height to 70vh at L breakpoint. |
| max-height--l-80 | Max Height | class | Sets Max Height Height to 80vh at L breakpoint. |
| max-height--l-90 | Max Height | class | Sets Max Height Height to 90vh at L breakpoint. |
| max-height--m-30 | Max Height | class | Sets Max Height Height to 30vh at M breakpoint. |
| max-height--m-40 | Max Height | class | Sets Max Height Height to 40vh at M breakpoint. |
| max-height--m-50 | Max Height | class | Sets Max Height Height to 50vh at M breakpoint. |
| max-height--m-60 | Max Height | class | Sets Max Height Height to 60vh at M breakpoint. |
| max-height--m-70 | Max Height | class | Sets Max Height Height to 70vh at M breakpoint. |
| max-height--m-80 | Max Height | class | Sets Max Height Height to 80vh at M breakpoint. |
| max-height--m-90 | Max Height | class | Sets Max Height Height to 90vh at M breakpoint. |
| max-height--s-30 | Max Height | class | Sets Max Height Height to 30vh at S breakpoint. |
| max-height--s-40 | Max Height | class | Sets Max Height Height to 40vh at S breakpoint. |
| max-height--s-50 | Max Height | class | Sets Max Height Height to 50vh at S breakpoint. |
| max-height--s-60 | Max Height | class | Sets Max Height Height to 60vh at S breakpoint. |
| max-height--s-70 | Max Height | class | Sets Max Height Height to 70vh at S breakpoint. |
| max-height--s-80 | Max Height | class | Sets Max Height Height to 80vh at S breakpoint. |
| max-height--s-90 | Max Height | class | Sets Max Height Height to 90vh at S breakpoint. |
| object-fit--bottom-center | Images | class | Preserves the bottom center of an object-fit image. |
| object-fit--bottom-left | Images | class | Preserves the bottom left of an object-fit image. |
| object-fit--bottom-right | Images | class | Preserves the bottom right of an object-fit image. |
| object-fit--center-left | Images | class | Preserves the bottom center of an object-fit image. |
| object-fit--center-right | Images | class | Preserves the right middle of an object-fit image. |
| object-fit--contain | Images | class | Sets object-fit to "contain." |
| object-fit--cover | Images | class | Sets object-fit to "cover." |
| object-fit--top-center | Images | class | Preserves the center top of an object-fit image. |
| object-fit--top-left | Images | class | Preserves the top left of an object-fit image. |
| object-fit--top-right | Images | class | Preserves the top right of an object-fit image. |
| opacity--10 | Opacities | class | Sets opacity to 10%. |
| opacity--20 | Opacities | class | Sets opacity to 20%. |
| opacity--30 | Opacities | class | Sets opacity to 30%. |
| opacity--40 | Opacities | class | Sets opacity to 40%. |
| opacity--5 | Opacities | class | Sets opacity to 5%. |
| opacity--50 | Opacities | class | Sets opacity to 50%. |
| opacity--60 | Opacities | class | Sets opacity to 60%. |
| opacity--70 | Opacities | class | Sets opacity to 70%. |
| opacity--80 | Opacities | class | Sets opacity to 80%. |
| opacity--90 | Opacities | class | Sets opacity to 90%. |
| opacity--95 | Opacities | class | Sets opacity to 95%. |
| order--first | Grid Order | class | Sets a grid cell's order to first. |
| order--first-l | Grid Order | class | Sets a grid cell's order to first at L breakpoint. |
| order--first-m | Grid Order | class | Sets a grid cell's order to first at M breakpoint. |
| order--first-s | Grid Order | class | Sets a grid cell's order to first at S breakpoint. |
| order--first-xl | Grid Order | class | Sets a grid cell's order to first at XL breakpoint. |
| order--last | Grid Order | class | Sets a grid cell's order to last. |
| order--last-l | Grid Order | class | Sets a grid cell's order to last at L breakpoint. |
| order--last-m | Grid Order | class | Sets a grid cell's order to last at M breakpoint. |
| order--last-s | Grid Order | class | Sets a grid cell's order to last at S breakpoint. |
| order--last-xl | Grid Order | class | Sets a grid cell's order to last at XL breakpoint. |
| overlay--accent-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light accent color |
| overlay--accent-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light accent color |
| overlay--accent-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light accent color |
| overlay--accent-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light accent color |
| overlay--accent-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light accent color |
| overlay--accent-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light accent color |
| overlay--accent-trans-10 | Overlays | class | Sets overlay on background image to 10% accent color |
| overlay--accent-trans-20 | Overlays | class | Sets overlay on background image to 20% accent color |
| overlay--accent-trans-40 | Overlays | class | Sets overlay on background image to 40% accent color |
| overlay--accent-trans-60 | Overlays | class | Sets overlay on background image to 60% accent color |
| overlay--accent-trans-80 | Overlays | class | Sets overlay on background image to 80% accent color |
| overlay--accent-trans-90 | Overlays | class | Sets overlay on background image to 90% accent color |
| overlay--accent-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark accent color |
| overlay--accent-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark accent color |
| overlay--accent-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark accent color |
| overlay--accent-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark accent color |
| overlay--accent-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark accent color |
| overlay--accent-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark accent color |
| overlay--base-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light base color |
| overlay--base-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light base color |
| overlay--base-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light base color |
| overlay--base-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light base color |
| overlay--base-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light base color |
| overlay--base-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light base color |
| overlay--base-trans-10 | Overlays | class | Sets overlay on background image to 10% base color |
| overlay--base-trans-20 | Overlays | class | Sets overlay on background image to 20% base color |
| overlay--base-trans-40 | Overlays | class | Sets overlay on background image to 40% base color |
| overlay--base-trans-60 | Overlays | class | Sets overlay on background image to 60% base color |
| overlay--base-trans-80 | Overlays | class | Sets overlay on background image to 80% base color |
| overlay--base-trans-90 | Overlays | class | Sets overlay on background image to 90% base color |
| overlay--base-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark base color |
| overlay--base-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark base color |
| overlay--base-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark base color |
| overlay--base-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark base color |
| overlay--base-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark base color |
| overlay--base-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark base color |
| overlay--black-trans-10 | Overlays | class | Sets overlay on background image to 10% black |
| overlay--black-trans-20 | Overlays | class | Sets overlay on background image to 20% black |
| overlay--black-trans-40 | Overlays | class | Sets overlay on background image to 40% black |
| overlay--black-trans-60 | Overlays | class | Sets overlay on background image to 60% black |
| overlay--black-trans-80 | Overlays | class | Sets overlay on background image to 80% black |
| overlay--black-trans-90 | Overlays | class | Sets overlay on background image to 90% black |
| overlay--primary-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light primary color |
| overlay--primary-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light primary color |
| overlay--primary-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light primary color |
| overlay--primary-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light primary color |
| overlay--primary-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light primary color |
| overlay--primary-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light primary color |
| overlay--primary-trans-10 | Overlays | class | Sets overlay on background image to 10% primary color |
| overlay--primary-trans-20 | Overlays | class | Sets overlay on background image to 20% primary color |
| overlay--primary-trans-40 | Overlays | class | Sets overlay on background image to 40% primary color |
| overlay--primary-trans-60 | Overlays | class | Sets overlay on background image to 60% primary color |
| overlay--primary-trans-80 | Overlays | class | Sets overlay on background image to 80% primary color |
| overlay--primary-trans-90 | Overlays | class | Sets overlay on background image to 90% primary color |
| overlay--primary-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark primary color |
| overlay--primary-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark primary color |
| overlay--primary-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark primary color |
| overlay--primary-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark primary color |
| overlay--primary-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark primary color |
| overlay--primary-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark primary color |
| overlay--secondary-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light secondary color |
| overlay--secondary-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light secondary color |
| overlay--secondary-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light secondary color |
| overlay--secondary-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light secondary color |
| overlay--secondary-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light secondary color |
| overlay--secondary-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light secondary color |
| overlay--secondary-trans-10 | Overlays | class | Sets overlay on background image to 10% secondary color |
| overlay--secondary-trans-20 | Overlays | class | Sets overlay on background image to 20% secondary color |
| overlay--secondary-trans-40 | Overlays | class | Sets overlay on background image to 40% secondary color |
| overlay--secondary-trans-60 | Overlays | class | Sets overlay on background image to 60% secondary color |
| overlay--secondary-trans-80 | Overlays | class | Sets overlay on background image to 80% secondary color |
| overlay--secondary-trans-90 | Overlays | class | Sets overlay on background image to 90% secondary color |
| overlay--secondary-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark secondary color |
| owl--l | Owl Spacing | class | Creates a large vertical gap between all items in a container. |
| owl--m | Owl Spacing | class | Creates a medium vertical gap between all items in a container. |
| owl--s | Owl Spacing | class | Creates a small vertical gap between all items in a container. |
| owl--xl | Owl Spacing | class | Creates a x-large vertical gap between all items in a container. |
| owl--xs | Owl Spacing | class | Creates a x-small vertical gap between all items in a container. |
| owl--xxl | Owl Spacing | class | Creates an xx-large vertical gap between all items in a container. |
| pad--l | Padding | class | Sets padding to large on all sides. |
| pad--m | Padding | class | Sets padding to medium on all sides. |
| pad--none | Padding, Padding--Sections | class | Sets padding to zero on all sides with !important to ensure padding removal. |
| pad--s | Padding | class | Sets padding to small on all sides. |
| pad--xl | Padding | class | Sets padding to x-large on all sides. |
| pad--xs | Padding | class | Sets padding to x-small on all sides. |
| pad--xxl | Padding | class | Sets padding to xx-large on all sides. |
| pad-header--l | Padding--Header | class | Sets top and bottom padding on header rows to large. |
| pad-header--m | Padding--Header | class | Sets top and bottom padding on header rows to medium. |
| pad-header--s | Padding--Header | class | Sets top and bottom padding on header rows to small. |
| pad-header--xl | Padding--Header | class | Sets top and bottom padding on header rows to x-large. |
| pad-header--xs | Padding--Header | class | Sets top and bottom padding on header rows to x-small. |
| pad-header--xxl | Padding--Header | class | Sets top and bottom padding on header rows to xx-large. |
| pad-section--l | Padding--Sections | class | Sets top and bottom section padding to large |
| pad-section--none | Padding--Sections | class | Sets top and bottom section padding to 0. |
| pad-section--s | Padding--Sections | class | Sets top and bottom section padding to small |
| pad-section--xl | Padding--Sections | class | Sets top and bottom section padding to x-large |
| pad-section--xs | Padding--Sections | class | Sets top and bottom section padding to x-small |
| pad-section--xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large |
| pad-section--xl-l | Padding--Sections | class | Sets top and bottom section padding to large at XL breakpoint |
| pad-section--xl-none | Padding--Sections | class | Sets top and bottom section padding to 0 at XL breakpoint |
| pad-section--xl-s | Padding--Sections | class | Sets top and bottom section padding to small at XL breakpoint |
| pad-section--xl-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at XL breakpoint |
| pad-section--xl-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at XL breakpoint |
| pad-section--xl-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at XL breakpoint |
| pad-section--l-l | Padding--Sections | class | Sets top and bottom section padding to large at L breakpoint |
| pad-section--l-none | Padding--Sections | class | Sets top and bottom section padding to 0 at L breakpoint |
| pad-section--l-s | Padding--Sections | class | Sets top and bottom section padding to small at L breakpoint |
| pad-section--l-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at L breakpoint |
| pad-section--l-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at L breakpoint |
| pad-section--l-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at L breakpoint |
| pad-section--m-l | Padding--Sections | class | Sets top and bottom section padding to large at M breakpoint |
| pad-section--m-none | Padding--Sections | class | Sets top and bottom section padding to 0 at M breakpoint |
| pad-section--m-s | Padding--Sections | class | Sets top and bottom section padding to small at M breakpoint |
| pad-section--m-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at M breakpoint |
| pad-section--m-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at M breakpoint |
| pad-section--m-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at M breakpoint |
| pad-section--s-l | Padding--Sections | class | Sets top and bottom section padding to large at S breakpoint |
| pad-section--s-none | Padding--Sections | class | Sets top and bottom section padding to 0 at S breakpoint |
| pad-section--s-s | Padding--Sections | class | Sets top and bottom section padding to small at S breakpoint |
| pad-section--s-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at S breakpoint |
| pad-section--s-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at S breakpoint |
| pad-section--s-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at S breakpoint |
| rounded--50 | Border Radius | class | Sets border radius to 50%. |
| rounded--circle | Border Radius | class | Sets border radius to 50% (deprecated) |
| rounded--l | Border Radius | class | Sets border radius to L radius (based on radius scale) |
| rounded--m | Border Radius | class | Sets border radius to default radius. |
| rounded--s | Border Radius | class | Sets border radius to S radius (based on radius scale) |
| rounded--xl | Border Radius | class | Sets border radius to XL radius (based on radius scale) |
| rounded--xs | Border Radius | class | Sets border radius to XS radius (based on radius scale) |
| rounded--xxl | Border Radius | class | Sets border radius to XXL radius (based on radius scale) |
| row-span--2 | Grid Spans | class | Spans the grid cell 2 rows. |
| row-span--3 | Grid Spans | class | Spans the grid cell 3 rows. |
| row-span--4 | Grid Spans | class | Spans the grid cell 4 rows. |
| row-span--5 | Grid Spans | class | Spans the grid cell 5 rows. |
| row-span--6 | Grid Spans | class | Spans the grid cell 6 rows. |
| row-span--l-1 | Grid Spans | class | Spans the grid cell 1 row at L breakpoint. |
| row-span--l-2 | Grid Spans | class | Spans the grid cell 2 rows at L breakpoint. |
| row-span--l-3 | Grid Spans | class | Spans the grid cell 3 rows at L breakpoint. |
| row-span--l-4 | Grid Spans | class | Spans the grid cell 4 rows at L breakpoint. |
| row-span--l-5 | Grid Spans | class | Spans the grid cell 5 rows at L breakpoint. |
| row-span--l-6 | Grid Spans | class | Spans the grid cell 6 rows at L breakpoint. |
| row-span--m-1 | Grid Spans | class | Spans the grid cell 1 row at M breakpoint. |
| row-span--m-2 | Grid Spans | class | Spans the grid cell 2 rows at M breakpoint. |
| row-span--m-3 | Grid Spans | class | Spans the grid cell 3 rows at M breakpoint. |
| row-span--m-4 | Grid Spans | class | Spans the grid cell 4 rows at M breakpoint. |
| row-span--m-5 | Grid Spans | class | Spans the grid cell 5 rows at M breakpoint. |
| row-span--m-6 | Grid Spans | class | Spans the grid cell 6 rows at M breakpoint. |
| row-span--s-1 | Grid Spans | class | Spans the grid cell 1 row at S breakpoint. |
| row-span--s-2 | Grid Spans | class | Spans the grid cell 2 rows at S breakpoint. |
| row-span--s-3 | Grid Spans | class | Spans the grid cell 3 rows at S breakpoint. |
| row-span--s-4 | Grid Spans | class | Spans the grid cell 4 rows at S breakpoint. |
| row-span--s-5 | Grid Spans | class | Spans the grid cell 5 rows at S breakpoint. |
| row-span--s-6 | Grid Spans | class | Spans the grid cell 6 rows at S breakpoint. |
| row-span--xl-1 | Grid Spans | class | Spans the grid cell 1 row at XL breakpoint. |
| row-span--xl-2 | Grid Spans | class | Spans the grid cell 2 rows at XL breakpoint. |
| row-span--xl-3 | Grid Spans | class | Spans the grid cell 3 rows at XL breakpoint. |
| row-span--xl-4 | Grid Spans | class | Spans the grid cell 4 rows at XL breakpoint. |
| row-span--xl-5 | Grid Spans | class | Spans the grid cell 5 rows at XL breakpoint. |
| row-span--xl-6 | Grid Spans | class | Spans the grid cell 6 rows at XL breakpoint. |
| row-start--1 | Grid Order | class | Sets grid cell start to 1 |
| row-start--2 | Grid Order | class | Sets grid cell start to 2 |
| row-start--3 | Grid Order | class | Sets grid cell start to 3 |
| row-start--4 | Grid Order | class | Sets grid cell start to 4 |
| row-start--5 | Grid Order | class | Sets grid cell start to 5 |
| row-start--6 | Grid Order | class | Sets grid cell start to 6 |
| row-start--l-1 | Grid Order | class | Sets grid cell start to 1 at L breakpoint |
| row-start--l-2 | Grid Order | class | Sets grid cell start to 2 at L breakpoint |
| row-start--l-3 | Grid Order | class | Sets grid cell start to 3 at L breakpoint |
| row-start--l-4 | Grid Order | class | Sets grid cell start to 4 at L breakpoint |
| row-start--l-5 | Grid Order | class | Sets grid cell start to 5 at L breakpoint |
| row-start--l-6 | Grid Order | class | Sets grid cell start to 6 at L breakpoint |
| row-start--m-1 | Grid Order | class | Sets grid cell start to 1 at M breakpoint |
| row-start--m-2 | Grid Order | class | Sets grid cell start to 2 at M breakpoint |
| row-start--m-3 | Grid Order | class | Sets grid cell start to 3 at M breakpoint |
| row-start--m-4 | Grid Order | class | Sets grid cell start to 4 at M breakpoint |
| row-start--m-5 | Grid Order | class | Sets grid cell start to 5 at M breakpoint |
| row-start--m-6 | Grid Order | class | Sets grid cell start to 6 at M breakpoint |
| row-start--s-1 | Grid Order | class | Sets grid cell start to 1 at S breakpoint |
| row-start--s-2 | Grid Order | class | Sets grid cell start to 2 at S breakpoint |
| row-start--s-3 | Grid Order | class | Sets grid cell start to 3 at S breakpoint |
| row-start--s-4 | Grid Order | class | Sets grid cell start to 4 at S breakpoint |
| row-start--s-5 | Grid Order | class | Sets grid cell start to 5 at S breakpoint |
| row-start--s-6 | Grid Order | class | Sets grid cell start to 6 at S breakpoint |
| row-start--xl-1 | Grid Order | class | Sets grid cell start to 1 at XL breakpoint |
| row-start--xl-2 | Grid Order | class | Sets grid cell start to 2 at XL breakpoint |
| row-start--xl-3 | Grid Order | class | Sets grid cell start to 3 at XL breakpoint |
| row-start--xl-4 | Grid Order | class | Sets grid cell start to 4 at XL breakpoint |
| row-start--xl-5 | Grid Order | class | Sets grid cell start to 5 at XL breakpoint |
| row-start--xl-6 | Grid Order | class | Sets grid cell start to 6 at XL breakpoint |
| self--center | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to center. |
| self--end | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to flex-end. |
| self--start | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to flex-start. |
| self--stretch | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to stretch. |
| sticky | Sticky | class | Makes an element sticky. |
| sticky-top--l | Sticky | class | Positions sticky element 10% from viewport top. |
| sticky-top--m | Sticky | class | Positions sticky element 5% from viewport top. |
| sticky-top--s | Sticky | class | Positions sticky element 2% from viewport top. |
| stretch | Flex & Grid Alignment | class | Sets container to flex and stretch. |
| text--100 | Text Weights | class | Sets font-weight to 100. |
| text--200 | Text Weights | class | Sets font-weight to 200. |
| text--300 | Text Weights | class | Sets font-weight to 300. |
| text--400 | Text Weights | class | Sets font-weight to 400. |
| text--500 | Text Weights | class | Sets font-weight to 500. |
| text--600 | Text Weights | class | Sets font-weight to 600. |
| text--700 | Text Weights | class | Sets font-weight to 700. |
| text--800 | Text Weights | class | Sets font-weight to 800. |
| text--900 | Text Weights | class | Sets font-weight to 900. |
| text--accent | Text Color | class | Sets accent color as text color. |
| text--accent-comp | Text Color | class | Sets accent's complimentary color as text color. |
| text--accent-dark | Text Color | class | Sets accent dark shade as text color. |
| text--accent-light | Text Color | class | Sets accent light shade as text color. |
| text--accent-medium | Text Color | class | Sets accent medium shade as text color. |
| text--accent-ultra-dark | Text Color | class | Sets accent ultra dark shade as text color. |
| text--accent-ultra-light | Text Color | class | Sets accent ultra light shade as text color. |
| text--base | Text Color | class | Sets base color as text color. |
| text--base-comp | Text Color | class | Sets base's complimentary color as text color. |
| text--base-dark | Text Color | class | Sets base dark shade as text color. |
| text--base-light | Text Color | class | Sets base light shade as text color. |
| text--base-medium | Text Color | class | Sets base medium shade as text color. |
| text--base-ultra-dark | Text Color | class | Sets base ultra dark shade as text color. |
| text--base-ultra-light | Text Color | class | Sets base ultra light shade as text color. |
| text--black | Text Color | class | Sets black as text color. |
| text--bold | Text Styles | class | Sets font-style to bold. |
| text--capitalize | Text Transforms | class | Sets text-transform to capitalize. |
| text--center | Text Alignments | class | Sets text-align to center. |
| text--decoration-none | Text Decorations | class | Sets text-decoration to none. |
| text--italic | Text Styles | class | Sets font-style to italic. |
| text--justify | Text Alignments | class | Sets text-align to justify. |
| text--l | Text Size | class | Sets font size to large. |
| text--larger | Text Size | class | Multiples the current text size by "Text Size Multiplier" |
| text--left | Text Alignments | class | Sets text-align to left. |
| text--line-through | Text Decorations | class | Sets text-decoration to line-through. |
| text--lowercase | Text Transforms | class | Sets text-transform to lowercase. |
| text--m | Text Size | class | Sets font size to medium. |
| text--oblique | Text Styles | class | Sets font-style to oblique. |
| text--overline | Text Decorations | class | Sets text-decoration to overline. |
| text--primary | Text Color | class | Sets primary color as text color. |
| text--primary-comp | Text Color | class | Sets primary's complimentary color as text color. |
| text--primary-dark | Text Color | class | Sets primary dark shade as text color. |
| text--primary-light | Text Color | class | Sets primary light shade as text color. |
| text--primary-medium | Text Color | class | Sets primary medium shade as text color. |
| text--primary-ultra-dark | Text Color | class | Sets primary ultra dark shade as text color. |
| text--primary-ultra-light | Text Color | class | Sets primary ultra light shade as text color. |
| text--right | Text Alignments | class | Sets text-align to right. |
| text--s | Text Size | class | Sets font size to small. |
| text--secondary | Text Color | class | Sets secondary color as text color. |
| text--secondary-comp | Text Color | class | Sets secondary's complimentary color as text color. |
| text--secondary-dark | Text Color | class | Sets secondary dark shade as text color. |
| text--secondary-light | Text Color | class | Sets secondary light shade as text color. |
| text--secondary-medium | Text Color | class | Sets secondary medium shade as text color. |
| text--secondary-ultra-dark | Text Color | class | Sets secondary ultra dark shade as text color. |
| text--secondary-ultra-light | Text Color | class | Sets secondary ultra light shade as text color. |
| text--shade-dark | Text Color | class | Sets shade dark as text color. |
| text--shade-light | Text Color | class | Sets shade light as text color. |
| text--shade-medium | Text Color | class | Sets shade medium as text color. |
| text--shade-ultra-dark | Text Color | class | Sets shade ultra dark as text color. |
| text--shade-ultra-light | Text Color | class | Sets shade ultra light as text color. |
| text--transform-none | Text Transforms | class | Sets text-transform to none. |
| text--underline | Text Decorations | class | Sets text-decoration to underline. |
| text--underline-dashed | Text Decorations | class | Sets text-decoration to underline dashed. |
| text--underline-dotted | Text Decorations | class | Sets text-decoration to underline dotted. |
| text--underline-double | Text Decorations | class | Sets text-decoration to underline double. |
| text--underline-wavy | Text Decorations | class | Sets text-decoration to underline wavy. |
| text--uppercase | Text Transforms | class | Sets text-transform to uppercase. |
| text--white | Text Color | class | Sets text color to white. |
| text--xl | Text Size | class | Sets font-size to x-large. |
| text--xs | Text Size | class | Sets font-size to x-small. |
| text--xxl | Text Size | class | Sets font-size to xx-large. |
| var(--accent-comp) | Colors | variable | References the accent complimentary color. |
| var(--accent-dark) | Colors | variable | References the accent dark shade. |
| var(--accent-hover) | Colors | variable | References the accent hover color. |
| var(--accent-light-trans-10) | Colors | variable | References the accent light shade at 10% opacity. |
| var(--accent-light-trans-20) | Colors | variable | References the accent light shade at 20% opacity. |
| var(--accent-light-trans-40) | Colors | variable | References the accent light shade at 40% opacity. |
| var(--accent-light-trans-60) | Colors | variable | References the accent light shade at 60% opacity. |
| var(--accent-light-trans-80) | Colors | variable | References the accent light shade at 80% opacity. |
| var(--accent-light-trans-90) | Colors | variable | References the accent light shade at 90% opacity. |
| var(--accent-light) | Colors | variable | References the accent light shade. |
| var(--accent-medium) | Colors | variable | References the accent medium shade. |
| var(--accent-trans-10) | Colors | variable | References the accent color at 10% opacity. |
| var(--accent-trans-20) | Colors | variable | References the accent color at 20% opacity. |
| var(--accent-trans-40) | Colors | variable | References the accent color at 40% opacity. |
| var(--accent-trans-60) | Colors | variable | References the accent color at 60% opacity. |
| var(--accent-trans-80) | Colors | variable | References the accent color at 80% opacity. |
| var(--accent-trans-90) | Colors | variable | References the accent color at 90% opacity. |
| var(--accent-ultra-dark-trans-10) | Colors | variable | References the accent ultra dark shade at 10% opacity. |
| var(--accent-ultra-dark-trans-20) | Colors | variable | References the accent ultra dark shade at 20% opacity. |
| var(--accent-ultra-dark-trans-40) | Colors | variable | References the accent ultra dark shade at 40% opacity. |
| var(--accent-ultra-dark-trans-60) | Colors | variable | References the accent ultra dark shade at 60% opacity. |
| var(--accent-ultra-dark-trans-80) | Colors | variable | References the accent ultra dark shade at 80% opacity. |
| var(--accent-ultra-dark-trans-90) | Colors | variable | References the accent ultra dark shade at 90% opacity. |
| var(--accent-ultra-dark) | Colors | variable | References the accent ultra dark shade. |
| var(--accent-ultra-light) | Colors | variable | References the accent ultra light shade. |
| var(--accent) | Colors | variable | References the accent color. |
| var(--base-comp) | Colors | variable | References the base complimentary color. |
| var(--base-dark) | Colors | variable | References the base dark shade. |
| var(--base-hover) | Colors | variable | References the base hover color. |
| var(--base-light-trans-10) | Colors | variable | References the base light shade at 10% opacity. |
| var(--base-light-trans-20) | Colors | variable | References the base light shade at 20% opacity. |
| var(--base-light-trans-40) | Colors | variable | References the base light shade at 40% opacity. |
| var(--base-light-trans-60) | Colors | variable | References the base light shade at 60% opacity. |
| var(--base-light-trans-80) | Colors | variable | References the base light shade at 80% opacity. |
| var(--base-light-trans-90) | Colors | variable | References the base light shade at 90% opacity. |
| var(--base-light) | Colors | variable | References the base light shade. |
| var(--base-medium) | Colors | variable | References the base medium shade. |
| var(--base-trans-10) | Colors | variable | References the base color at 10% opacity. |
| var(--base-trans-20) | Colors | variable | References the base color at 20% opacity. |
| var(--base-trans-40) | Colors | variable | References the base color at 40% opacity. |
| var(--base-trans-60) | Colors | variable | References the base color at 60% opacity. |
| var(--base-trans-80) | Colors | variable | References the base color at 80% opacity. |
| var(--base-trans-90) | Colors | variable | References the base color at 90% opacity. |
| var(--base-ultra-dark-trans-10) | Colors | variable | References the base ultra dark shade at 10% opacity. |
| var(--base-ultra-dark-trans-20) | Colors | variable | References the base ultra dark shade at 20% opacity. |
| var(--base-ultra-dark-trans-40) | Colors | variable | References the base ultra dark shade at 40% opacity. |
| var(--base-ultra-dark-trans-60) | Colors | variable | References the base ultra dark shade at 60% opacity. |
| var(--base-ultra-dark-trans-80) | Colors | variable | References the base ultra dark shade at 80% opacity. |
| var(--base-ultra-dark-trans-90) | Colors | variable | References the base ultra dark shade at 90% opacity. |
| var(--base-ultra-dark) | Colors | variable | References the base ultra dark shade. |
| var(--base-ultra-light) | Colors | variable | References the base ultra light shade. |
| var(--base) | Colors | variable | References the base color. |
| var(--black-trans-10) | Colors | variable | References black at 10% opacity. |
| var(--black-trans-20) | Colors | variable | References black at 20% opacity. |
| var(--black-trans-40) | Colors | variable | References black at 40% opacity. |
| var(--black-trans-60) | Colors | variable | References black at 60% opacity. |
| var(--black-trans-80) | Colors | variable | References black at 80% opacity. |
| var(--black-trans-90) | Colors | variable | References black at 90% opacity. |
| var(--btn-border-size) | Buttons | variable | Applies your site's default button border width. |
| var(--btn-pad-x) | Buttons | variable | Applies your site's default left/right padding for buttons. |
| var(--btn-pad-y) | Buttons | variable | Applies your site's default top/bottom padding for buttons. |
| var(--btn-radius) | Buttons | variable | Applies your site's default button border radius. |
| var(--outline-btn-border-size) | Buttons | variable | Applies your site's default oultline button border width. |
| var(--primary-comp) | Colors | variable | References the primary complimentary color. |
| var(--primary-dark) | Colors | variable | References the primary dark shade. |
| var(--primary-hover) | Colors | variable | References the primary hover color. |
| var(--primary-light-trans-10) | Colors | variable | References the primary light shade at 10% opacity. |
| var(--primary-light-trans-20) | Colors | variable | References the primary light shade at 20% opacity. |
| var(--primary-light-trans-40) | Colors | variable | References the primary light shade at 40% opacity. |
| var(--primary-light-trans-60) | Colors | variable | References the primary light shade at 60% opacity. |
| var(--primary-light-trans-80) | Colors | variable | References the primary light shade at 80% opacity. |
| var(--primary-light-trans-90) | Colors | variable | References the primary light shade at 90% opacity. |
| var(--primary-light) | Colors | variable | References the primary light shade. |
| var(--primary-medium) | Colors | variable | References the primary medium shade. |
| var(--primary-trans-10) | Colors | variable | References the primary color at 10% opacity. |
| var(--primary-trans-20) | Colors | variable | References the primary color at 20% opacity. |
| var(--primary-trans-40) | Colors | variable | References the primary color at 40% opacity. |
| var(--primary-trans-60) | Colors | variable | References the primary color at 60% opacity. |
| var(--primary-trans-80) | Colors | variable | References the primary color at 80% opacity. |
| var(--primary-trans-90) | Colors | variable | References the primary color at 90% opacity. |
| var(--primary-ultra-dark-trans-10) | Colors | variable | References the primary ultra dark shade at 10% opacity. |
| var(--primary-ultra-dark-trans-20) | Colors | variable | References the primary ultra dark shade at 20% opacity. |
| var(--primary-ultra-dark-trans-40) | Colors | variable | References the primary ultra dark shade at 40% opacity. |
| var(--primary-ultra-dark-trans-60) | Colors | variable | References the primary ultra dark shade at 60% opacity. |
| var(--primary-ultra-dark-trans-80) | Colors | variable | References the primary ultra dark shade at 80% opacity. |
| var(--primary-ultra-dark-trans-90) | Colors | variable | References the primary ultra dark shade at 90% opacity. |
| var(--primary-ultra-dark) | Colors | variable | References the primary ultra dark shade. |
| var(--primary-ultra-light) | Colors | variable | References the primary ultra light shade. |
| var(--primary) | Colors | variable | References the primary color. |
| var(--radius-50) | Border Radius | variable | Sets border radius to 50%. |
| var(--radius-l) | Border Radius | variable | Sets border radius to large. |
| var(--radius-m) | Border Radius | variable | Sets border radius to medium. |
| var(--radius-s) | Border Radius | variable | Sets border radius to small. |
| var(--radius-xl) | Border Radius | variable | Sets border radius to x-large. |
| var(--radius-xs) | Border Radius | variable | Sets border radius to x-small. |
| var(--radius-xxl) | Border Radius | variable | Sets border radius to xx-large. |
| var(--secondary-comp) | Colors | variable | References the secondary complimentary color. |
| var(--secondary-dark) | Colors | variable | References the secondary dark shade. |
| var(--secondary-hover) | Colors | variable | References the secondary hover color. |
| var(--secondary-light-trans-10) | Colors | variable | References the secondary light shade at 10% opacity. |
| var(--secondary-light-trans-20) | Colors | variable | References the secondary light shade at 20% opacity. |
| var(--secondary-light-trans-40) | Colors | variable | References the secondary light shade at 40% opacity. |
| var(--secondary-light-trans-60) | Colors | variable | References the secondary light shade at 60% opacity. |
| var(--secondary-light-trans-80) | Colors | variable | References the secondary light shade at 80% opacity. |
| var(--secondary-light-trans-90) | Colors | variable | References the secondary light shade at 90% opacity. |
| var(--secondary-light) | Colors | variable | References the secondary light shade. |
| var(--secondary-medium) | Colors | variable | References the secondary medium shade. |
| var(--secondary-trans-10) | Colors | variable | References the secondary color at 10% opacity. |
| var(--secondary-trans-20) | Colors | variable | References the secondary color at 20% opacity. |
| var(--secondary-trans-40) | Colors | variable | References the secondary color at 40% opacity. |
| var(--secondary-trans-60) | Colors | variable | References the secondary color at 60% opacity. |
| var(--secondary-trans-80) | Colors | variable | References the secondary color at 80% opacity. |
| var(--secondary-trans-90) | Colors | variable | References the secondary color at 90% opacity. |
| var(--secondary-ultra-dark-trans-10) | Colors | variable | References the secondary ultra dark shade at 10% opacity. |
| var(--secondary-ultra-dark-trans-20) | Colors | variable | References the secondary ultra dark shade at 20% opacity. |
| var(--secondary-ultra-dark-trans-40) | Colors | variable | References the secondary ultra dark shade at 40% opacity. |
| var(--secondary-ultra-dark-trans-60) | Colors | variable | References the secondary ultra dark shade at 60% opacity. |
| var(--secondary-ultra-dark-trans-80) | Colors | variable | References the secondary ultra dark shade at 80% opacity. |
| var(--secondary-ultra-dark-trans-90) | Colors | variable | References the secondary ultra dark shade at 90% opacity. |
| var(--secondary-ultra-dark) | Colors | variable | References the secondary ultra dark shade. |
| var(--secondary-ultra-light) | Colors | variable | References the secondary ultra light shade. |
| var(--secondary) | Colors | variable | References the secondary color. |
| var(--section-padding-x) | Padding--Sections, Padding--Header | variable | Applies your site's left/right section/header padding when writing custom CSS. |
| var(--shade) | Colors | variable | References the shade color. |
| var(--shade-dark) | Colors | variable | References the shade dark shade. |
| var(--shade-light-trans-10) | Colors | variable | References the shade light shade at 10% opacity. |
| var(--shade-light-trans-20) | Colors | variable | References the shade light shade at 20% opacity. |
| var(--shade-light-trans-40) | Colors | variable | References the shade light shade at 40% opacity. |
| var(--shade-light-trans-60) | Colors | variable | References the shade light shade at 60% opacity. |
| var(--shade-light-trans-80) | Colors | variable | References the shade light shade at 80% opacity. |
| var(--shade-light-trans-90) | Colors | variable | References the shade light shade at 90% opacity. |
| var(--shade-light) | Colors | variable | References the shade light shade. |
| var(--shade-medium) | Colors | variable | References the shade medium shade. |
| var(--shade-ultra-dark-trans-10) | Colors | variable | References the shade ultra dark shade at 10% opacity. |
| var(--shade-ultra-dark-trans-20) | Colors | variable | References the shade ultra dark shade at 20% opacity. |
| var(--shade-ultra-dark-trans-40) | Colors | variable | References the shade ultra dark shade at 40% opacity. |
| var(--shade-ultra-dark-trans-60) | Colors | variable | References the shade ultra dark shade at 60% opacity. |
| var(--shade-ultra-dark-trans-80) | Colors | variable | References the shade ultra dark shade at 80% opacity. |
| var(--shade-ultra-dark-trans-90) | Colors | variable | References the shade ultra dark shade at 90% opacity. |
| var(--shade-ultra-dark) | Colors | variable | References the shade ultra dark shade. |
| var(--shade-ultra-light) | Colors | variable | References the shade ultra light shade. |
| var(--space-l) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to large. |
| var(--space-m) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to medium. |
| var(--space-s) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to small. |
| var(--space-xl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-large. |
| var(--space-xs) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-small. |
| var(--space-xxl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to xx-large. |
| var(--section-space-l) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to large with section multiplier |
| var(--section-space-m) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to medium with section multiplier |
| var(--section-space-s) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to small with section multiplier |
| var(--section-space-xl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-large with section multiplier |
| var(--section-space-xs) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-small with section multiplier |
| var(--section-space-xxl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to xx-large with section multiplier |
| var(--text-l) | Text Size | variable | Sets font size to large. |
| var(--text-m) | Text Size | variable | Sets font size to medium. |
| var(--text-s) | Text Size | variable | Sets font size to small. |
| var(--text-xl) | Text Size | variable | Sets font size to x-large. |
| var(--text-xs) | Text Size | variable | Sets font size to x-small. |
| var(--text-xxl) | Text Size | variable | Sets font size to xx-large. |
| var(--width-l) | Width | variable | Sets width to large. |
| var(--width-m) | Width | variable | Sets width to medium. |
| var(--width-s) | Width | variable | Sets width to small. |
| var(--width-xl) | Width | variable | Sets width to x-large. |
| var(--width-xs) | Width | variable | Sets width to x-small. |
| var(--width-xxl) | Width | variable | Sets width to xx-large. |
| width--50 | Width | class | Sets max-width to 50% of vp-max. |
| width--auto | Width | class | Sets width to auto. Very useful for grids that shouldn't be 100% width. |
| width--full | Width | class | Sets max-width to 100%. |
| width--l | Width | class | Sets max-width to 60% of vp-max. |
| width--m | Width | class | Sets max-width to 40% of vp-max. |
| width--s | Width | class | Sets max-width to 20% of vp-max. |
| width--vp-max | Width | class | Sets max-width to 100% of vp-max minus left/right default padding. |
| width--xl | Width | class | Sets max-width to 80% of vp-max. |
| width--xs | Width | class | Sets max-width to 10% of vp-max. |
| width--xxl | Width | class | Sets max-width to 90% of vp-max. |
| z--bottom | Z-Index | class | Sets z-index of an element to -1 |
| z--0 | Z-Index | class | Sets z-index of an element to 0 |
| z--10 | Z-Index | class | Sets z-index of an element to 10 |
| z--20 | Z-Index | class | Sets z-index of an element to 20 |
| z--30 | Z-Index | class | Sets z-index of an element to 30 |
| z--40 | Z-Index | class | Sets z-index of an element to 40 |
| z--50 | Z-Index | class | Sets z-index of an element to 50 |
| z--60 | Z-Index | class | Sets z-index of an element to 60 |
| z--70 | Z-Index | class | Sets z-index of an element to 70 |
| z--80 | Z-Index | class | Sets z-index of an element to 80 |
| z--90 | Z-Index | class | Sets z-index of an element to 90 |
| z--top | Z-Index | class | Sets z-index of an element to 9999 |
| z--xl-bottom | Z-Index | class | Sets z-index of an element to -1 at the XL breakpoint |
| z--xl-0 | Z-Index | class | Sets z-index of an element to 0 at the XL breakpoint |
| z--xl-10 | Z-Index | class | Sets z-index of an element to 10 at the XL breakpoint |
| z--xl-20 | Z-Index | class | Sets z-index of an element to 20 at the XL breakpoint |
| z--xl-30 | Z-Index | class | Sets z-index of an element to 30 at the XL breakpoint |
| z--xl-40 | Z-Index | class | Sets z-index of an element to 40 at the XL breakpoint |
| z--xl-50 | Z-Index | class | Sets z-index of an element to 50 at the XL breakpoint |
| z--xl-60 | Z-Index | class | Sets z-index of an element to 60 at the XL breakpoint |
| z--xl-70 | Z-Index | class | Sets z-index of an element to 70 at the XL breakpoint |
| z--xl-80 | Z-Index | class | Sets z-index of an element to 80 at the XL breakpoint |
| z--xl-90 | Z-Index | class | Sets z-index of an element to 90 at the XL breakpoint |
| z--xl-top | Z-Index | class | Sets z-index of an element to 9999 at the XL breakpoint |
| z--l-bottom | Z-Index | class | Sets z-index of an element to -1 at the L breakpoint |
| z--l-0 | Z-Index | class | Sets z-index of an element to 0 at the L breakpoint |
| z--l-10 | Z-Index | class | Sets z-index of an element to 10 at the L breakpoint |
| z--l-20 | Z-Index | class | Sets z-index of an element to 20 at the L breakpoint |
| z--l-30 | Z-Index | class | Sets z-index of an element to 30 at the L breakpoint |
| z--l-40 | Z-Index | class | Sets z-index of an element to 40 at the L breakpoint |
| z--l-50 | Z-Index | class | Sets z-index of an element to 50 at the L breakpoint |
| z--l-60 | Z-Index | class | Sets z-index of an element to 60 at the L breakpoint |
| z--l-70 | Z-Index | class | Sets z-index of an element to 70 at the L breakpoint |
| z--l-80 | Z-Index | class | Sets z-index of an element to 80 at the L breakpoint |
| z--l-90 | Z-Index | class | Sets z-index of an element to 90 at the L breakpoint |
| z--l-top | Z-Index | class | Sets z-index of an element to 9999 at the L breakpoint |
| z--m-bottom | Z-Index | class | Sets z-index of an element to -1 at the M breakpoint |
| z--m-0 | Z-Index | class | Sets z-index of an element to 0 at the M breakpoint |
| z--m-10 | Z-Index | class | Sets z-index of an element to 10 at the M breakpoint |
| z--m-20 | Z-Index | class | Sets z-index of an element to 20 at the M breakpoint |
| z--m-30 | Z-Index | class | Sets z-index of an element to 30 at the M breakpoint |
| z--m-40 | Z-Index | class | Sets z-index of an element to 40 at the M breakpoint |
| z--m-50 | Z-Index | class | Sets z-index of an element to 50 at the M breakpoint |
| z--m-60 | Z-Index | class | Sets z-index of an element to 60 at the M breakpoint |
| z--m-70 | Z-Index | class | Sets z-index of an element to 70 at the M breakpoint |
| z--m-80 | Z-Index | class | Sets z-index of an element to 80 at the M breakpoint |
| z--m-90 | Z-Index | class | Sets z-index of an element to 90 at the M breakpoint |
| z--m-top | Z-Index | class | Sets z-index of an element to 9999 at the M breakpoint |
| z--s-bottom | Z-Index | class | Sets z-index of an element to -1 at the S breakpoint |
| z--s-0 | Z-Index | class | Sets z-index of an element to 0 at the S breakpoint |
| z--s-10 | Z-Index | class | Sets z-index of an element to 10 at the S breakpoint |
| z--s-20 | Z-Index | class | Sets z-index of an element to 20 at the S breakpoint |
| z--s-30 | Z-Index | class | Sets z-index of an element to 30 at the S breakpoint |
| z--s-40 | Z-Index | class | Sets z-index of an element to 40 at the S breakpoint |
| z--s-50 | Z-Index | class | Sets z-index of an element to 50 at the S breakpoint |
| z--s-60 | Z-Index | class | Sets z-index of an element to 60 at the S breakpoint |
| z--s-70 | Z-Index | class | Sets z-index of an element to 70 at the S breakpoint |
| z--s-80 | Z-Index | class | Sets z-index of an element to 80 at the S breakpoint |
| z--s-90 | Z-Index | class | Sets z-index of an element to 90 at the S breakpoint |
| z--s-top | Z-Index | class | Sets z-index of an element to 9999 at the S breakpoint |
| col-count--1 | Columns | class | Sets column count to 1 |
| col-count--2 | Columns | class | Sets column count to 2 |
| col-count--3 | Columns | class | Sets column count to 3 |
| col-count--4 | Columns | class | Sets column count to 4 |
| col-count--5 | Columns | class | Sets column count to 5 |
| col-count--xl-1 | Columns | class | Sets column count to 1 at the XL breakpoint |
| col-count--xl-2 | Columns | class | Sets column count to 2 at the XL breakpoint |
| col-count--xl-3 | Columns | class | Sets column count to 3 at the XL breakpoint |
| col-count--xl-4 | Columns | class | Sets column count to 4 at the XL breakpoint |
| col-count--xl-5 | Columns | class | Sets column count to 5 at the XL breakpoint |
| col-count--l-1 | Columns | class | Sets column count to 1 at the L breakpoint |
| col-count--l-2 | Columns | class | Sets column count to 2 at the L breakpoint |
| col-count--l-3 | Columns | class | Sets column count to 3 at the L breakpoint |
| col-count--l-4 | Columns | class | Sets column count to 4 at the L breakpoint |
| col-count--l-5 | Columns | class | Sets column count to 5 at the L breakpoint |
| col-count--m-1 | Columns | class | Sets column count to 1 at the M breakpoint |
| col-count--m-2 | Columns | class | Sets column count to 2 at the M breakpoint |
| col-count--m-3 | Columns | class | Sets column count to 3 at the M breakpoint |
| col-count--m-4 | Columns | class | Sets column count to 4 at the M breakpoint |
| col-count--m-5 | Columns | class | Sets column count to 5 at the M breakpoint |
| col-count--s-1 | Columns | class | Sets column count to 1 at the S breakpoint |
| col-count--s-2 | Columns | class | Sets column count to 2 at the S breakpoint |
| col-count--s-3 | Columns | class | Sets column count to 3 at the S breakpoint |
| col-count--s-4 | Columns | class | Sets column count to 4 at the S breakpoint |
| col-count--s-5 | Columns | class | Sets column count to 5 at the S breakpoint |
| col-width--s | Columns | class | Sets minimum column width to user-defined small value |
| col-width--m | Columns | class | Sets minimum column width to user-defined medium value |
| col-width--l | Columns | class | Sets minimum column width to user-defined large value |
| col-rule--dotted | Columns | class | Sets column rule style to dotted |
| col-rule--dashed | Columns | class | Sets column rule style to dashed |
| col-rule--solid | Columns | class | Sets column rule style to solid |
| col-rule--double | Columns | class | Sets column rule style to double |
| col-rule--ridge | Columns | class | Sets column rule style to ridge |
| col-rule--inset | Columns | class | Sets column rule style to inset |
| col-rule--groove | Columns | class | Sets column rule style to groove |
| col-rule--outset | Columns | class | Sets column rule style to outset |
| col-rule--s | Columns | class | Sets column rule width to user-defined small value |
| col-rule--m | Columns | class | Sets column rule width to user-defined medium value |
| col-rule--l | Columns | class | Sets column rule width to user-defined large value |
| col-rule--accent | Columns | class | Sets accent color as column rule color. |
| col-rule--accent-dark | Columns | class | Sets accent dark shade as column rule color. |
| col-rule--accent-light | Columns | class | Sets accent light shade as column rule color. |
| col-rule--accent-medium | Columns | class | Sets accent medium shade as column rule color. |
| col-rule--accent-ultra-dark | Columns | class | Sets accent ultra dark shade as column rule color. |
| col-rule--accent-ultra-light | Columns | class | Sets accent ultra light shade as column rule color. |
| col-rule--base | Columns | class | Sets base color as column rule color. |
| col-rule--base-dark | Columns | class | Sets base dark shade as column rule color. |
| col-rule--base-light | Columns | class | Sets base light shade as column rule color. |
| col-rule--base-medium | Columns | class | Sets base medium shade as column rule color. |
| col-rule--base-ultra-dark | Columns | class | Sets base ultra dark shade as column rule color. |
| col-rule--base-ultra-light | Columns | class | Sets base ultra light shade as column rule color. |
| col-rule--black | Columns | class | Sets black as column rule color. |
| col-rule--primary | Columns | class | Sets primary color as column rule color. |
| col-rule--primary-dark | Columns | class | Sets primary dark shade as column rule color. |
| col-rule--primary-light | Columns | class | Sets primary light shade as column rule color. |
| col-rule--primary-medium | Columns | class | Sets primary medium shade as column rule color. |
| col-rule--primary-ultra-dark | Columns | class | Sets primary ultra dark shade as column rule color. |
| col-rule--primary-ultra-light | Columns | class | Sets primary ultra light shade as column rule color. |
| col-rule--secondary | Columns | class | Sets secondary color as column rule color. |
| col-rule--secondary-dark | Columns | class | Sets secondary dark shade as column rule color. |
| col-rule--secondary-light | Columns | class | Sets secondary light shade as column rule color. |
| col-rule--secondary-medium | Columns | class | Sets secondary medium shade as column rule color. |
| col-rule--secondary-ultra-dark | Columns | class | Sets secondary ultra dark shade as column rule color. |
| col-rule--secondary-ultra-light | Columns | class | Sets secondary ultra light shade as column rule color. |
| col-rule--shade-dark | Columns | class | Sets shade dark as column rule color. |
| col-rule--shade-light | Columns | class | Sets shade light as column rule color. |
| col-rule--shade-medium | Columns | class | Sets shade medium as column rule color. |
| col-rule--shade-ultra-dark | Columns | class | Sets shade ultra dark as column rule color. |
| col-rule--shade-ultra-light | Columns | class | Sets shade ultra light as column rule color. |
| col-span--all | Columns | class | Spans an element across all columns. |
| focus--primary | Accessibility | class | Sets the outline color of focusable elements to primary. |
| focus--secondary | Accessibility | class | Sets the outline color of focusable elements to secondary. |
| focus--accent | Accessibility | class | Sets the outline color of focusable elements to accent. |
| focus--base | Accessibility | class | Sets the outline color of focusable elements to base. |
| focus--shade | Accessibility | class | Sets the outline color of focusable elements to shade. |
| focus--black | Accessibility | class | Sets the outline color of focusable elements to black. |
| focus--white | Accessibility | class | Sets the outline color of focusable elements to white. |
| var(--header-height) | Height | variable | References the height of your sticky header. |
| Selector | Category | Type | Description |
|---|---|---|---|
| align-content--baseline | Flex & Grid Alignment | class | Sets flex or grid content to container baseline. |
| align-content--center | Flex & Grid Alignment | class | Sets flex or grid content to container center. |
| align-content--end | Flex & Grid Alignment | class | Sets flex or grid content to container end. |
| align-content--start | Flex & Grid Alignment | class | Sets flex or grid content to container start. |
| align-items--baseline | Flex & Grid Alignment | class | Sets flex or grid items to baseline. |
| align-items--center | Flex & Grid Alignment | class | Sets flex or grid items to container center. |
| align-items--end | Flex & Grid Alignment | class | Sets flex or grid items to container end. |
| align-items--start | Flex & Grid Alignment | class | Sets flex or grid items to container start. |
| aspect--1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 |
| aspect--1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 |
| aspect--16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 |
| aspect--2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 |
| aspect--2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 |
| aspect--3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 |
| aspect--3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 |
| aspect--4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 |
| aspect--9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 |
| aspect--l-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at L breakpoint |
| aspect--l-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at L breakpoint |
| aspect--l-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at L breakpoint |
| aspect--l-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at L breakpoint |
| aspect--l-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at L breakpoint |
| aspect--l-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at L breakpoint |
| aspect--l-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at L breakpoint |
| aspect--l-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at L breakpoint |
| aspect--l-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at L breakpoint |
| aspect--m-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at M breakpoint |
| aspect--m-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at M breakpoint |
| aspect--m-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at M breakpoint |
| aspect--m-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at M breakpoint |
| aspect--m-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at M breakpoint |
| aspect--m-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at M breakpoint |
| aspect--m-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at M breakpoint |
| aspect--m-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at M breakpoint |
| aspect--m-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at M breakpoint |
| aspect--s-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at S breakpoint |
| aspect--s-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at S breakpoint |
| aspect--s-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at S breakpoint |
| aspect--s-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at S breakpoint |
| aspect--s-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at S breakpoint |
| aspect--s-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at S breakpoint |
| aspect--s-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at S breakpoint |
| aspect--s-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at S breakpoint |
| aspect--s-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at S breakpoint |
| aspect--xl-1-1 | Images, Video, Size | class | Changes an elements aspect ratio to 1/1 at XL breakpoint |
| aspect--xl-1-2 | Images, Video, Size | class | Changes an elements aspect ratio to 1/2 at XL breakpoint |
| aspect--xl-16-9 | Images, Video, Size | class | Changes an elements aspect ratio to 16/9 at XL breakpoint |
| aspect--xl-2-1 | Images, Video, Size | class | Changes an elements aspect ratio to 2/1 at XL breakpoint |
| aspect--xl-2-3 | Images, Video, Size | class | Changes an elements aspect ratio to 2/3 at XL breakpoint |
| aspect--xl-3-2 | Images, Video, Size | class | Changes an elements aspect ratio to 3/2 at XL breakpoint |
| aspect--xl-3-4 | Images, Video, Size | class | Changes an elements aspect ratio to 3/4 at XL breakpoint |
| aspect--xl-4-3 | Images, Video, Size | class | Changes an elements aspect ratio to 4/3 at XL breakpoint |
| aspect--xl-9-16 | Images, Video, Size | class | Changes an elements aspect ratio to 9/16 at XL breakpoint |
| bg--accent | Background Colors | class | Sets accent color as background color. |
| bg--accent-comp | Background Colors | class | Sets accent's complimentary color as background color. |
| bg--accent-dark | Background Colors | class | Sets accent dark shade as background color. |
| bg--accent-hover | Background Colors | class | Sets accent hover shade as background color. |
| bg--accent-light | Background Colors | class | Sets accent light shade as background color. |
| bg--accent-light-trans-10 | Background Colors | class | Sets accent light 10% color opacity as background color. |
| bg--accent-light-trans-20 | Background Colors | class | Sets accent light 20% color opacity as background color. |
| bg--accent-light-trans-40 | Background Colors | class | Sets accent light 40% color opacity as background color. |
| bg--accent-light-trans-60 | Background Colors | class | Sets accent light 60% color opacity as background color. |
| bg--accent-light-trans-80 | Background Colors | class | Sets accent light 80% color opacity as background color. |
| bg--accent-light-trans-90 | Background Colors | class | Sets accent light 90% color opacity as background color. |
| bg--accent-medium | Background Colors | class | Sets accent medium shade as background color. |
| bg--accent-trans-10 | Background Colors | class | Sets accent 10% color opacity as background color. |
| bg--accent-trans-20 | Background Colors | class | Sets accent 20% color opacity as background color. |
| bg--accent-trans-40 | Background Colors | class | Sets accent 40% color opacity as background color. |
| bg--accent-trans-60 | Background Colors | class | Sets accent 60% color opacity as background color. |
| bg--accent-trans-80 | Background Colors | class | Sets accent 80% color opacity as background color. |
| bg--accent-trans-90 | Background Colors | class | Sets accent 90% color opacity as background color. |
| bg--accent-ultra-dark | Background Colors | class | Sets accent ultra dark shade as background color. |
| bg--accent-ultra-dark-trans-10 | Background Colors | class | Sets accent ultra dark 10% shade as background color. |
| bg--accent-ultra-dark-trans-20 | Background Colors | class | Sets accent ultra dark 20% shade as background color. |
| bg--accent-ultra-dark-trans-40 | Background Colors | class | Sets accent ultra dark 40% shade as background color. |
| bg--accent-ultra-dark-trans-60 | Background Colors | class | Sets accent ultra dark 60% shade as background color. |
| bg--accent-ultra-dark-trans-80 | Background Colors | class | Sets accent ultra dark 80% shade as background color. |
| bg--accent-ultra-dark-trans-90 | Background Colors | class | Sets accent ultra dark 90% shade as background color. |
| bg--accent-ultra-light | Background Colors | class | Sets accent ultra light shade as background color. |
| bg--base | Background Colors | class | Sets base color as background color. |
| bg--base-comp | Background Colors | class | Sets base's complimentary color as background color. |
| bg--base-dark | Background Colors | class | Sets base dark shade as background color. |
| bg--base-hover | Background Colors | class | Sets base hover shade as background color. |
| bg--base-light | Background Colors | class | Sets base light shade as background color. |
| bg--base-light-trans-10 | Background Colors | class | Sets base light 10% color opacity as background color. |
| bg--base-light-trans-20 | Background Colors | class | Sets base light 20% color opacity as background color. |
| bg--base-light-trans-40 | Background Colors | class | Sets base light 40% color opacity as background color. |
| bg--base-light-trans-60 | Background Colors | class | Sets base light 60% color opacity as background color. |
| bg--base-light-trans-80 | Background Colors | class | Sets base light 80% color opacity as background color. |
| bg--base-light-trans-90 | Background Colors | class | Sets base light 90% color opacity as background color. |
| bg--base-medium | Background Colors | class | Sets base medium shade as background color. |
| bg--base-trans-10 | Background Colors | class | Sets base 10% color opacity as background color. |
| bg--base-trans-20 | Background Colors | class | Sets base 20% color opacity as background color. |
| bg--base-trans-40 | Background Colors | class | Sets base 40% color opacity as background color. |
| bg--base-trans-60 | Background Colors | class | Sets base 60% color opacity as background color. |
| bg--base-trans-80 | Background Colors | class | Sets base 80% color opacity as background color. |
| bg--base-trans-90 | Background Colors | class | Sets base 90% color opacity as background color. |
| bg--base-ultra-dark | Background Colors | class | Sets base ultra dark shade as background color. |
| bg--base-ultra-dark-trans-10 | Background Colors | class | Sets base ultra dark 10% shade as background color. |
| bg--base-ultra-dark-trans-20 | Background Colors | class | Sets base ultra dark 20% shade as background color. |
| bg--base-ultra-dark-trans-40 | Background Colors | class | Sets base ultra dark 40% shade as background color. |
| bg--base-ultra-dark-trans-60 | Background Colors | class | Sets base ultra dark 60% shade as background color. |
| bg--base-ultra-dark-trans-80 | Background Colors | class | Sets base ultra dark 80% shade as background color. |
| bg--base-ultra-dark-trans-90 | Background Colors | class | Sets base ultra dark 90% shade as background color. |
| bg--base-ultra-light | Background Colors | class | Sets base ultra light shade as background color. |
| bg--black | Background Colors | class | Sets black background color. |
| bg--black-trans-10 | Background Colors | class | Sets 10% black background color. |
| bg--black-trans-20 | Background Colors | class | Sets 20% black background color. |
| bg--black-trans-40 | Background Colors | class | Sets 40% black background color. |
| bg--black-trans-60 | Background Colors | class | Sets 60% black background color. |
| bg--black-trans-80 | Background Colors | class | Sets 80% black background color. |
| bg--black-trans-90 | Background Colors | class | Sets 90% black background color. |
| bg--primary | Background Colors | class | Sets primary color as background color. |
| bg--primary-comp | Background Colors | class | Sets primary's complimentary color as background color. |
| bg--primary-dark | Background Colors | class | Sets primary dark shade as background color. |
| bg--primary-hover | Background Colors | class | Sets primary hover shade as background color. |
| bg--primary-light | Background Colors | class | Sets primary light shade as background color. |
| bg--primary-light-trans-10 | Background Colors | class | Sets primary light 10% color opacity as background color. |
| bg--primary-light-trans-20 | Background Colors | class | Sets primary light 20% color opacity as background color. |
| bg--primary-light-trans-40 | Background Colors | class | Sets primary light 40% color opacity as background color. |
| bg--primary-light-trans-60 | Background Colors | class | Sets primary light 60% color opacity as background color. |
| bg--primary-light-trans-80 | Background Colors | class | Sets primary light 80% color opacity as background color. |
| bg--primary-light-trans-90 | Background Colors | class | Sets primary light 90% color opacity as background color. |
| bg--primary-medium | Background Colors | class | Sets primary medium shade as background color. |
| bg--primary-trans-10 | Background Colors | class | Sets primary 10% color opacity as background color. |
| bg--primary-trans-20 | Background Colors | class | Sets primary 20% color opacity as background color. |
| bg--primary-trans-40 | Background Colors | class | Sets primary 40% color opacity as background color. |
| bg--primary-trans-60 | Background Colors | class | Sets primary 60% color opacity as background color. |
| bg--primary-trans-80 | Background Colors | class | Sets primary 80% color opacity as background color. |
| bg--primary-trans-90 | Background Colors | class | Sets primary 90% color opacity as background color. |
| bg--primary-ultra-dark | Background Colors | class | Sets primary ultra dark shade as background color. |
| bg--primary-ultra-dark-trans-10 | Background Colors | class | Sets primary ultra dark 10% shade as background color. |
| bg--primary-ultra-dark-trans-20 | Background Colors | class | Sets primary ultra dark 20% shade as background color. |
| bg--primary-ultra-dark-trans-40 | Background Colors | class | Sets primary ultra dark 40% shade as background color. |
| bg--primary-ultra-dark-trans-60 | Background Colors | class | Sets primary ultra dark 60% shade as background color. |
| bg--primary-ultra-dark-trans-80 | Background Colors | class | Sets primary ultra dark 80% shade as background color. |
| bg--primary-ultra-dark-trans-90 | Background Colors | class | Sets primary ultra dark 90% shade as background color. |
| bg--primary-ultra-light | Background Colors | class | Sets primary ultra light shade as background color. |
| bg--secondary | Background Colors | class | Sets secondary color as background color. |
| bg--secondary-comp | Background Colors | class | Sets secondary's complimentary color as background color. |
| bg--secondary-dark | Background Colors | class | Sets secondary dark shade as background color. |
| bg--secondary-hover | Background Colors | class | Sets secondary hover shade as background color. |
| bg--secondary-light | Background Colors | class | Sets secondary light shade as background color. |
| bg--secondary-light-trans-10 | Background Colors | class | Sets secondary light 10% color opacity as background color. |
| bg--secondary-light-trans-20 | Background Colors | class | Sets secondary light 20% color opacity as background color. |
| bg--secondary-light-trans-40 | Background Colors | class | Sets secondary light 40% color opacity as background color. |
| bg--secondary-light-trans-60 | Background Colors | class | Sets secondary light 60% color opacity as background color. |
| bg--secondary-light-trans-80 | Background Colors | class | Sets secondary light 80% color opacity as background color. |
| bg--secondary-light-trans-90 | Background Colors | class | Sets secondary light 90% color opacity as background color. |
| bg--secondary-medium | Background Colors | class | Sets secondary medium shade as background color. |
| bg--secondary-trans-10 | Background Colors | class | Sets secondary 10% color opacity as background color. |
| bg--secondary-trans-20 | Background Colors | class | Sets secondary 20% color opacity as background color. |
| bg--secondary-trans-40 | Background Colors | class | Sets secondary 40% color opacity as background color. |
| bg--secondary-trans-60 | Background Colors | class | Sets secondary 60% color opacity as background color. |
| bg--secondary-trans-80 | Background Colors | class | Sets secondary 80% color opacity as background color. |
| bg--secondary-trans-90 | Background Colors | class | Sets secondary 90% color opacity as background color. |
| bg--secondary-ultra-dark | Background Colors | class | Sets secondary ultra dark shade as background color. |
| bg--secondary-ultra-dark-trans-10 | Background Colors | class | Sets secondary ultra dark 10% shade as background color. |
| bg--secondary-ultra-dark-trans-20 | Background Colors | class | Sets secondary ultra dark 20% shade as background color. |
| bg--secondary-ultra-dark-trans-40 | Background Colors | class | Sets secondary ultra dark 40% shade as background color. |
| bg--secondary-ultra-dark-trans-60 | Background Colors | class | Sets secondary ultra dark 60% shade as background color. |
| bg--secondary-ultra-dark-trans-80 | Background Colors | class | Sets secondary ultra dark 80% shade as background color. |
| bg--secondary-ultra-dark-trans-90 | Background Colors | class | Sets secondary ultra dark 90% shade as background color. |
| bg--secondary-ultra-light | Background Colors | class | Sets secondary ultra light shade as background color. |
| bg--shade-dark | Background Colors | class | Sets dark shade color as background color. |
| bg--shade-light | Background Colors | class | Sets light shade color as background color. |
| bg--shade-light-trans-10 | Background Colors | class | Sets shade light 10% color opacity as background color. |
| bg--shade-light-trans-20 | Background Colors | class | Sets shade light 20% color opacity as background color. |
| bg--shade-light-trans-40 | Background Colors | class | Sets shade light 40% color opacity as background color. |
| bg--shade-light-trans-60 | Background Colors | class | Sets shade light 60% color opacity as background color. |
| bg--shade-light-trans-80 | Background Colors | class | Sets shade light 80% color opacity as background color. |
| bg--shade-light-trans-90 | Background Colors | class | Sets shade light 90% color opacity as background color. |
| bg--shade-medium | Background Colors | class | Sets medium shade color as background color. |
| bg--shade-trans-10 | Background Colors | class | Sets shade 10% color opacity as background color. |
| bg--shade-trans-20 | Background Colors | class | Sets shade 20% color opacity as background color. |
| bg--shade-trans-40 | Background Colors | class | Sets shade 40% color opacity as background color. |
| bg--shade-trans-60 | Background Colors | class | Sets shade 60% color opacity as background color. |
| bg--shade-trans-80 | Background Colors | class | Sets shade 80% color opacity as background color. |
| bg--shade-trans-90 | Background Colors | class | Sets shade 90% color opacity as background color. |
| bg--shade-ultra-dark | Background Colors | class | Sets ultra dark shade color as background color. |
| bg--shade-ultra-dark-trans-10 | Background Colors | class | Sets ultra dark 10% shade as background color. |
| bg--shade-ultra-dark-trans-20 | Background Colors | class | Sets ultra dark 20% shade as background color. |
| bg--shade-ultra-dark-trans-40 | Background Colors | class | Sets ultra dark 40% shade as background color. |
| bg--shade-ultra-dark-trans-60 | Background Colors | class | Sets ultra dark 60% shade as background color. |
| bg--shade-ultra-dark-trans-80 | Background Colors | class | Sets ultra dark 80% shade as background color. |
| bg--shade-ultra-dark-trans-90 | Background Colors | class | Sets ultra dark 90% shade as background color. |
| bg--shade-ultra-light | Background Colors | class | Sets ultra light shade color as background color. |
| bg--white | Background Colors | class | Sets white background color. |
| bg--white-trans-10 | Background Colors | class | Sets white 10% color opacity as background color. |
| bg--white-trans-20 | Background Colors | class | Sets white 20% color opacity as background color. |
| bg--white-trans-40 | Background Colors | class | Sets white 40% color opacity as background color. |
| bg--white-trans-60 | Background Colors | class | Sets white 60% color opacity as background color. |
| bg--white-trans-80 | Background Colors | class | Sets white 80% color opacity as background color. |
| bg--white-trans-90 | Background Colors | class | Sets white 90% color opacity as background color. |
| box-shadow--l | Box Shadows | class | Sets large multi-layer box shadow. |
| box-shadow--m | Box Shadows | class | Sets medium multi-layer box shadow. |
| box-shadow--xl | Box Shadows | class | Sets x-large multi-layer box shadow. |
| breakout--full | Breakouts | class | Breakout object to full viewport width. |
| breakout--l | Breakouts | class | Breakout object to 80% viewport width. |
| breakout--m | Breakouts | class | Breakout object to 70% viewport width. |
| breakout--s | Breakouts | class | Breakout object to 60% viewport width. |
| breakout--xl | Breakouts | class | Breakout object to 90% viewport width. |
| btn--accent | Buttons | class | Sets button background color to accent. |
| btn--base | Buttons | class | Sets button background color to base. |
| btn--black | Buttons | class | Sets button background color to black. |
| btn--l | Buttons | class | Sets button text size to large. |
| btn--m | Buttons | class | Sets button text size to medium (default). |
| btn--outline | Buttons | class | Changes button style to outline. |
| btn--primary | Buttons | class | Sets button background color to primary. |
| btn--s | Buttons | class | Sets button text size to small. |
| btn--secondary | Buttons | class | Sets button background color to secondary. |
| btn--white | Buttons | class | Sets button background color to white. |
| btn--xl | Buttons | class | Sets button text size to x-large. |
| btn--xs | Buttons | class | Sets button text size to x-small. |
| btn--xxl | Buttons | class | Sets button text size to xx-large. |
| center--all | Centering | class | Centers content along X and Y axis. |
| center--all-l | Centering | class | Centers content along X and Y axis at L breakpoint. |
| center--all-m | Centering | class | Centers content along X and Y axis at M breakpoint. |
| center--all-s | Centering | class | Centers content along X and Y axis at S breakpoint. |
| center--all-xl | Centering | class | Centers content along X and Y axis at XL breakpoint. |
| center--bottom | Centering | class | Horizontally centers content to the bottom. |
| center--bottom-l | Centering | class | Horizontally centers content to the bottom at L breakpoint. |
| center--bottom-m | Centering | class | Horizontally centers content to the bottom at M breakpoint. |
| center--bottom-s | Centering | class | Horizontally centers content to the bottom at S breakpoint. |
| center--bottom-xl | Centering | class | Horizontally centers content to the bottom at XL breakpoint. |
| center--left | Centering | class | Vertically centers content to the left. |
| center--left-l | Centering | class | Vertically centers content to the left at L breakpoint. |
| center--left-m | Centering | class | Vertically centers content to the left at M breakpoint. |
| center--left-s | Centering | class | Vertically centers content to the left at S breakpoint. |
| center--left-xl | Centering | class | Vertically centers content to the left at XL breakpoint. |
| center--right | Centering | class | Vertically centers content to the right. |
| center--right-l | Centering | class | Vertically centers content to the right at L breakpoint. |
| center--right-m | Centering | class | Vertically centers content to the right at M breakpoint. |
| center--right-s | Centering | class | Vertically centers content to the right at S breakpoint. |
| center--right-xl | Centering | class | Vertically centers content to the right at XL breakpoint. |
| center--self | Centering | class | Horizontally centers content using auto margins. |
| center--top | Centering | class | Horizontally centers content to the top. |
| center--top-l | Centering | class | Horizontally centers content to the top at L breakpoint. |
| center--top-m | Centering | class | Horizontally centers content to the top at M breakpoint. |
| center--top-s | Centering | class | Horizontally centers content to the top at S breakpoint. |
| center--top-xl | Centering | class | Horizontally centers content to the top at XL breakpoint. |
| col-span--2 | Grid Spans | class | Spans the grid cell 2 columns. |
| col-span--3 | Grid Spans | class | Spans the grid cell 3 columns. |
| col-span--4 | Grid Spans | class | Spans the grid cell 4 columns. |
| col-span--5 | Grid Spans | class | Spans the grid cell 5 columns. |
| col-span--6 | Grid Spans | class | Spans the grid cell 6 columns. |
| col-span--l-1 | Grid Spans | class | Spans the grid cell 1 column at L breakpoint. |
| col-span--l-2 | Grid Spans | class | Spans the grid cell 2 columns at L breakpoint. |
| col-span--l-3 | Grid Spans | class | Spans the grid cell 3 columns at L breakpoint. |
| col-span--l-4 | Grid Spans | class | Spans the grid cell 4 columns at L breakpoint. |
| col-span--l-5 | Grid Spans | class | Spans the grid cell 5 columns at L breakpoint. |
| col-span--l-6 | Grid Spans | class | Spans the grid cell 6 columns at L breakpoint. |
| col-span--m-1 | Grid Spans | class | Spans the grid cell 1 column at M breakpoint. |
| col-span--m-2 | Grid Spans | class | Spans the grid cell 2 columns at M breakpoint. |
| col-span--m-3 | Grid Spans | class | Spans the grid cell 3 columns at M breakpoint. |
| col-span--m-4 | Grid Spans | class | Spans the grid cell 4 columns at M breakpoint. |
| col-span--m-5 | Grid Spans | class | Spans the grid cell 5 columns at M breakpoint. |
| col-span--m-6 | Grid Spans | class | Spans the grid cell 6 columns at M breakpoint. |
| col-span--s-1 | Grid Spans | class | Spans the grid cell 1 column at S breakpoint. |
| col-span--s-2 | Grid Spans | class | Spans the grid cell 2 columns at S breakpoint. |
| col-span--s-3 | Grid Spans | class | Spans the grid cell 3 columns at S breakpoint. |
| col-span--s-4 | Grid Spans | class | Spans the grid cell 4 columns at S breakpoint. |
| col-span--s-5 | Grid Spans | class | Spans the grid cell 5 columns at S breakpoint. |
| col-span--s-6 | Grid Spans | class | Spans the grid cell 6 columns at S breakpoint. |
| col-span--xl-1 | Grid Spans | class | Spans the grid cell 1 column at XL breakpoint. |
| col-span--xl-2 | Grid Spans | class | Spans the grid cell 2 columns at XL breakpoint. |
| col-span--xl-3 | Grid Spans | class | Spans the grid cell 3 columns at XL breakpoint. |
| col-span--xl-4 | Grid Spans | class | Spans the grid cell 4 columns at XL breakpoint. |
| col-span--xl-5 | Grid Spans | class | Spans the grid cell 5 columns at XL breakpoint. |
| col-span--xl-6 | Grid Spans | class | Spans the grid cell 6 columns at XL breakpoint. |
| col-start--1 | Grid Order | class | Sets grid cell start to 1 |
| col-start--2 | Grid Order | class | Sets grid cell start to 2 |
| col-start--3 | Grid Order | class | Sets grid cell start to 3 |
| col-start--4 | Grid Order | class | Sets grid cell start to 4 |
| col-start--5 | Grid Order | class | Sets grid cell start to 5 |
| col-start--6 | Grid Order | class | Sets grid cell start to 6 |
| col-start--l-1 | Grid Order | class | Sets grid cell start to 1 at L breakpoint |
| col-start--l-2 | Grid Order | class | Sets grid cell start to 2 at L breakpoint |
| col-start--l-3 | Grid Order | class | Sets grid cell start to 3 at L breakpoint |
| col-start--l-4 | Grid Order | class | Sets grid cell start to 4 at L breakpoint |
| col-start--l-5 | Grid Order | class | Sets grid cell start to 5 at L breakpoint |
| col-start--l-6 | Grid Order | class | Sets grid cell start to 6 at L breakpoint |
| col-start--m-1 | Grid Order | class | Sets grid cell start to 1 at M breakpoint |
| col-start--m-2 | Grid Order | class | Sets grid cell start to 2 at M breakpoint |
| col-start--m-3 | Grid Order | class | Sets grid cell start to 3 at M breakpoint |
| col-start--m-4 | Grid Order | class | Sets grid cell start to 4 at M breakpoint |
| col-start--m-5 | Grid Order | class | Sets grid cell start to 5 at M breakpoint |
| col-start--m-6 | Grid Order | class | Sets grid cell start to 6 at M breakpoint |
| col-start--s-1 | Grid Order | class | Sets grid cell start to 1 at S breakpoint |
| col-start--s-2 | Grid Order | class | Sets grid cell start to 2 at S breakpoint |
| col-start--s-3 | Grid Order | class | Sets grid cell start to 3 at S breakpoint |
| col-start--s-4 | Grid Order | class | Sets grid cell start to 4 at S breakpoint |
| col-start--s-5 | Grid Order | class | Sets grid cell start to 5 at S breakpoint |
| col-start--s-6 | Grid Order | class | Sets grid cell start to 6 at S breakpoint |
| col-start--xl-1 | Grid Order | class | Sets grid cell start to 1 at XL breakpoint |
| col-start--xl-2 | Grid Order | class | Sets grid cell start to 2 at XL breakpoint |
| col-start--xl-3 | Grid Order | class | Sets grid cell start to 3 at XL breakpoint |
| col-start--xl-4 | Grid Order | class | Sets grid cell start to 4 at XL breakpoint |
| col-start--xl-5 | Grid Order | class | Sets grid cell start to 5 at XL breakpoint |
| col-start--xl-6 | Grid Order | class | Sets grid cell start to 6 at XL breakpoint |
| flex--col | Flexbox | class | Sets flex direction to column. |
| flex--col-l | Flexbox | class | Sets flex direction to column at L breakpoint. |
| flex--col-m | Flexbox | class | Sets flex direction to column at M breakpoint. |
| flex--col-reverse | Flexbox | class | Reverses column direction. |
| flex--col-reverse-l | Flexbox | class | Reverses column direction at L breakpont. |
| flex--col-reverse-m | Flexbox | class | Reverses column direction at M breakpont. |
| flex--col-reverse-s | Flexbox | class | Reverses column direction at S breakpont. |
| flex--col-reverse-xl | Flexbox | class | Reverses column direction at XL breakpont. |
| flex--col-s | Flexbox | class | Sets flex direction to column at S breakpoint. |
| flex--col-xl | Flexbox | class | Sets flex direction to column at XL breakpoint. |
| flex--row | Flexbox | class | Sets flex direction to row. |
| flex--row-l | Flexbox | class | Sets flex direction to row at L breakpoint. |
| flex--row-m | Flexbox | class | Sets flex direction to row at M breakpoint. |
| flex--row-reverse | Flexbox | class | Reverses row direction. |
| flex--row-reverse-l | Flexbox | class | Reverses row direction at L breakpont. |
| flex--row-reverse-m | Flexbox | class | Reverses row direction at M breakpont. |
| flex--row-reverse-s | Flexbox | class | Reverses row direction at S breakpont. |
| flex--row-reverse-xl | Flexbox | class | Reverses row direction at XL breakpont. |
| flex--row-s | Flexbox | class | Sets flex direction to row at S breakpoint. |
| flex--row-xl | Flexbox | class | Sets flex direction to row at XL breakpoint. |
| flex--wrap | Flexbox | class | Sets flex to wrap. |
| flip--x | Flip | class | Flips object along the X axis. |
| flip--xy | Flip | class | Flips object along both axes. |
| flip--y | Flip | class | Flips object along the Y axis. |
| gap--l | Grid & Flex Gaps | class | Sets grid or flex gap to large. |
| gap--m | Grid & Flex Gaps | class | Sets grid or flex gap to medium. |
| gap--s | Grid & Flex Gaps | class | Sets grid or flex gap to small. |
| gap--xl | Grid & Flex Gaps | class | Sets grid or flex gap to x-large. |
| gap--xs | Grid & Flex Gaps | class | Sets grid or flex gap to x-small. |
| gap--xxl | Grid & Flex Gaps | class | Sets grid or flex gap to xx-large. |
| grid--1 | Grids | class | Sets grid structure to 1 column. |
| grid--1-2 | Grids | class | Sets grid structure to 1fr 2fr. |
| grid--1-3 | Grids | class | Sets grid structure to 1fr 3fr. |
| grid--2 | Grids | class | Sets grid structure to 2 columns. |
| grid--2-1 | Grids | class | Sets grid structure to 2fr 1fr. |
| grid--2-3 | Grids | class | Sets grid structure to 2fr 3fr. |
| grid--3 | Grids | class | Sets grid structure to 3 columns. |
| grid--3-1 | Grids | class | Sets grid structure to 3fr 1fr. |
| grid--3-2 | Grids | class | Sets grid structure to 3fr 2fr. |
| grid--4 | Grids | class | Sets grid structure to 4 columns. |
| grid--5 | Grids | class | Sets grid structure to 5 columns. |
| grid--6 | Grids | class | Sets grid structure to 6 columns. |
| grid--auto-1-2 | Auto Grids | class | Sets grid structure to 1fr 2fr with auto responsiveness. |
| grid--auto-1-3 | Auto Grids | class | Sets grid structure to 1fr 3fr with auto responsiveness. |
| grid--auto-2 | Auto Grids | class | Sets grid structure to 2 columns with auto responsiveness. |
| grid--auto-2-1 | Auto Grids | class | Sets grid structure to 2fr 1fr with auto responsiveness. |
| grid--auto-2-3 | Auto Grids | class | Sets grid structure to 2fr 3fr with auto responsiveness. |
| grid--auto-3 | Auto Grids | class | Sets grid structure to 3 columns with auto responsiveness. |
| grid--auto-3-1 | Auto Grids | class | Sets grid structure to 3fr 1fr with auto responsiveness. |
| grid--auto-3-2 | Auto Grids | class | Sets grid structure to 3fr 2fr with auto responsiveness. |
| grid--auto-4 | Auto Grids | class | Sets grid structure to 4 columns with auto responsiveness. |
| grid--auto-5 | Auto Grids | class | Sets grid structure to 5 columns with auto responsiveness. |
| grid--auto-6 | Auto Grids | class | Sets grid structure to 6 columns with auto responsiveness. |
| grid--l-1 | Grids | class | Sets grid structure to 1 column at L breakpoint. |
| grid--l-2 | Grids | class | Sets grid structure to 2 column at L breakpoint. |
| grid--l-3 | Grids | class | Sets grid structure to 3 column at L breakpoint. |
| grid--l-4 | Grids | class | Sets grid structure to 4 column at L breakpoint. |
| grid--l-5 | Grids | class | Sets grid structure to 5 column at L breakpoint. |
| grid--m-1 | Grids | class | Sets grid structure to 1 column at M breakpoint. |
| grid--m-2 | Grids | class | Sets grid structure to 2 column at M breakpoint. |
| grid--m-3 | Grids | class | Sets grid structure to 3 column at M breakpoint. |
| grid--m-4 | Grids | class | Sets grid structure to 4 column at M breakpoint. |
| grid--s-1 | Grids | class | Sets grid structure to 1 column at S breakpoint. |
| grid--s-2 | Grids | class | Sets grid structure to 2 column at S breakpoint. |
| grid--s-3 | Grids | class | Sets grid structure to 3 column at S breakpoint. |
| grid--s-4 | Grids | class | Sets grid structure to 4 column at S breakpoint. |
| grid--xl-1 | Grids | class | Sets grid structure to 1 column at XL breakpoint. |
| grid--xl-2 | Grids | class | Sets grid structure to 2 column at XL breakpoint. |
| grid--xl-3 | Grids | class | Sets grid structure to 3 column at XL breakpoint. |
| grid--xl-4 | Grids | class | Sets grid structure to 4 column at XL breakpoint. |
| grid--xl-5 | Grids | class | Sets grid structure to 5 column at XL breakpoint. |
| height--30 | Height | class | Sets min-height to 30vh. |
| height--40 | Height | class | Sets min-height to 40vh. |
| height--50 | Height | class | Sets min-height to 50vh. |
| height--60 | Height | class | Sets min-height to 60vh. |
| height--70 | Height | class | Sets min-height to 70vh. |
| height--80 | Height | class | Sets min-height to 80vh. |
| height--90 | Height | class | Sets min-height to 90vh. |
| height--full | Height | class | Sets min-height to 100vh. |
| height--xl-30 | Height | class | Sets min-height to 30vh at XL breakpoint. |
| height--xl-40 | Height | class | Sets min-height to 40vh at XL breakpoint. |
| height--xl-50 | Height | class | Sets min-height to 50vh at XL breakpoint. |
| height--xl-60 | Height | class | Sets min-height to 60vh at XL breakpoint. |
| height--xl-70 | Height | class | Sets min-height to 70vh at XL breakpoint. |
| height--xl-80 | Height | class | Sets min-height to 80vh at XL breakpoint. |
| height--xl-90 | Height | class | Sets min-height to 90vh at XL breakpoint. |
| height--l-30 | Height | class | Sets min-height to 30vh at L breakpoint. |
| height--l-40 | Height | class | Sets min-height to 40vh at L breakpoint. |
| height--l-50 | Height | class | Sets min-height to 50vh at L breakpoint. |
| height--l-60 | Height | class | Sets min-height to 60vh at L breakpoint. |
| height--l-70 | Height | class | Sets min-height to 70vh at L breakpoint. |
| height--l-80 | Height | class | Sets min-height to 80vh at L breakpoint. |
| height--l-90 | Height | class | Sets min-height to 90vh at L breakpoint. |
| height--m-30 | Height | class | Sets min-height to 30vh at M breakpoint. |
| height--m-40 | Height | class | Sets min-height to 40vh at M breakpoint. |
| height--m-50 | Height | class | Sets min-height to 50vh at M breakpoint. |
| height--m-60 | Height | class | Sets min-height to 60vh at M breakpoint. |
| height--m-70 | Height | class | Sets min-height to 70vh at M breakpoint. |
| height--m-80 | Height | class | Sets min-height to 80vh at M breakpoint. |
| height--m-90 | Height | class | Sets min-height to 90vh at M breakpoint. |
| height--s-30 | Height | class | Sets min-height to 30vh at S breakpoint. |
| height--s-40 | Height | class | Sets min-height to 40vh at S breakpoint. |
| height--s-50 | Height | class | Sets min-height to 50vh at S breakpoint. |
| height--s-60 | Height | class | Sets min-height to 60vh at S breakpoint. |
| height--s-70 | Height | class | Sets min-height to 70vh at S breakpoint. |
| height--s-80 | Height | class | Sets min-height to 80vh at S breakpoint. |
| height--s-90 | Height | class | Sets min-height to 90vh at S breakpoint. |
| justify-content--around | Flex & Grid Alignment | class | Sets flex or grid content to space-around. |
| justify-content--between | Flex & Grid Alignment | class | Sets flex or grid content to space-between. |
| justify-content--center | Flex & Grid Alignment | class | Sets flex or grid content to container center. |
| justify-content--end | Flex & Grid Alignment | class | Sets flex or grid content to container end. |
| justify-content--start | Flex & Grid Alignment | class | Sets flex or grid content to container start. |
| justify-items--center | Flex & Grid Alignment | class | Sets grid content to container center. |
| justify-items--end | Flex & Grid Alignment | class | Sets grid content to container end. |
| justify-items--start | Flex & Grid Alignment | class | Sets grid content to container start. |
| link--accent | Links | class | Sets accent color as link color. |
| link--accent-dark | Links | class | Sets accent dark shade as link color. |
| link--accent-light | Links | class | Sets accent light shade as link color. |
| link--accent-medium | Links | class | Sets accent medium shade as link color. |
| link--accent-ultra-dark | Links | class | Sets accent ultra dark shade as link color. |
| link--accent-ultra-light | Links | class | Sets accent ultra light shade as link color. |
| link--base | Links | class | Sets base color as link color. |
| link--base-dark | Links | class | Sets base dark shade as link color. |
| link--base-light | Links | class | Sets base light shade as link color. |
| link--base-medium | Links | class | Sets base medium shade as link color. |
| link--base-ultra-dark | Links | class | Sets base ultra dark shade as link color. |
| link--base-ultra-light | Links | class | Sets base ultra light shade as link color. |
| link--black | Links | class | Sets black as link color. |
| link--primary | Links | class | Sets primary color as link color. |
| link--primary-dark | Links | class | Sets primary dark shade as link color. |
| link--primary-light | Links | class | Sets primary light shade as link color. |
| link--primary-medium | Links | class | Sets primary medium shade as link color. |
| link--primary-ultra-dark | Links | class | Sets primary ultra dark shade as link color. |
| link--primary-ultra-light | Links | class | Sets primary ultra light shade as link color. |
| link--secondary | Links | class | Sets secondary color as link color. |
| link--secondary-dark | Links | class | Sets secondary dark shade as link color. |
| link--secondary-light | Links | class | Sets secondary light shade as link color. |
| link--secondary-medium | Links | class | Sets secondary medium shade as link color. |
| link--secondary-ultra-dark | Links | class | Sets secondary ultra dark shade as link color. |
| link--secondary-ultra-light | Links | class | Sets secondary ultra light shade as link color. |
| link--shade-dark | Links | class | Sets shade dark as link color. |
| link--shade-light | Links | class | Sets shade light as link color. |
| link--shade-medium | Links | class | Sets shade medium as link color. |
| link--shade-ultra-dark | Links | class | Sets shade ultra dark as link color. |
| link--shade-ultra-light | Links | class | Sets shade ultra light as link color. |
| link--skip | Links | class | Allows you to easily create an on-brand Skip Link in your primary template |
| link--white | Links | class | Sets white as link color. |
| margin-bottom--l | Margin | class | Sets bottom margin to large. |
| margin-bottom--m | Margin | class | Sets bottom margin to medium. |
| margin-bottom--s | Margin | class | Sets bottom margin to small. |
| margin-bottom--xl | Margin | class | Sets bottom margin to x-large. |
| margin-bottom--xs | Margin | class | Sets bottom margin to x-small. |
| margin-bottom--xxl | Margin | class | Sets bottom margin to xx-large. |
| margin-left--l | Margin | class | Sets left margin to large. |
| margin-left--m | Margin | class | Sets left margin to medium. |
| margin-left--s | Margin | class | Sets left margin to small. |
| margin-left--xl | Margin | class | Sets left margin to x-large. |
| margin-left--xs | Margin | class | Sets left margin to x-small. |
| margin-left--xxl | Margin | class | Sets left margin to xx-large. |
| margin-right--l | Margin | class | Sets right margin to large. |
| margin-right--m | Margin | class | Sets right margin to medium. |
| margin-right--s | Margin | class | Sets right margin to small. |
| margin-right--xl | Margin | class | Sets right margin to x-large. |
| margin-right--xs | Margin | class | Sets right margin to x-small. |
| margin-right--xxl | Margin | class | Sets right margin to xx-large. |
| margin-top--l | Margin | class | Sets top margin to large. |
| margin-top--m | Margin | class | Sets top margin to medium. |
| margin-top--s | Margin | class | Sets top margin to small. |
| margin-top--xl | Margin | class | Sets top margin to x-large. |
| margin-top--xs | Margin | class | Sets top margin to x-small. |
| margin-top--xxl | Margin | class | Sets top margin to xx-large. |
| max-height--30 | Max Height | class | Sets Max Height Height to 30vh. |
| max-height--40 | Max Height | class | Sets Max Height Height to 40vh. |
| max-height--50 | Max Height | class | Sets Max Height Height to 50vh. |
| max-height--60 | Max Height | class | Sets Max Height Height to 60vh. |
| max-height--70 | Max Height | class | Sets Max Height Height to 70vh. |
| max-height--80 | Max Height | class | Sets Max Height Height to 80vh. |
| max-height--90 | Max Height | class | Sets Max Height Height to 90vh. |
| max-height--xl-30 | Max Height | class | Sets Max Height Height to 30vh at XL breakpoint. |
| max-height--xl-40 | Max Height | class | Sets Max Height Height to 40vh at XL breakpoint. |
| max-height--xl-50 | Max Height | class | Sets Max Height Height to 50vh at XL breakpoint. |
| max-height--xl-60 | Max Height | class | Sets Max Height Height to 60vh at XL breakpoint. |
| max-height--xl-70 | Max Height | class | Sets Max Height Height to 70vh at XL breakpoint. |
| max-height--xl-80 | Max Height | class | Sets Max Height Height to 80vh at XL breakpoint. |
| max-height--xl-90 | Max Height | class | Sets Max Height Height to 90vh at XL breakpoint. |
| max-height--l-30 | Max Height | class | Sets Max Height Height to 30vh at L breakpoint. |
| max-height--l-40 | Max Height | class | Sets Max Height Height to 40vh at L breakpoint. |
| max-height--l-50 | Max Height | class | Sets Max Height Height to 50vh at L breakpoint. |
| max-height--l-60 | Max Height | class | Sets Max Height Height to 60vh at L breakpoint. |
| max-height--l-70 | Max Height | class | Sets Max Height Height to 70vh at L breakpoint. |
| max-height--l-80 | Max Height | class | Sets Max Height Height to 80vh at L breakpoint. |
| max-height--l-90 | Max Height | class | Sets Max Height Height to 90vh at L breakpoint. |
| max-height--m-30 | Max Height | class | Sets Max Height Height to 30vh at M breakpoint. |
| max-height--m-40 | Max Height | class | Sets Max Height Height to 40vh at M breakpoint. |
| max-height--m-50 | Max Height | class | Sets Max Height Height to 50vh at M breakpoint. |
| max-height--m-60 | Max Height | class | Sets Max Height Height to 60vh at M breakpoint. |
| max-height--m-70 | Max Height | class | Sets Max Height Height to 70vh at M breakpoint. |
| max-height--m-80 | Max Height | class | Sets Max Height Height to 80vh at M breakpoint. |
| max-height--m-90 | Max Height | class | Sets Max Height Height to 90vh at M breakpoint. |
| max-height--s-30 | Max Height | class | Sets Max Height Height to 30vh at S breakpoint. |
| max-height--s-40 | Max Height | class | Sets Max Height Height to 40vh at S breakpoint. |
| max-height--s-50 | Max Height | class | Sets Max Height Height to 50vh at S breakpoint. |
| max-height--s-60 | Max Height | class | Sets Max Height Height to 60vh at S breakpoint. |
| max-height--s-70 | Max Height | class | Sets Max Height Height to 70vh at S breakpoint. |
| max-height--s-80 | Max Height | class | Sets Max Height Height to 80vh at S breakpoint. |
| max-height--s-90 | Max Height | class | Sets Max Height Height to 90vh at S breakpoint. |
| object-fit--bottom-center | Images | class | Preserves the bottom center of an object-fit image. |
| object-fit--bottom-left | Images | class | Preserves the bottom left of an object-fit image. |
| object-fit--bottom-right | Images | class | Preserves the bottom right of an object-fit image. |
| object-fit--center-left | Images | class | Preserves the bottom center of an object-fit image. |
| object-fit--center-right | Images | class | Preserves the right middle of an object-fit image. |
| object-fit--contain | Images | class | Sets object-fit to "contain." |
| object-fit--cover | Images | class | Sets object-fit to "cover." |
| object-fit--top-center | Images | class | Preserves the center top of an object-fit image. |
| object-fit--top-left | Images | class | Preserves the top left of an object-fit image. |
| object-fit--top-right | Images | class | Preserves the top right of an object-fit image. |
| opacity--10 | Opacities | class | Sets opacity to 10%. |
| opacity--20 | Opacities | class | Sets opacity to 20%. |
| opacity--30 | Opacities | class | Sets opacity to 30%. |
| opacity--40 | Opacities | class | Sets opacity to 40%. |
| opacity--5 | Opacities | class | Sets opacity to 5%. |
| opacity--50 | Opacities | class | Sets opacity to 50%. |
| opacity--60 | Opacities | class | Sets opacity to 60%. |
| opacity--70 | Opacities | class | Sets opacity to 70%. |
| opacity--80 | Opacities | class | Sets opacity to 80%. |
| opacity--90 | Opacities | class | Sets opacity to 90%. |
| opacity--95 | Opacities | class | Sets opacity to 95%. |
| order--first | Grid Order | class | Sets a grid cell's order to first. |
| order--first-l | Grid Order | class | Sets a grid cell's order to first at L breakpoint. |
| order--first-m | Grid Order | class | Sets a grid cell's order to first at M breakpoint. |
| order--first-s | Grid Order | class | Sets a grid cell's order to first at S breakpoint. |
| order--first-xl | Grid Order | class | Sets a grid cell's order to first at XL breakpoint. |
| order--last | Grid Order | class | Sets a grid cell's order to last. |
| order--last-l | Grid Order | class | Sets a grid cell's order to last at L breakpoint. |
| order--last-m | Grid Order | class | Sets a grid cell's order to last at M breakpoint. |
| order--last-s | Grid Order | class | Sets a grid cell's order to last at S breakpoint. |
| order--last-xl | Grid Order | class | Sets a grid cell's order to last at XL breakpoint. |
| overlay--accent-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light accent color |
| overlay--accent-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light accent color |
| overlay--accent-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light accent color |
| overlay--accent-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light accent color |
| overlay--accent-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light accent color |
| overlay--accent-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light accent color |
| overlay--accent-trans-10 | Overlays | class | Sets overlay on background image to 10% accent color |
| overlay--accent-trans-20 | Overlays | class | Sets overlay on background image to 20% accent color |
| overlay--accent-trans-40 | Overlays | class | Sets overlay on background image to 40% accent color |
| overlay--accent-trans-60 | Overlays | class | Sets overlay on background image to 60% accent color |
| overlay--accent-trans-80 | Overlays | class | Sets overlay on background image to 80% accent color |
| overlay--accent-trans-90 | Overlays | class | Sets overlay on background image to 90% accent color |
| overlay--accent-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark accent color |
| overlay--accent-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark accent color |
| overlay--accent-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark accent color |
| overlay--accent-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark accent color |
| overlay--accent-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark accent color |
| overlay--accent-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark accent color |
| overlay--base-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light base color |
| overlay--base-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light base color |
| overlay--base-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light base color |
| overlay--base-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light base color |
| overlay--base-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light base color |
| overlay--base-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light base color |
| overlay--base-trans-10 | Overlays | class | Sets overlay on background image to 10% base color |
| overlay--base-trans-20 | Overlays | class | Sets overlay on background image to 20% base color |
| overlay--base-trans-40 | Overlays | class | Sets overlay on background image to 40% base color |
| overlay--base-trans-60 | Overlays | class | Sets overlay on background image to 60% base color |
| overlay--base-trans-80 | Overlays | class | Sets overlay on background image to 80% base color |
| overlay--base-trans-90 | Overlays | class | Sets overlay on background image to 90% base color |
| overlay--base-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark base color |
| overlay--base-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark base color |
| overlay--base-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark base color |
| overlay--base-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark base color |
| overlay--base-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark base color |
| overlay--base-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark base color |
| overlay--black-trans-10 | Overlays | class | Sets overlay on background image to 10% black |
| overlay--black-trans-20 | Overlays | class | Sets overlay on background image to 20% black |
| overlay--black-trans-40 | Overlays | class | Sets overlay on background image to 40% black |
| overlay--black-trans-60 | Overlays | class | Sets overlay on background image to 60% black |
| overlay--black-trans-80 | Overlays | class | Sets overlay on background image to 80% black |
| overlay--black-trans-90 | Overlays | class | Sets overlay on background image to 90% black |
| overlay--primary-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light primary color |
| overlay--primary-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light primary color |
| overlay--primary-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light primary color |
| overlay--primary-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light primary color |
| overlay--primary-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light primary color |
| overlay--primary-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light primary color |
| overlay--primary-trans-10 | Overlays | class | Sets overlay on background image to 10% primary color |
| overlay--primary-trans-20 | Overlays | class | Sets overlay on background image to 20% primary color |
| overlay--primary-trans-40 | Overlays | class | Sets overlay on background image to 40% primary color |
| overlay--primary-trans-60 | Overlays | class | Sets overlay on background image to 60% primary color |
| overlay--primary-trans-80 | Overlays | class | Sets overlay on background image to 80% primary color |
| overlay--primary-trans-90 | Overlays | class | Sets overlay on background image to 90% primary color |
| overlay--primary-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark primary color |
| overlay--primary-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark primary color |
| overlay--primary-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark primary color |
| overlay--primary-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark primary color |
| overlay--primary-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark primary color |
| overlay--primary-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark primary color |
| overlay--secondary-light-trans-10 | Overlays | class | Sets overlay on background image to 10% light secondary color |
| overlay--secondary-light-trans-20 | Overlays | class | Sets overlay on background image to 20% light secondary color |
| overlay--secondary-light-trans-40 | Overlays | class | Sets overlay on background image to 40% light secondary color |
| overlay--secondary-light-trans-60 | Overlays | class | Sets overlay on background image to 60% light secondary color |
| overlay--secondary-light-trans-80 | Overlays | class | Sets overlay on background image to 80% light secondary color |
| overlay--secondary-light-trans-90 | Overlays | class | Sets overlay on background image to 90% light secondary color |
| overlay--secondary-trans-10 | Overlays | class | Sets overlay on background image to 10% secondary color |
| overlay--secondary-trans-20 | Overlays | class | Sets overlay on background image to 20% secondary color |
| overlay--secondary-trans-40 | Overlays | class | Sets overlay on background image to 40% secondary color |
| overlay--secondary-trans-60 | Overlays | class | Sets overlay on background image to 60% secondary color |
| overlay--secondary-trans-80 | Overlays | class | Sets overlay on background image to 80% secondary color |
| overlay--secondary-trans-90 | Overlays | class | Sets overlay on background image to 90% secondary color |
| overlay--secondary-ultra-dark-trans-10 | Overlays | class | Sets overlay on background image to 10% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-20 | Overlays | class | Sets overlay on background image to 20% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-40 | Overlays | class | Sets overlay on background image to 40% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-60 | Overlays | class | Sets overlay on background image to 60% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-80 | Overlays | class | Sets overlay on background image to 80% ultra dark secondary color |
| overlay--secondary-ultra-dark-trans-90 | Overlays | class | Sets overlay on background image to 90% ultra dark secondary color |
| owl--l | Owl Spacing | class | Creates a large vertical gap between all items in a container. |
| owl--m | Owl Spacing | class | Creates a medium vertical gap between all items in a container. |
| owl--s | Owl Spacing | class | Creates a small vertical gap between all items in a container. |
| owl--xl | Owl Spacing | class | Creates a x-large vertical gap between all items in a container. |
| owl--xs | Owl Spacing | class | Creates a x-small vertical gap between all items in a container. |
| owl--xxl | Owl Spacing | class | Creates an xx-large vertical gap between all items in a container. |
| pad--l | Padding | class | Sets padding to large on all sides. |
| pad--m | Padding | class | Sets padding to medium on all sides. |
| pad--none | Padding, Padding--Sections | class | Sets padding to zero on all sides with !important to ensure padding removal. |
| pad--s | Padding | class | Sets padding to small on all sides. |
| pad--xl | Padding | class | Sets padding to x-large on all sides. |
| pad--xs | Padding | class | Sets padding to x-small on all sides. |
| pad--xxl | Padding | class | Sets padding to xx-large on all sides. |
| pad-header--l | Padding--Header | class | Sets top and bottom padding on header rows to large. |
| pad-header--m | Padding--Header | class | Sets top and bottom padding on header rows to medium. |
| pad-header--s | Padding--Header | class | Sets top and bottom padding on header rows to small. |
| pad-header--xl | Padding--Header | class | Sets top and bottom padding on header rows to x-large. |
| pad-header--xs | Padding--Header | class | Sets top and bottom padding on header rows to x-small. |
| pad-header--xxl | Padding--Header | class | Sets top and bottom padding on header rows to xx-large. |
| pad-section--l | Padding--Sections | class | Sets top and bottom section padding to large |
| pad-section--none | Padding--Sections | class | Sets top and bottom section padding to 0. |
| pad-section--s | Padding--Sections | class | Sets top and bottom section padding to small |
| pad-section--xl | Padding--Sections | class | Sets top and bottom section padding to x-large |
| pad-section--xs | Padding--Sections | class | Sets top and bottom section padding to x-small |
| pad-section--xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large |
| pad-section--xl-l | Padding--Sections | class | Sets top and bottom section padding to large at XL breakpoint |
| pad-section--xl-none | Padding--Sections | class | Sets top and bottom section padding to 0 at XL breakpoint |
| pad-section--xl-s | Padding--Sections | class | Sets top and bottom section padding to small at XL breakpoint |
| pad-section--xl-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at XL breakpoint |
| pad-section--xl-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at XL breakpoint |
| pad-section--xl-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at XL breakpoint |
| pad-section--l-l | Padding--Sections | class | Sets top and bottom section padding to large at L breakpoint |
| pad-section--l-none | Padding--Sections | class | Sets top and bottom section padding to 0 at L breakpoint |
| pad-section--l-s | Padding--Sections | class | Sets top and bottom section padding to small at L breakpoint |
| pad-section--l-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at L breakpoint |
| pad-section--l-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at L breakpoint |
| pad-section--l-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at L breakpoint |
| pad-section--m-l | Padding--Sections | class | Sets top and bottom section padding to large at M breakpoint |
| pad-section--m-none | Padding--Sections | class | Sets top and bottom section padding to 0 at M breakpoint |
| pad-section--m-s | Padding--Sections | class | Sets top and bottom section padding to small at M breakpoint |
| pad-section--m-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at M breakpoint |
| pad-section--m-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at M breakpoint |
| pad-section--m-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at M breakpoint |
| pad-section--s-l | Padding--Sections | class | Sets top and bottom section padding to large at S breakpoint |
| pad-section--s-none | Padding--Sections | class | Sets top and bottom section padding to 0 at S breakpoint |
| pad-section--s-s | Padding--Sections | class | Sets top and bottom section padding to small at S breakpoint |
| pad-section--s-xl | Padding--Sections | class | Sets top and bottom section padding to x-large at S breakpoint |
| pad-section--s-xs | Padding--Sections | class | Sets top and bottom section padding to x-small at S breakpoint |
| pad-section--s-xxl | Padding--Sections | class | Sets top and bottom section padding to xx-large at S breakpoint |
| rounded--50 | Border Radius | class | Sets border radius to 50%. |
| rounded--circle | Border Radius | class | Sets border radius to 50% (deprecated) |
| rounded--l | Border Radius | class | Sets border radius to L radius (based on radius scale) |
| rounded--m | Border Radius | class | Sets border radius to default radius. |
| rounded--s | Border Radius | class | Sets border radius to S radius (based on radius scale) |
| rounded--xl | Border Radius | class | Sets border radius to XL radius (based on radius scale) |
| rounded--xs | Border Radius | class | Sets border radius to XS radius (based on radius scale) |
| rounded--xxl | Border Radius | class | Sets border radius to XXL radius (based on radius scale) |
| row-span--2 | Grid Spans | class | Spans the grid cell 2 rows. |
| row-span--3 | Grid Spans | class | Spans the grid cell 3 rows. |
| row-span--4 | Grid Spans | class | Spans the grid cell 4 rows. |
| row-span--5 | Grid Spans | class | Spans the grid cell 5 rows. |
| row-span--6 | Grid Spans | class | Spans the grid cell 6 rows. |
| row-span--l-1 | Grid Spans | class | Spans the grid cell 1 row at L breakpoint. |
| row-span--l-2 | Grid Spans | class | Spans the grid cell 2 rows at L breakpoint. |
| row-span--l-3 | Grid Spans | class | Spans the grid cell 3 rows at L breakpoint. |
| row-span--l-4 | Grid Spans | class | Spans the grid cell 4 rows at L breakpoint. |
| row-span--l-5 | Grid Spans | class | Spans the grid cell 5 rows at L breakpoint. |
| row-span--l-6 | Grid Spans | class | Spans the grid cell 6 rows at L breakpoint. |
| row-span--m-1 | Grid Spans | class | Spans the grid cell 1 row at M breakpoint. |
| row-span--m-2 | Grid Spans | class | Spans the grid cell 2 rows at M breakpoint. |
| row-span--m-3 | Grid Spans | class | Spans the grid cell 3 rows at M breakpoint. |
| row-span--m-4 | Grid Spans | class | Spans the grid cell 4 rows at M breakpoint. |
| row-span--m-5 | Grid Spans | class | Spans the grid cell 5 rows at M breakpoint. |
| row-span--m-6 | Grid Spans | class | Spans the grid cell 6 rows at M breakpoint. |
| row-span--s-1 | Grid Spans | class | Spans the grid cell 1 row at S breakpoint. |
| row-span--s-2 | Grid Spans | class | Spans the grid cell 2 rows at S breakpoint. |
| row-span--s-3 | Grid Spans | class | Spans the grid cell 3 rows at S breakpoint. |
| row-span--s-4 | Grid Spans | class | Spans the grid cell 4 rows at S breakpoint. |
| row-span--s-5 | Grid Spans | class | Spans the grid cell 5 rows at S breakpoint. |
| row-span--s-6 | Grid Spans | class | Spans the grid cell 6 rows at S breakpoint. |
| row-span--xl-1 | Grid Spans | class | Spans the grid cell 1 row at XL breakpoint. |
| row-span--xl-2 | Grid Spans | class | Spans the grid cell 2 rows at XL breakpoint. |
| row-span--xl-3 | Grid Spans | class | Spans the grid cell 3 rows at XL breakpoint. |
| row-span--xl-4 | Grid Spans | class | Spans the grid cell 4 rows at XL breakpoint. |
| row-span--xl-5 | Grid Spans | class | Spans the grid cell 5 rows at XL breakpoint. |
| row-span--xl-6 | Grid Spans | class | Spans the grid cell 6 rows at XL breakpoint. |
| row-start--1 | Grid Order | class | Sets grid cell start to 1 |
| row-start--2 | Grid Order | class | Sets grid cell start to 2 |
| row-start--3 | Grid Order | class | Sets grid cell start to 3 |
| row-start--4 | Grid Order | class | Sets grid cell start to 4 |
| row-start--5 | Grid Order | class | Sets grid cell start to 5 |
| row-start--6 | Grid Order | class | Sets grid cell start to 6 |
| row-start--l-1 | Grid Order | class | Sets grid cell start to 1 at L breakpoint |
| row-start--l-2 | Grid Order | class | Sets grid cell start to 2 at L breakpoint |
| row-start--l-3 | Grid Order | class | Sets grid cell start to 3 at L breakpoint |
| row-start--l-4 | Grid Order | class | Sets grid cell start to 4 at L breakpoint |
| row-start--l-5 | Grid Order | class | Sets grid cell start to 5 at L breakpoint |
| row-start--l-6 | Grid Order | class | Sets grid cell start to 6 at L breakpoint |
| row-start--m-1 | Grid Order | class | Sets grid cell start to 1 at M breakpoint |
| row-start--m-2 | Grid Order | class | Sets grid cell start to 2 at M breakpoint |
| row-start--m-3 | Grid Order | class | Sets grid cell start to 3 at M breakpoint |
| row-start--m-4 | Grid Order | class | Sets grid cell start to 4 at M breakpoint |
| row-start--m-5 | Grid Order | class | Sets grid cell start to 5 at M breakpoint |
| row-start--m-6 | Grid Order | class | Sets grid cell start to 6 at M breakpoint |
| row-start--s-1 | Grid Order | class | Sets grid cell start to 1 at S breakpoint |
| row-start--s-2 | Grid Order | class | Sets grid cell start to 2 at S breakpoint |
| row-start--s-3 | Grid Order | class | Sets grid cell start to 3 at S breakpoint |
| row-start--s-4 | Grid Order | class | Sets grid cell start to 4 at S breakpoint |
| row-start--s-5 | Grid Order | class | Sets grid cell start to 5 at S breakpoint |
| row-start--s-6 | Grid Order | class | Sets grid cell start to 6 at S breakpoint |
| row-start--xl-1 | Grid Order | class | Sets grid cell start to 1 at XL breakpoint |
| row-start--xl-2 | Grid Order | class | Sets grid cell start to 2 at XL breakpoint |
| row-start--xl-3 | Grid Order | class | Sets grid cell start to 3 at XL breakpoint |
| row-start--xl-4 | Grid Order | class | Sets grid cell start to 4 at XL breakpoint |
| row-start--xl-5 | Grid Order | class | Sets grid cell start to 5 at XL breakpoint |
| row-start--xl-6 | Grid Order | class | Sets grid cell start to 6 at XL breakpoint |
| self--center | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to center. |
| self--end | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to flex-end. |
| self--start | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to flex-start. |
| self--stretch | Flex & Grid Alignment | class | Sets self-alignment of flexbox item to stretch. |
| sticky | Sticky | class | Makes an element sticky. |
| sticky-top--l | Sticky | class | Positions sticky element 10% from viewport top. |
| sticky-top--m | Sticky | class | Positions sticky element 5% from viewport top. |
| sticky-top--s | Sticky | class | Positions sticky element 2% from viewport top. |
| stretch | Flex & Grid Alignment | class | Sets container to flex and stretch. |
| text--100 | Text Weights | class | Sets font-weight to 100. |
| text--200 | Text Weights | class | Sets font-weight to 200. |
| text--300 | Text Weights | class | Sets font-weight to 300. |
| text--400 | Text Weights | class | Sets font-weight to 400. |
| text--500 | Text Weights | class | Sets font-weight to 500. |
| text--600 | Text Weights | class | Sets font-weight to 600. |
| text--700 | Text Weights | class | Sets font-weight to 700. |
| text--800 | Text Weights | class | Sets font-weight to 800. |
| text--900 | Text Weights | class | Sets font-weight to 900. |
| text--accent | Text Color | class | Sets accent color as text color. |
| text--accent-comp | Text Color | class | Sets accent's complimentary color as text color. |
| text--accent-dark | Text Color | class | Sets accent dark shade as text color. |
| text--accent-light | Text Color | class | Sets accent light shade as text color. |
| text--accent-medium | Text Color | class | Sets accent medium shade as text color. |
| text--accent-ultra-dark | Text Color | class | Sets accent ultra dark shade as text color. |
| text--accent-ultra-light | Text Color | class | Sets accent ultra light shade as text color. |
| text--base | Text Color | class | Sets base color as text color. |
| text--base-comp | Text Color | class | Sets base's complimentary color as text color. |
| text--base-dark | Text Color | class | Sets base dark shade as text color. |
| text--base-light | Text Color | class | Sets base light shade as text color. |
| text--base-medium | Text Color | class | Sets base medium shade as text color. |
| text--base-ultra-dark | Text Color | class | Sets base ultra dark shade as text color. |
| text--base-ultra-light | Text Color | class | Sets base ultra light shade as text color. |
| text--black | Text Color | class | Sets black as text color. |
| text--bold | Text Styles | class | Sets font-style to bold. |
| text--capitalize | Text Transforms | class | Sets text-transform to capitalize. |
| text--center | Text Alignments | class | Sets text-align to center. |
| text--decoration-none | Text Decorations | class | Sets text-decoration to none. |
| text--italic | Text Styles | class | Sets font-style to italic. |
| text--justify | Text Alignments | class | Sets text-align to justify. |
| text--l | Text Size | class | Sets font size to large. |
| text--larger | Text Size | class | Multiples the current text size by "Text Size Multiplier" |
| text--left | Text Alignments | class | Sets text-align to left. |
| text--line-through | Text Decorations | class | Sets text-decoration to line-through. |
| text--lowercase | Text Transforms | class | Sets text-transform to lowercase. |
| text--m | Text Size | class | Sets font size to medium. |
| text--oblique | Text Styles | class | Sets font-style to oblique. |
| text--overline | Text Decorations | class | Sets text-decoration to overline. |
| text--primary | Text Color | class | Sets primary color as text color. |
| text--primary-comp | Text Color | class | Sets primary's complimentary color as text color. |
| text--primary-dark | Text Color | class | Sets primary dark shade as text color. |
| text--primary-light | Text Color | class | Sets primary light shade as text color. |
| text--primary-medium | Text Color | class | Sets primary medium shade as text color. |
| text--primary-ultra-dark | Text Color | class | Sets primary ultra dark shade as text color. |
| text--primary-ultra-light | Text Color | class | Sets primary ultra light shade as text color. |
| text--right | Text Alignments | class | Sets text-align to right. |
| text--s | Text Size | class | Sets font size to small. |
| text--secondary | Text Color | class | Sets secondary color as text color. |
| text--secondary-comp | Text Color | class | Sets secondary's complimentary color as text color. |
| text--secondary-dark | Text Color | class | Sets secondary dark shade as text color. |
| text--secondary-light | Text Color | class | Sets secondary light shade as text color. |
| text--secondary-medium | Text Color | class | Sets secondary medium shade as text color. |
| text--secondary-ultra-dark | Text Color | class | Sets secondary ultra dark shade as text color. |
| text--secondary-ultra-light | Text Color | class | Sets secondary ultra light shade as text color. |
| text--shade-dark | Text Color | class | Sets shade dark as text color. |
| text--shade-light | Text Color | class | Sets shade light as text color. |
| text--shade-medium | Text Color | class | Sets shade medium as text color. |
| text--shade-ultra-dark | Text Color | class | Sets shade ultra dark as text color. |
| text--shade-ultra-light | Text Color | class | Sets shade ultra light as text color. |
| text--transform-none | Text Transforms | class | Sets text-transform to none. |
| text--underline | Text Decorations | class | Sets text-decoration to underline. |
| text--underline-dashed | Text Decorations | class | Sets text-decoration to underline dashed. |
| text--underline-dotted | Text Decorations | class | Sets text-decoration to underline dotted. |
| text--underline-double | Text Decorations | class | Sets text-decoration to underline double. |
| text--underline-wavy | Text Decorations | class | Sets text-decoration to underline wavy. |
| text--uppercase | Text Transforms | class | Sets text-transform to uppercase. |
| text--white | Text Color | class | Sets text color to white. |
| text--xl | Text Size | class | Sets font-size to x-large. |
| text--xs | Text Size | class | Sets font-size to x-small. |
| text--xxl | Text Size | class | Sets font-size to xx-large. |
| var(--accent-comp) | Colors | variable | References the accent complimentary color. |
| var(--accent-dark) | Colors | variable | References the accent dark shade. |
| var(--accent-hover) | Colors | variable | References the accent hover color. |
| var(--accent-light-trans-10) | Colors | variable | References the accent light shade at 10% opacity. |
| var(--accent-light-trans-20) | Colors | variable | References the accent light shade at 20% opacity. |
| var(--accent-light-trans-40) | Colors | variable | References the accent light shade at 40% opacity. |
| var(--accent-light-trans-60) | Colors | variable | References the accent light shade at 60% opacity. |
| var(--accent-light-trans-80) | Colors | variable | References the accent light shade at 80% opacity. |
| var(--accent-light-trans-90) | Colors | variable | References the accent light shade at 90% opacity. |
| var(--accent-light) | Colors | variable | References the accent light shade. |
| var(--accent-medium) | Colors | variable | References the accent medium shade. |
| var(--accent-trans-10) | Colors | variable | References the accent color at 10% opacity. |
| var(--accent-trans-20) | Colors | variable | References the accent color at 20% opacity. |
| var(--accent-trans-40) | Colors | variable | References the accent color at 40% opacity. |
| var(--accent-trans-60) | Colors | variable | References the accent color at 60% opacity. |
| var(--accent-trans-80) | Colors | variable | References the accent color at 80% opacity. |
| var(--accent-trans-90) | Colors | variable | References the accent color at 90% opacity. |
| var(--accent-ultra-dark-trans-10) | Colors | variable | References the accent ultra dark shade at 10% opacity. |
| var(--accent-ultra-dark-trans-20) | Colors | variable | References the accent ultra dark shade at 20% opacity. |
| var(--accent-ultra-dark-trans-40) | Colors | variable | References the accent ultra dark shade at 40% opacity. |
| var(--accent-ultra-dark-trans-60) | Colors | variable | References the accent ultra dark shade at 60% opacity. |
| var(--accent-ultra-dark-trans-80) | Colors | variable | References the accent ultra dark shade at 80% opacity. |
| var(--accent-ultra-dark-trans-90) | Colors | variable | References the accent ultra dark shade at 90% opacity. |
| var(--accent-ultra-dark) | Colors | variable | References the accent ultra dark shade. |
| var(--accent-ultra-light) | Colors | variable | References the accent ultra light shade. |
| var(--accent) | Colors | variable | References the accent color. |
| var(--base-comp) | Colors | variable | References the base complimentary color. |
| var(--base-dark) | Colors | variable | References the base dark shade. |
| var(--base-hover) | Colors | variable | References the base hover color. |
| var(--base-light-trans-10) | Colors | variable | References the base light shade at 10% opacity. |
| var(--base-light-trans-20) | Colors | variable | References the base light shade at 20% opacity. |
| var(--base-light-trans-40) | Colors | variable | References the base light shade at 40% opacity. |
| var(--base-light-trans-60) | Colors | variable | References the base light shade at 60% opacity. |
| var(--base-light-trans-80) | Colors | variable | References the base light shade at 80% opacity. |
| var(--base-light-trans-90) | Colors | variable | References the base light shade at 90% opacity. |
| var(--base-light) | Colors | variable | References the base light shade. |
| var(--base-medium) | Colors | variable | References the base medium shade. |
| var(--base-trans-10) | Colors | variable | References the base color at 10% opacity. |
| var(--base-trans-20) | Colors | variable | References the base color at 20% opacity. |
| var(--base-trans-40) | Colors | variable | References the base color at 40% opacity. |
| var(--base-trans-60) | Colors | variable | References the base color at 60% opacity. |
| var(--base-trans-80) | Colors | variable | References the base color at 80% opacity. |
| var(--base-trans-90) | Colors | variable | References the base color at 90% opacity. |
| var(--base-ultra-dark-trans-10) | Colors | variable | References the base ultra dark shade at 10% opacity. |
| var(--base-ultra-dark-trans-20) | Colors | variable | References the base ultra dark shade at 20% opacity. |
| var(--base-ultra-dark-trans-40) | Colors | variable | References the base ultra dark shade at 40% opacity. |
| var(--base-ultra-dark-trans-60) | Colors | variable | References the base ultra dark shade at 60% opacity. |
| var(--base-ultra-dark-trans-80) | Colors | variable | References the base ultra dark shade at 80% opacity. |
| var(--base-ultra-dark-trans-90) | Colors | variable | References the base ultra dark shade at 90% opacity. |
| var(--base-ultra-dark) | Colors | variable | References the base ultra dark shade. |
| var(--base-ultra-light) | Colors | variable | References the base ultra light shade. |
| var(--base) | Colors | variable | References the base color. |
| var(--black-trans-10) | Colors | variable | References black at 10% opacity. |
| var(--black-trans-20) | Colors | variable | References black at 20% opacity. |
| var(--black-trans-40) | Colors | variable | References black at 40% opacity. |
| var(--black-trans-60) | Colors | variable | References black at 60% opacity. |
| var(--black-trans-80) | Colors | variable | References black at 80% opacity. |
| var(--black-trans-90) | Colors | variable | References black at 90% opacity. |
| var(--btn-border-size) | Buttons | variable | Applies your site's default button border width. |
| var(--btn-pad-x) | Buttons | variable | Applies your site's default left/right padding for buttons. |
| var(--btn-pad-y) | Buttons | variable | Applies your site's default top/bottom padding for buttons. |
| var(--btn-radius) | Buttons | variable | Applies your site's default button border radius. |
| var(--outline-btn-border-size) | Buttons | variable | Applies your site's default oultline button border width. |
| var(--primary-comp) | Colors | variable | References the primary complimentary color. |
| var(--primary-dark) | Colors | variable | References the primary dark shade. |
| var(--primary-hover) | Colors | variable | References the primary hover color. |
| var(--primary-light-trans-10) | Colors | variable | References the primary light shade at 10% opacity. |
| var(--primary-light-trans-20) | Colors | variable | References the primary light shade at 20% opacity. |
| var(--primary-light-trans-40) | Colors | variable | References the primary light shade at 40% opacity. |
| var(--primary-light-trans-60) | Colors | variable | References the primary light shade at 60% opacity. |
| var(--primary-light-trans-80) | Colors | variable | References the primary light shade at 80% opacity. |
| var(--primary-light-trans-90) | Colors | variable | References the primary light shade at 90% opacity. |
| var(--primary-light) | Colors | variable | References the primary light shade. |
| var(--primary-medium) | Colors | variable | References the primary medium shade. |
| var(--primary-trans-10) | Colors | variable | References the primary color at 10% opacity. |
| var(--primary-trans-20) | Colors | variable | References the primary color at 20% opacity. |
| var(--primary-trans-40) | Colors | variable | References the primary color at 40% opacity. |
| var(--primary-trans-60) | Colors | variable | References the primary color at 60% opacity. |
| var(--primary-trans-80) | Colors | variable | References the primary color at 80% opacity. |
| var(--primary-trans-90) | Colors | variable | References the primary color at 90% opacity. |
| var(--primary-ultra-dark-trans-10) | Colors | variable | References the primary ultra dark shade at 10% opacity. |
| var(--primary-ultra-dark-trans-20) | Colors | variable | References the primary ultra dark shade at 20% opacity. |
| var(--primary-ultra-dark-trans-40) | Colors | variable | References the primary ultra dark shade at 40% opacity. |
| var(--primary-ultra-dark-trans-60) | Colors | variable | References the primary ultra dark shade at 60% opacity. |
| var(--primary-ultra-dark-trans-80) | Colors | variable | References the primary ultra dark shade at 80% opacity. |
| var(--primary-ultra-dark-trans-90) | Colors | variable | References the primary ultra dark shade at 90% opacity. |
| var(--primary-ultra-dark) | Colors | variable | References the primary ultra dark shade. |
| var(--primary-ultra-light) | Colors | variable | References the primary ultra light shade. |
| var(--primary) | Colors | variable | References the primary color. |
| var(--radius-50) | Border Radius | variable | Sets border radius to 50%. |
| var(--radius-l) | Border Radius | variable | Sets border radius to large. |
| var(--radius-m) | Border Radius | variable | Sets border radius to medium. |
| var(--radius-s) | Border Radius | variable | Sets border radius to small. |
| var(--radius-xl) | Border Radius | variable | Sets border radius to x-large. |
| var(--radius-xs) | Border Radius | variable | Sets border radius to x-small. |
| var(--radius-xxl) | Border Radius | variable | Sets border radius to xx-large. |
| var(--secondary-comp) | Colors | variable | References the secondary complimentary color. |
| var(--secondary-dark) | Colors | variable | References the secondary dark shade. |
| var(--secondary-hover) | Colors | variable | References the secondary hover color. |
| var(--secondary-light-trans-10) | Colors | variable | References the secondary light shade at 10% opacity. |
| var(--secondary-light-trans-20) | Colors | variable | References the secondary light shade at 20% opacity. |
| var(--secondary-light-trans-40) | Colors | variable | References the secondary light shade at 40% opacity. |
| var(--secondary-light-trans-60) | Colors | variable | References the secondary light shade at 60% opacity. |
| var(--secondary-light-trans-80) | Colors | variable | References the secondary light shade at 80% opacity. |
| var(--secondary-light-trans-90) | Colors | variable | References the secondary light shade at 90% opacity. |
| var(--secondary-light) | Colors | variable | References the secondary light shade. |
| var(--secondary-medium) | Colors | variable | References the secondary medium shade. |
| var(--secondary-trans-10) | Colors | variable | References the secondary color at 10% opacity. |
| var(--secondary-trans-20) | Colors | variable | References the secondary color at 20% opacity. |
| var(--secondary-trans-40) | Colors | variable | References the secondary color at 40% opacity. |
| var(--secondary-trans-60) | Colors | variable | References the secondary color at 60% opacity. |
| var(--secondary-trans-80) | Colors | variable | References the secondary color at 80% opacity. |
| var(--secondary-trans-90) | Colors | variable | References the secondary color at 90% opacity. |
| var(--secondary-ultra-dark-trans-10) | Colors | variable | References the secondary ultra dark shade at 10% opacity. |
| var(--secondary-ultra-dark-trans-20) | Colors | variable | References the secondary ultra dark shade at 20% opacity. |
| var(--secondary-ultra-dark-trans-40) | Colors | variable | References the secondary ultra dark shade at 40% opacity. |
| var(--secondary-ultra-dark-trans-60) | Colors | variable | References the secondary ultra dark shade at 60% opacity. |
| var(--secondary-ultra-dark-trans-80) | Colors | variable | References the secondary ultra dark shade at 80% opacity. |
| var(--secondary-ultra-dark-trans-90) | Colors | variable | References the secondary ultra dark shade at 90% opacity. |
| var(--secondary-ultra-dark) | Colors | variable | References the secondary ultra dark shade. |
| var(--secondary-ultra-light) | Colors | variable | References the secondary ultra light shade. |
| var(--secondary) | Colors | variable | References the secondary color. |
| var(--section-padding-x) | Padding--Sections, Padding--Header | variable | Applies your site's left/right section/header padding when writing custom CSS. |
| var(--shade) | Colors | variable | References the shade color. |
| var(--shade-dark) | Colors | variable | References the shade dark shade. |
| var(--shade-light-trans-10) | Colors | variable | References the shade light shade at 10% opacity. |
| var(--shade-light-trans-20) | Colors | variable | References the shade light shade at 20% opacity. |
| var(--shade-light-trans-40) | Colors | variable | References the shade light shade at 40% opacity. |
| var(--shade-light-trans-60) | Colors | variable | References the shade light shade at 60% opacity. |
| var(--shade-light-trans-80) | Colors | variable | References the shade light shade at 80% opacity. |
| var(--shade-light-trans-90) | Colors | variable | References the shade light shade at 90% opacity. |
| var(--shade-light) | Colors | variable | References the shade light shade. |
| var(--shade-medium) | Colors | variable | References the shade medium shade. |
| var(--shade-ultra-dark-trans-10) | Colors | variable | References the shade ultra dark shade at 10% opacity. |
| var(--shade-ultra-dark-trans-20) | Colors | variable | References the shade ultra dark shade at 20% opacity. |
| var(--shade-ultra-dark-trans-40) | Colors | variable | References the shade ultra dark shade at 40% opacity. |
| var(--shade-ultra-dark-trans-60) | Colors | variable | References the shade ultra dark shade at 60% opacity. |
| var(--shade-ultra-dark-trans-80) | Colors | variable | References the shade ultra dark shade at 80% opacity. |
| var(--shade-ultra-dark-trans-90) | Colors | variable | References the shade ultra dark shade at 90% opacity. |
| var(--shade-ultra-dark) | Colors | variable | References the shade ultra dark shade. |
| var(--shade-ultra-light) | Colors | variable | References the shade ultra light shade. |
| var(--space-l) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to large. |
| var(--space-m) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to medium. |
| var(--space-s) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to small. |
| var(--space-xl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-large. |
| var(--space-xs) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-small. |
| var(--space-xxl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to xx-large. |
| var(--section-space-l) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to large with section multiplier |
| var(--section-space-m) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to medium with section multiplier |
| var(--section-space-s) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to small with section multiplier |
| var(--section-space-xl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-large with section multiplier |
| var(--section-space-xs) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to x-small with section multiplier |
| var(--section-space-xxl) | Padding, Padding--Header, Padding--Sections, Margin, Grid & Flex Gaps | variable | Sets space (padding, margin, gaps) to xx-large with section multiplier |
| var(--text-l) | Text Size | variable | Sets font size to large. |
| var(--text-m) | Text Size | variable | Sets font size to medium. |
| var(--text-s) | Text Size | variable | Sets font size to small. |
| var(--text-xl) | Text Size | variable | Sets font size to x-large. |
| var(--text-xs) | Text Size | variable | Sets font size to x-small. |
| var(--text-xxl) | Text Size | variable | Sets font size to xx-large. |
| var(--width-l) | Width | variable | Sets width to large. |
| var(--width-m) | Width | variable | Sets width to medium. |
| var(--width-s) | Width | variable | Sets width to small. |
| var(--width-xl) | Width | variable | Sets width to x-large. |
| var(--width-xs) | Width | variable | Sets width to x-small. |
| var(--width-xxl) | Width | variable | Sets width to xx-large. |
| width--50 | Width | class | Sets max-width to 50% of vp-max. |
| width--auto | Width | class | Sets width to auto. Very useful for grids that shouldn't be 100% width. |
| width--full | Width | class | Sets max-width to 100%. |
| width--l | Width | class | Sets max-width to 60% of vp-max. |
| width--m | Width | class | Sets max-width to 40% of vp-max. |
| width--s | Width | class | Sets max-width to 20% of vp-max. |
| width--vp-max | Width | class | Sets max-width to 100% of vp-max minus left/right default padding. |
| width--xl | Width | class | Sets max-width to 80% of vp-max. |
| width--xs | Width | class | Sets max-width to 10% of vp-max. |
| width--xxl | Width | class | Sets max-width to 90% of vp-max. |
| z--bottom | Z-Index | class | Sets z-index of an element to -1 |
| z--0 | Z-Index | class | Sets z-index of an element to 0 |
| z--10 | Z-Index | class | Sets z-index of an element to 10 |
| z--20 | Z-Index | class | Sets z-index of an element to 20 |
| z--30 | Z-Index | class | Sets z-index of an element to 30 |
| z--40 | Z-Index | class | Sets z-index of an element to 40 |
| z--50 | Z-Index | class | Sets z-index of an element to 50 |
| z--60 | Z-Index | class | Sets z-index of an element to 60 |
| z--70 | Z-Index | class | Sets z-index of an element to 70 |
| z--80 | Z-Index | class | Sets z-index of an element to 80 |
| z--90 | Z-Index | class | Sets z-index of an element to 90 |
| z--top | Z-Index | class | Sets z-index of an element to 9999 |
| z--xl-bottom | Z-Index | class | Sets z-index of an element to -1 at the XL breakpoint |
| z--xl-0 | Z-Index | class | Sets z-index of an element to 0 at the XL breakpoint |
| z--xl-10 | Z-Index | class | Sets z-index of an element to 10 at the XL breakpoint |
| z--xl-20 | Z-Index | class | Sets z-index of an element to 20 at the XL breakpoint |
| z--xl-30 | Z-Index | class | Sets z-index of an element to 30 at the XL breakpoint |
| z--xl-40 | Z-Index | class | Sets z-index of an element to 40 at the XL breakpoint |
| z--xl-50 | Z-Index | class | Sets z-index of an element to 50 at the XL breakpoint |
| z--xl-60 | Z-Index | class | Sets z-index of an element to 60 at the XL breakpoint |
| z--xl-70 | Z-Index | class | Sets z-index of an element to 70 at the XL breakpoint |
| z--xl-80 | Z-Index | class | Sets z-index of an element to 80 at the XL breakpoint |
| z--xl-90 | Z-Index | class | Sets z-index of an element to 90 at the XL breakpoint |
| z--xl-top | Z-Index | class | Sets z-index of an element to 9999 at the XL breakpoint |
| z--l-bottom | Z-Index | class | Sets z-index of an element to -1 at the L breakpoint |
| z--l-0 | Z-Index | class | Sets z-index of an element to 0 at the L breakpoint |
| z--l-10 | Z-Index | class | Sets z-index of an element to 10 at the L breakpoint |
| z--l-20 | Z-Index | class | Sets z-index of an element to 20 at the L breakpoint |
| z--l-30 | Z-Index | class | Sets z-index of an element to 30 at the L breakpoint |
| z--l-40 | Z-Index | class | Sets z-index of an element to 40 at the L breakpoint |
| z--l-50 | Z-Index | class | Sets z-index of an element to 50 at the L breakpoint |
| z--l-60 | Z-Index | class | Sets z-index of an element to 60 at the L breakpoint |
| z--l-70 | Z-Index | class | Sets z-index of an element to 70 at the L breakpoint |
| z--l-80 | Z-Index | class | Sets z-index of an element to 80 at the L breakpoint |
| z--l-90 | Z-Index | class | Sets z-index of an element to 90 at the L breakpoint |
| z--l-top | Z-Index | class | Sets z-index of an element to 9999 at the L breakpoint |
| z--m-bottom | Z-Index | class | Sets z-index of an element to -1 at the M breakpoint |
| z--m-0 | Z-Index | class | Sets z-index of an element to 0 at the M breakpoint |
| z--m-10 | Z-Index | class | Sets z-index of an element to 10 at the M breakpoint |
| z--m-20 | Z-Index | class | Sets z-index of an element to 20 at the M breakpoint |
| z--m-30 | Z-Index | class | Sets z-index of an element to 30 at the M breakpoint |
| z--m-40 | Z-Index | class | Sets z-index of an element to 40 at the M breakpoint |
| z--m-50 | Z-Index | class | Sets z-index of an element to 50 at the M breakpoint |
| z--m-60 | Z-Index | class | Sets z-index of an element to 60 at the M breakpoint |
| z--m-70 | Z-Index | class | Sets z-index of an element to 70 at the M breakpoint |
| z--m-80 | Z-Index | class | Sets z-index of an element to 80 at the M breakpoint |
| z--m-90 | Z-Index | class | Sets z-index of an element to 90 at the M breakpoint |
| z--m-top | Z-Index | class | Sets z-index of an element to 9999 at the M breakpoint |
| z--s-bottom | Z-Index | class | Sets z-index of an element to -1 at the S breakpoint |
| z--s-0 | Z-Index | class | Sets z-index of an element to 0 at the S breakpoint |
| z--s-10 | Z-Index | class | Sets z-index of an element to 10 at the S breakpoint |
| z--s-20 | Z-Index | class | Sets z-index of an element to 20 at the S breakpoint |
| z--s-30 | Z-Index | class | Sets z-index of an element to 30 at the S breakpoint |
| z--s-40 | Z-Index | class | Sets z-index of an element to 40 at the S breakpoint |
| z--s-50 | Z-Index | class | Sets z-index of an element to 50 at the S breakpoint |
| z--s-60 | Z-Index | class | Sets z-index of an element to 60 at the S breakpoint |
| z--s-70 | Z-Index | class | Sets z-index of an element to 70 at the S breakpoint |
| z--s-80 | Z-Index | class | Sets z-index of an element to 80 at the S breakpoint |
| z--s-90 | Z-Index | class | Sets z-index of an element to 90 at the S breakpoint |
| z--s-top | Z-Index | class | Sets z-index of an element to 9999 at the S breakpoint |
| col-count--1 | Columns | class | Sets column count to 1 |
| col-count--2 | Columns | class | Sets column count to 2 |
| col-count--3 | Columns | class | Sets column count to 3 |
| col-count--4 | Columns | class | Sets column count to 4 |
| col-count--5 | Columns | class | Sets column count to 5 |
| col-count--xl-1 | Columns | class | Sets column count to 1 at the XL breakpoint |
| col-count--xl-2 | Columns | class | Sets column count to 2 at the XL breakpoint |
| col-count--xl-3 | Columns | class | Sets column count to 3 at the XL breakpoint |
| col-count--xl-4 | Columns | class | Sets column count to 4 at the XL breakpoint |
| col-count--xl-5 | Columns | class | Sets column count to 5 at the XL breakpoint |
| col-count--l-1 | Columns | class | Sets column count to 1 at the L breakpoint |
| col-count--l-2 | Columns | class | Sets column count to 2 at the L breakpoint |
| col-count--l-3 | Columns | class | Sets column count to 3 at the L breakpoint |
| col-count--l-4 | Columns | class | Sets column count to 4 at the L breakpoint |
| col-count--l-5 | Columns | class | Sets column count to 5 at the L breakpoint |
| col-count--m-1 | Columns | class | Sets column count to 1 at the M breakpoint |
| col-count--m-2 | Columns | class | Sets column count to 2 at the M breakpoint |
| col-count--m-3 | Columns | class | Sets column count to 3 at the M breakpoint |
| col-count--m-4 | Columns | class | Sets column count to 4 at the M breakpoint |
| col-count--m-5 | Columns | class | Sets column count to 5 at the M breakpoint |
| col-count--s-1 | Columns | class | Sets column count to 1 at the S breakpoint |
| col-count--s-2 | Columns | class | Sets column count to 2 at the S breakpoint |
| col-count--s-3 | Columns | class | Sets column count to 3 at the S breakpoint |
| col-count--s-4 | Columns | class | Sets column count to 4 at the S breakpoint |
| col-count--s-5 | Columns | class | Sets column count to 5 at the S breakpoint |
| col-width--s | Columns | class | Sets minimum column width to user-defined small value |
| col-width--m | Columns | class | Sets minimum column width to user-defined medium value |
| col-width--l | Columns | class | Sets minimum column width to user-defined large value |
| col-rule--dotted | Columns | class | Sets column rule style to dotted |
| col-rule--dashed | Columns | class | Sets column rule style to dashed |
| col-rule--solid | Columns | class | Sets column rule style to solid |
| col-rule--double | Columns | class | Sets column rule style to double |
| col-rule--ridge | Columns | class | Sets column rule style to ridge |
| col-rule--inset | Columns | class | Sets column rule style to inset |
| col-rule--groove | Columns | class | Sets column rule style to groove |
| col-rule--outset | Columns | class | Sets column rule style to outset |
| col-rule--s | Columns | class | Sets column rule width to user-defined small value |
| col-rule--m | Columns | class | Sets column rule width to user-defined medium value |
| col-rule--l | Columns | class | Sets column rule width to user-defined large value |
| col-rule--accent | Columns | class | Sets accent color as column rule color. |
| col-rule--accent-dark | Columns | class | Sets accent dark shade as column rule color. |
| col-rule--accent-light | Columns | class | Sets accent light shade as column rule color. |
| col-rule--accent-medium | Columns | class | Sets accent medium shade as column rule color. |
| col-rule--accent-ultra-dark | Columns | class | Sets accent ultra dark shade as column rule color. |
| col-rule--accent-ultra-light | Columns | class | Sets accent ultra light shade as column rule color. |
| col-rule--base | Columns | class | Sets base color as column rule color. |
| col-rule--base-dark | Columns | class | Sets base dark shade as column rule color. |
| col-rule--base-light | Columns | class | Sets base light shade as column rule color. |
| col-rule--base-medium | Columns | class | Sets base medium shade as column rule color. |
| col-rule--base-ultra-dark | Columns | class | Sets base ultra dark shade as column rule color. |
| col-rule--base-ultra-light | Columns | class | Sets base ultra light shade as column rule color. |
| col-rule--black | Columns | class | Sets black as column rule color. |
| col-rule--primary | Columns | class | Sets primary color as column rule color. |
| col-rule--primary-dark | Columns | class | Sets primary dark shade as column rule color. |
| col-rule--primary-light | Columns | class | Sets primary light shade as column rule color. |
| col-rule--primary-medium | Columns | class | Sets primary medium shade as column rule color. |
| col-rule--primary-ultra-dark | Columns | class | Sets primary ultra dark shade as column rule color. |
| col-rule--primary-ultra-light | Columns | class | Sets primary ultra light shade as column rule color. |
| col-rule--secondary | Columns | class | Sets secondary color as column rule color. |
| col-rule--secondary-dark | Columns | class | Sets secondary dark shade as column rule color. |
| col-rule--secondary-light | Columns | class | Sets secondary light shade as column rule color. |
| col-rule--secondary-medium | Columns | class | Sets secondary medium shade as column rule color. |
| col-rule--secondary-ultra-dark | Columns | class | Sets secondary ultra dark shade as column rule color. |
| col-rule--secondary-ultra-light | Columns | class | Sets secondary ultra light shade as column rule color. |
| col-rule--shade-dark | Columns | class | Sets shade dark as column rule color. |
| col-rule--shade-light | Columns | class | Sets shade light as column rule color. |
| col-rule--shade-medium | Columns | class | Sets shade medium as column rule color. |
| col-rule--shade-ultra-dark | Columns | class | Sets shade ultra dark as column rule color. |
| col-rule--shade-ultra-light | Columns | class | Sets shade ultra light as column rule color. |
| col-span--all | Columns | class | Spans an element across all columns. |
| focus--primary | Accessibility | class | Sets the outline color of focusable elements to primary. |
| focus--secondary | Accessibility | class | Sets the outline color of focusable elements to secondary. |
| focus--accent | Accessibility | class | Sets the outline color of focusable elements to accent. |
| focus--base | Accessibility | class | Sets the outline color of focusable elements to base. |
| focus--shade | Accessibility | class | Sets the outline color of focusable elements to shade. |
| focus--black | Accessibility | class | Sets the outline color of focusable elements to black. |
| focus--white | Accessibility | class | Sets the outline color of focusable elements to white. |
| var(--header-height) | Height | variable | References the height of your sticky header. |
Copied 👌