Utility CSS classes
Use our utility CSS classes to stylize your web elements. Additional shortcuts are available on Bootstrap .
Borders
| Class | Description |
|---|---|
.brd-solid-1 |
solid border style with width of 1px |
.brd-solid-2 |
solid border style with width of 2px |
.brd-solid-3 |
solid border style with width of 3px |
.brd-solid-4 |
solid border style with width of 4px |
.brd-solid-5 |
solid border style with width of 5px |
.brd-dotted-1 |
dotted border style with width of 1px |
.brd-dotted-1-before |
adds 1px dotted border before the content of each selected element(s) |
.brd-dotted-1-after |
adds 1px dotted border after the content of each selected element(s) |
.brd-dotted-1-hover |
1px dotted border style on hover and focus |
.brd-solid-1-before |
adds 1px solid border before the content of each selected element(s) |
.brd-solid-1-after |
adds 1px solid border after the content of each selected element(s) |
.brd-solid-1-hover |
1px solid border style on hover and focus |
.brd-solid-2-before |
adds 2px solid border before the content of each selected element(s) |
.brd-solid-2-after |
adds 2px solid border after the content of each selected element(s) |
.brd-dotted-2-hover |
2px solid border style on hover and focus (dotted style fallback hover) |
.brd-solid-3-before |
adds 3px solid border before the content of each selected element(s) |
.brd-solid-3-after |
adds 3px solid border after the content of each selected element(s) |
.brd-dotted-3-hover |
3px solid border style on hover and focus (dotted style fallback hover) |
.brd-solid-4-before |
adds 4px solid border before the content of each selected element(s) |
.brd-solid-4-after |
adds 4px solid border after the content of each selected element(s) |
.brd-dotted-4-hover |
4px solid border style on hover and focus (dotted style fallback hover) |
.brd-solid-5-before |
adds 5px solid border before the content of each selected element(s) |
.brd-solid-5-after |
adds 5px solid border after the content of each selected element(s) |
.brd-dotted-5-hover |
5px solid border style on hover and focus (dotted style fallback hover) |
.brd-gray |
gray border color (#555) |
.brd-gray-hover |
gray border color on hover and focus |
.brd-gray-light |
light gray border color (#ddd) |
.brd-gray-light-hover |
light gray border color on hover and focus |
.brd-gray-dark |
dark gray border color (#222) |
.brd-gray-dark-hover |
dark gray border color on hover and focus |
.brd-color-default |
default border color |
.brd-color-muted |
muted border color |
.brd-gray-100 |
gray-100 border color (#f3f3f4) |
.brd-gray-200 |
gray-200 border color (#d4d4d7) |
.brd-gray-300 |
gray-300 border color (#bcbbc1) |
.brd-gray-400 |
gray-400 border color (#a4a3ab) |
.brd-gray-500 |
gray-500 border color (#fafafa) |
.brd-gray-600 |
gray-600 border color (#72717c) |
.brd-gray-700 |
gray-700 border color (#5e5e6a) |
.brd-gray-800 |
gray-800 border color (#4a4958) |
.brd-gray-900 |
gray-900 border color (#3b3a48) |
.brd-red |
brand danger red border color (#cd402d) |
.brd-primary |
theme primary border color |
.brd-primary-light |
theme's primary border color 60% tinted |
.brd-primary-dark |
theme primary dark border color |
.brd-standout |
theme standout border color |
.brd-standout-light |
theme standout light border color |
.brd-standout-dark |
theme standout dark border color |
.brd-highlight |
theme highlight border color |
.brd-highlight-light |
theme highlight light border color |
.brd-highlight-dark |
theme highlight dark border color |
.brd-s1 |
theme first secondary border color |
.brd-s2 |
theme second secondary border color |
.brd-s3 |
theme third secondary border color |
.brd-white-before |
adds white border before the content of each selected element(s). |
.brd-white-after |
adds white border after the content of each selected element(s). |
.brd-gray-light-before |
adds light gray before the content of each selected element(s). |
.brd-gray-light-after |
adds light gray border after the content of each selected element(s). |
.brd-transparent-before |
transparent border before the content of each selected element(s). |
.brd-transparent-after |
transparent border after the content of each selected element(s). |
.brd-primary-light-before |
adds primary light border before the content of each selected element(s) |
.brd-primary-light-after |
adds primary light border after the content of each selected element(s) |
.brd-highlight-light-before |
adds highlight light border before the content of each selected element(s) |
.brd-highlight-light-after |
adds highlight light border after the content of each selected element(s) |
.brd-standout-light-before |
adds standout light border before the content of each selected element(s) |
.brd-standout-light-after |
adds standout light border after the content of each selected element(s) |
.brd-secondary-light-before |
adds secondary light border before the content of each selected element(s) |
.brd-secondary-light-after |
adds secondary light border after the content of each selected element(s) |
.brd-0 |
no borders |
.brd-right |
right side solid border style with width of 1px |
.brd-left |
left side solid border style with width of 1px |
.brd-top |
top side solid border style with width of 1px |
.brd-bottom |
bottom side solid border style with width of 1px |
.brd-sm-0 |
no borders on small screens and up (width >= 576px) |
.brd-sm-solid-1 |
1px solid border on small screens and up (width >= 576px) |
.brd-sm-right |
right side solid border style on small screens and up (width >= 576px) |
.brd-sm-left |
left side solid border style on small screens and up (width >= 576px) |
.brd-sm-top |
top side solid border style on small screens and up (width >= 576px) |
.brd-sm-bottom |
bottom side solid border style on small screens and up (width >= 576px) |
.brd-md-0 |
no borders on medium screens and up (width >= 768px) |
.brd-md-solid-1 |
1px solid border on medium screens and up (width >= 768px) |
.brd-md-right |
right side solid border style on medium screens and up (width >= 768px) |
.brd-md-left |
left side solid border style on medium screens and up (width >= 768px) |
.brd-md-top |
top side solid border style on medium screens and up (width >= 768px) |
.brd-md-bottom |
bottom side solid border style on medium screens and up (width >= 768px) |
.brd-lg-0 |
no borders on large screens and up (width >= 992px) |
.brd-lg-solid-1 |
1px solid border on large screens and up (width >= 992px) |
.brd-lg-right |
right side solid border style on large screens and up (width >= 992px) |
.brd-lg-left |
left side solid border style on large screens and up (width >= 992px) |
.brd-lg-top |
top side solid border style on large screens and up (width >= 992px) |
.brd-lg-bottom |
bottom side solid border style on large screens and up (width >= 992px) |
.rounded-50x |
border radius 50% |
.rounded-50 |
border radius 50px |
.rounded-20 |
border radius 20px |
.rounded-15 |
border radius 15px |
.rounded-10 |
border radius 10px |
.rounded-5 |
border radius 5px |
.rounded-4 |
border radius 4px |
.rounded-3 |
border radius 3px |
.rounded-2 |
border radius 2px |
.rounded-0 |
border radius 0px |
Colors and backgrounds
| Class | Description |
|---|---|
.color-black |
color black (#000) |
.color-black-hover |
color black (#000) that shows up on hover and focus |
.color-white |
color white (#FFF) |
.color-white-hover |
color white (#FFF) that shows up on hover and focus |
.color-gray-dark / .color-grey-dark
|
text color (#333 / var(--text-color)) |
.color-gray / .color-grey |
gray color (#555 / var(--gray-700)) |
.color-muted |
muted text color (#555 / var(--text-muted)) |
.color-muted-hover |
muted text color on hover and focus |
.color-light |
light gray text color (var(--gray-600)) |
.color-lighter |
lighter gray text color (var(--gray-100)) |
.color-lightest |
lightest gray text color (var(--gray-50)) |
.text-color |
default text color (var(--text-color)) |
.text-color-hover |
default text color on hover and focus |
.link-color |
theme link color (var(--link-color)) |
.link-color-hover |
theme link color on hover and focus |
.color-red |
brand danger red text color |
.gray-50 |
gray-50 text color |
.gray-50-hover |
gray-50 text color on hover and focus |
.gray-100 |
gray-100 text color |
.gray-100-hover |
gray-100 text color on hover and focus |
.gray-200 |
gray-200 text color |
.gray-200-hover |
gray-200 text color on hover and focus |
.gray-300 |
gray-300 text color |
.gray-300-hover |
gray-300 text color on hover and focus |
.gray-400 |
gray-400 text color |
.gray-400-hover |
gray-400 text color on hover and focus |
.gray-500 |
gray-500 text color |
.gray-500-hover |
gray-500 text color on hover and focus |
.gray-600 |
gray-600 text color |
.gray-600-hover |
gray-600 text color on hover and focus |
.gray-700 |
gray-700 text color |
.gray-700-hover |
gray-700 text color on hover and focus |
.gray-800 |
gray-800 text color |
.gray-800-hover |
gray-800 text color on hover and focus |
.gray-900 |
gray-900 text color |
.gray-900-hover |
gray-900 text color on hover and focus |
.color-highlight / .color-p1 |
highlight theme color |
.color-highlight-hover |
highlight theme color that shows up on hover and focus |
.color-primary / .color-p2 |
primary theme color |
.color-primary-hover /
.color-p2-hover
|
primary theme color that shows up on hover and focus |
.color-primary--hover |
primary theme color that shows up on hover |
.color-standout / .color-p3 |
standout theme color |
.color-standout-hover |
standout theme color that shows up on hover and focus |
.color-s1 |
first secondary theme color |
.color-s1-hover |
first secondary theme color on hover and focus |
.color-s2 |
second secondary theme color (darker version of .color-s1) |
.color-s2-hover |
second secondary theme color on hover and focus |
.color-s3 |
third secondary theme color (darker version of .color-s2) |
.color-s3-hover |
third secondary theme color on hover and focus |
.ca-gov-logo-svg |
logo background SVG helper |
.bg-base-light |
light base background color (white) |
.bg-base-light-hover |
light base background color on hover and focus |
.bg-body |
body background color |
.bg-white |
white background color |
.bg-white-hover |
white background color on hover and focus |
.bg-default |
default background color (gray-50) |
.bg-default-hover |
default background color on hover and focus |
.bg-default-hover-darker |
darker default background color on hover and focus |
.bg-outline-color |
outline default background color |
.bg-gray-light / .bg-grey-light
|
light gray background color (#eee) |
.bg-gray-light-hover /
.bg-grey-light-hover
|
light gray background color (#eee) that shows up on hover and focus |
.bg-gray-light-hover-darker /
.bg-grey-light-hover-darker
|
darker light gray background color on hover and focus |
.bg-gray-lighter / .bg-grey-lighter
|
lighter gray background color (gray-75) |
.bg-gray-lightest /
.bg-grey-lightest
|
lightest gray background color (#f5f5f5) |
.bg-gray-lightest-hover-darker /
.bg-grey-lightest-hover-darker
|
darker lightest gray background color on hover and focus |
.bg-gray-50 |
gray-50 background color |
.bg-gray-50-hover |
gray-50 background color on hover and focus |
.bg-gray-75 |
gray-75 background color |
.bg-gray-75-hover |
gray-75 background color on hover and focus |
.bg-gray-100 |
gray-100 background color |
.bg-gray-100-hover |
gray-100 background color on hover and focus |
.bg-gray-200 |
gray-200 background color |
.bg-gray-200-hover |
gray-200 background color on hover and focus |
.bg-gray-300 |
gray-300 background color |
.bg-gray-300-hover |
gray-300 background color on hover and focus |
.bg-gray-400 |
gray-400 background color |
.bg-gray-400-hover |
gray-400 background color on hover and focus |
.bg-gray-500 |
gray-500 background color |
.bg-gray-500-hover |
gray-500 background color on hover and focus |
.bg-gray-600 |
gray-600 background color |
.bg-gray-600-hover |
gray-600 background color on hover and focus |
.bg-gray-700 |
gray-700 background color |
.bg-gray-700-hover |
gray-700 background color on hover and focus |
.bg-gray-800 |
gray-800 background color |
.bg-gray-800-hover |
gray-800 background color on hover and focus |
.bg-gray-900 |
gray-900 background color |
.bg-gray-900-hover |
gray-900 background color on hover and focus |
.bg-base-dark |
dark base background color (black) |
.bg-base-dark-hover |
dark base background color on hover and focus |
.bg-none |
no background |
.bg-transparent |
transparent background |
.bg-red |
danger red background color |
.bg-alpha-40 |
black background that is 40% transparent |
.bg-alpha-50 |
black background that is 50% transparent |
.bg-alpha-60 |
black background that is 60% transparent |
.bg-alpha-70 |
black background that is 70% transparent |
.bg-alpha-80 |
black background that is 80% transparent |
.bg-alpha-90 |
black background that is 90% transparent |
.bg-highlight / .bg-p1 |
theme's highlight background color |
.bg-highlight-hover |
theme's highlight background color that shows up on hover and focus |
.bg-primary / .bg-p2 |
theme's primary background color |
.bg-primary-hover |
theme's primary background color that shows up on hover and focus |
.bg-standout / .bg-p3 |
theme's standout background color |
.bg-standout-hover |
theme's standout background color that shows up on hover and focus |
.bg-s1 |
theme's first secondary background color |
.bg-s1-hover |
theme's first secondary background color on hover and focus |
.bg-s1-hover-color |
darker version of first secondary background color |
.bg-s2 |
theme's second secondary background color |
.bg-s2-hover |
theme's second secondary background color on hover and focus |
.bg-s2-hover-color |
darker version of second secondary background color |
.bg-s3 |
theme's third secondary background color |
.bg-s3-hover |
theme's third secondary background color on hover and focus |
.bg-s3-hover-color |
darker version of third secondary background color |
.bg-primary-light |
theme's primary background color that is 60% tinted |
.bg-primary-light-hover |
theme's primary background color that is 60% tinted and shows up on hover and focus |
.bg-highlight-light |
theme's highlight background color that is 50% tinted |
.bg-highlight-light-hover |
theme's highlight background color that is 50% tinted and shows up on hover and focus |
.bg-standout-light |
theme's standout background color that is 60% tinted |
.bg-standout-light-hover |
theme's standout background color that is 60% tinted and shows up on hover and focus |
.bg-secondary-light |
theme's secondary background color that is 40% tinted |
.bg-secondary-light-hover |
theme's secondary background color that is 40% tinted and shows up on hover and focus |
.bg-secondary-before |
adds secondary background color before element |
.bg-secondary-after |
adds secondary background color after element |
.bg-highlight-before |
adds highlight background color before element |
.bg-highlight-after |
adds highlight background color after element |
.bg-standout-before |
adds standout background color before element |
.bg-standout-after |
adds standout background color after element |
.bg-primary-before |
adds primary background color before element |
.bg-primary-after |
adds primary background color after element |
.bg-primary-gradient |
theme's primary color linear gradient background |
.bg-highlight-gradient |
theme's highlight color linear gradient background |
.bg-standout-gradient |
theme's standout color linear gradient background |
.bg-secondary-gradient |
theme's secondary color linear gradient background |
.bg-primary-standout-gradient |
theme's primary color and standout color linear gradient background |
.bg-primary-highlight-gradient |
theme's primary color and highlight color linear gradient background |
.bg-standout-highlight-gradient |
theme's standout color and highlight color linear gradient background |
.bg-danger-warning-gradient |
danger color (#D24532) and warning color (#C2570F) linear gradient background |
.bg-info-success-gradient |
info color (#1C7DB5) and success color (#32852E) linear gradient background |
.bg-gray-radialgradient |
light gray color radial gradient background |
.bg-graylight-radialgradient |
lightest gray color radial gradient background |
.bg-primary-radialgradient |
theme's primary color radial gradient background |
.bg-highlight-radialgradient |
theme's highlight color radial gradient background |
.bg-standout-radialgradient |
theme's standout color radial gradient background |
.bg-secondary-radialgradient |
theme's secondary color radial gradient background |
.bg-secondarylight-radialgradient |
theme's lightest secondary color radial gradient background |
.section-default |
Default section background color (gray-50: #fafafa) |
.section-understated |
Understated section background class is using the secondary 1 color as a background. |
.section-overstated |
Overstated section background class is using the primary color as a background and white for text. |
.section-primary |
Primary section background class is using the primary color as a background and white for text. |
.section-standout |
Standout section background class is using the standout color as a background and white for text. |
.section-impact |
Impact section background class is using the standout color as a background and white for text. |
.section-inverted |
Inverted section background class is using the gray-900 (#3b3a48) color as a background and white for text. |
.label-primary |
primary label styling (black text on gray-100 background) |
.label-info |
info label styling (white text on primary background) |
.label-secondary |
secondary label styling (dark gray text on secondary s2 background) |
.label-light |
light label styling (dark gray text on secondary s1 background) |
.label-dark |
dark label styling (white text on standout background) |
.label-warning |
warning label styling (dark gray text on highlight background) |
.text-highlight-primary |
primary text highlight background (secondary s1 background) |
.text-highlight-warning |
warning text highlight background (tinted warning background) |
.text-highlight-dark |
dark text highlight background (white text on standout background) |
Display
| Class | Description |
|---|---|
.d-flex |
display flex |
.d-block |
display block |
.hidden |
display none |
.hidden-up |
opacity 0 |
.overflow-hidden |
overflow hidden |
.overflow-visible |
overflow visible |
.overflow-auto |
overflow auto |
Positioning
| Class | Description |
|---|---|
.pos-rel |
Relative position |
.pos-abs |
Absolute position |
.pos-stc |
Static position |
.pos-fix |
Fixed position |
.sticky |
sticky positioning at top 0 |
.sticky-1 |
sticky positioning at top 3.125rem (~50px) |
.sticky-2 |
sticky positioning at top 6.25rem (~100px) |
.sticky-3 |
sticky positioning at top 7.8rem (~125px) |
.sticky-4 |
sticky positioning at top 9.375rem (~150px) |
.sticky-5 |
sticky positioning at top 10.93rem (~175px) |
.sticky-6 |
sticky positioning at top 12.5rem (~200px) |
.relative-centered |
Centers a relatively positioned item (both vertically and horizontally) |
.relative-centered-x |
Centers a relatively positioned item (horizontally) |
.relative-centered-y |
Centers a relatively positioned item (vertically) |
.absolute-centered |
Centers an absolute-positioned item (both vertically and horizontally) |
.absolute-centered-x |
Centers an absolute-positioned item (horizontally) |
.absolute-centered-y |
Centers an absolute-positioned item (vertically) |
.top-rel-20pct |
move relative positioned element 20% below its normal position |
.top-rel-30pct |
move relative positioned element 30% below its normal position |
.top-rel-40pct |
move relative positioned element 40% below its normal position |
.top-sm-rel-40pct |
move relative positioned element 40% below its normal position in mobile |
.top-md-rel-40pct |
move relative positioned element 40% below its normal position in medium sized devices |
.top-lg-rel-40pct |
move relative positioned element 40% below its normal position in larger devices |
.top-rel-30pct |
move relative positioned element 30% below its normal position |
.top-sm-rel-30pct |
move relative positioned element 30% below its normal position in mobile |
.top-md-rel-30pct |
move relative positioned element 30% below its normal position in medium sized devices |
.top-lg-rel-30pct |
move relative positioned element 30% below its normal position in larger devices |
.top-rel-20pct |
move relative positioned element 20% below its normal position |
.top-sm-rel-20pct |
move relative positioned element 20% below its normal position in mobile |
.top-md-rel-20pct |
move relative positioned element 20% below its normal position in medium sized devices |
.top-lg-rel-20pct |
move relative positioned element 20% below its normal position in larger devices |
.top-rel-10pct |
move relative positioned element 10% below its normal position |
.top-sm-rel-10pct |
move relative positioned element 10% below its normal position in mobile |
.top-md-rel-10pct |
move relative positioned element 10% below its normal position in medium sized devices |
.top-lg-rel-10pct |
move relative positioned element 10% below its normal position in larger devices |
.top-rel-5pct |
move relative positioned element 5% below its normal position |
.top-sm-rel-5pct |
move relative positioned element 5% below its normal position in mobile |
.top-md-rel-5pct |
move relative positioned element 5% below its normal position in medium sized devices |
.top-lg-rel-5pct |
move relative positioned element 5% below its normal position in larger devices |
Sizing
| Class | Description |
|---|---|
.h-auto |
height auto |
.h-100 |
height 100% |
.height-1 |
height 1px |
.height-5 |
height 5px |
.height-10 |
height 10px |
.height-15 |
height 15px |
.height-20 |
height 20px |
.height-30 |
height 30px |
.height-40 |
height 40px |
.height-50 |
height 50px |
.height-60 |
height 60px |
.height-70 |
height 70px |
.height-80 |
height 80px |
.height-100 |
height 100px |
.height-150 |
height 150px |
.height-200 |
height 200px |
.height-250 |
height 250px |
.height-300 |
height 300px |
.height-400 |
height 400px |
.height-500 |
height 500px |
.height-600 |
height 600px |
.w-auto |
width auto |
.w-100 |
width 100% |
.width-1 |
width 1px |
.width-5 |
width 5px |
.width-10 |
width 10px |
.width-15 |
width 15px |
.width-20 |
width 20px |
.width-30 |
width 30px |
.width-40 |
width 40px |
.width-50 |
width 50px |
.width-60 |
width 60px |
.width-70 |
width 70px |
.width-80 |
width 80px |
.width-100 |
width 100px |
.width-150 |
width 150px |
.width-200 |
width 200px |
.width-5pct |
width 5% |
.width-10pct |
width 10% |
.width-15pct |
width 15% |
.width-20pct |
width 20% |
.width-25pct |
width 25% |
.width-30pct |
width 30% |
.width-33pct |
width 33% |
.width-35pct |
width 35% |
.width-40pct |
width 40% |
.width-45pct |
width 45% |
.width-50pct |
width 50% |
.width-60pct |
width 60% |
.width-70pct |
width 70% |
.width-75pct |
width 75% |
.width-80pct |
width 80% |
.width-90pct |
width 90% |
.min-height-5 |
minimum height 0.3125rem (~5px) |
.min-height-10 |
minimum height 0.625rem (~10px) |
.min-height-15 |
minimum height 1rem (~15px) |
.min-height-20 |
minimum height 1.25rem (~20px) |
.min-height-30 |
minimum height 1.875rem (~30px) |
.min-height-50 |
minimum height 3.125rem (~50px) |
.min-height-100 |
minimum height 6.25rem (~100px) |
.min-height-200 |
minimum height 12.5rem (~200px) |
.min-height-300 |
minimum height 18.75rem (~300px) |
.min-height-400 |
minimum height 25rem (~400px) |
Spacing
| Class | Description |
|---|---|
.m-a-0 |
margin all 0 |
.m-t-0 |
margin top 0 |
.m-b-0 |
margin bottom 0 |
.m-r-0 |
margin right 0 |
.m-l-0 |
margin left 0 |
.m-x-0 |
margin left and right 0 |
.m-y-0 |
margin top and bottom 0 |
.m-a |
margin all 1rem |
.m-t |
margin top 1rem |
.m-b |
margin bottom 1rem |
.m-r |
margin right 1rem |
.m-l |
margin left 1rem |
.m-x |
margin left and right 1rem |
.m-y |
margin top and bottom 1rem |
.m-x-auto |
margin right and left auto |
.m-a-sm |
margin all .5rem |
.m-t-sm |
margin top .5rem |
.m-b-sm |
margin bottom .5rem |
.m-r-sm |
margin right .5rem |
.m-l-sm |
margin left .5rem |
.m-x-sm |
margin left and right .5rem |
.m-y-sm |
margin top and bottom .5rem |
.m-a-md |
margin all 1.5rem |
.m-t-md |
margin top 1.5rem |
.m-b-md |
margin bottom 1.5rem |
.m-r-md |
margin right 1.5rem |
.m-l-md |
margin left 1.5rem |
.m-x-md |
margin left and right 1.5rem |
.m-y-md |
margin top and bottom 1.5rem |
.m-a-lg |
margin all 3rem |
.m-t-lg |
margin top 3rem |
.m-b-lg |
margin bottom 3rem |
.m-r-lg |
margin right 3rem |
.m-l-lg |
margin left 3rem |
.m-x-lg |
margin left and right 3rem |
.m-y-lg |
margin top and bottom 3rem |
.m-t-60 |
margin top 4rem (~60px) |
.m-t-80 |
margin top 5rem (~80px) |
.m-t-100 |
margin top 6rem (~100px) |
.m-b-60 |
margin bottom 4rem (~60px) |
.m-b-80 |
margin bottom 5rem (~80px) |
.m-b-100 |
margin bottom 6rem (~100px) |
.p-a-0 |
padding all 0 |
.p-t-0 |
padding top 0 |
.p-b-0 |
padding bottom 0 |
.p-r-0 |
padding right 0 |
.p-l-0 |
padding left 0 |
.p-x-0 |
padding left and right 0 |
.p-y-0 |
padding top and bottom 0 |
.p-a |
padding all 1rem |
.p-t |
padding top 1rem |
.p-b |
padding bottom 1rem |
.p-r |
padding right 1rem |
.p-l |
padding left 1rem |
.p-x |
padding left and right 1rem |
.p-y |
padding top and bottom 1rem |
.p-a-sm |
padding all .5rem |
.p-t-sm |
padding top .5rem |
.p-b-sm |
padding bottom .5rem |
.p-r-sm |
padding right .5rem |
.p-l-sm |
padding left .5rem |
.p-x-sm |
padding left and right .5rem |
.p-y-sm |
padding top and bottom .5rem |
.p-a-md |
padding all 1.5rem |
.p-t-md |
padding top 1.5rem |
.p-b-md |
padding bottom 1.5rem |
.p-r-md |
padding right 1.5rem |
.p-l-md |
padding left 1.5rem |
.p-x-md |
padding left and right 1.5rem |
.p-y-md |
padding top and bottom 1.5rem |
.p-a-lg |
padding all 3rem |
.p-t-lg |
padding top 3rem |
.p-b-lg |
padding bottom 3rem |
.p-r-lg |
padding right 3rem |
.p-l-lg |
padding left 3rem |
.p-x-lg |
padding left and right 3rem |
.p-y-lg |
padding top and bottom 3rem |
.p-t-60 |
padding top 4rem (~60px) |
.p-t-80 |
padding top 5rem (~80px) |
.p-t-100 |
padding top 6rem (~100px) |
.p-b-60 |
padding bottom 4rem (~60px) |
.p-b-80 |
padding bottom 5rem (~80px) |
.p-b-100 |
padding bottom 6rem (~100px) |
.left-0 |
left 0 |
.left-sm |
left .5rem |
.left-n |
left 1rem |
.left-md |
left 1.5rem |
.left-lg |
left 3rem |
.right-0 |
right 0 |
.right-sm |
right .5rem |
.right-n |
right 1rem |
.right-md |
right 1.5rem |
.right-lg |
right 3rem |
.top-0 |
top 0 |
.top-sm |
top .5rem |
.top-n |
top 1rem |
.top-md |
top 1.5rem |
.top-lg |
top 3rem |
.top-minus-5 |
top -5px |
.top-minus-3 |
top -3px |
.top-minus-2 |
top -2px |
.top-minus-1 |
top -1px |
.top-5pct |
top 5% |
.top-10pct |
top 10% |
.top-20pct |
top 20% |
.top-30pct |
top 30% |
.top-40pct |
top 40% |
.top-50pct |
top 50% |
.top-60pct |
top 60% |
.top-70pct |
top 70% |
.top-80pct |
top 80% |
.top-90pct |
top 90% |
.top-100pct |
top 100% |
.bottom-0 |
bottom 0 |
.bottom-sm |
bottom .5rem |
.bottom-n |
bottom 1rem |
.bottom-md |
bottom 1.5rem |
.bottom-lg |
bottom 3rem |
.bottom-minus-5 |
bottom -5px |
.bottom-minus-3 |
bottom -3px |
.bottom-minus-2 |
bottom -2px |
.bottom-minus-1 |
bottom -1px |
.bottom-5pct |
bottom 5% |
.bottom-10pct |
bottom 10% |
.bottom-20pct |
bottom 20% |
.bottom-30pct |
bottom 30% |
.bottom-40pct |
bottom 40% |
.bottom-50pct |
bottom 50% |
.bottom-60pct |
bottom 60% |
.bottom-70pct |
bottom 70% |
.bottom-80pct |
bottom 80% |
.bottom-90pct |
bottom 90% |
.bottom-100pct |
bottom 100% |
Text
| Class | Description |
|---|---|
.text-huge |
font-size 6rem |
.text-5rem |
font-size 5rem |
.text-4rem |
font-size 4rem |
.text-3-5rem |
font-size 3.5rem |
.text-3rem |
font-size 3rem |
.text-2-5rem |
font-size 2.5rem |
.text-2rem |
font-size 2rem |
.text-1-5rem |
font-size 1.5rem |
.text-1rem |
font-size 1rem |
.font-size-sm |
font-size .75rem |
.font-size-70x |
font-size 70% |
.font-size-75x |
font-size 75% |
.font-size-80x |
font-size 80% |
.font-size-85x |
font-size 85% |
.font-size-90x |
font-size 90% |
.font-size-95x |
font-size 95% |
.font-size-11 |
font-size 0.78571rem (11px) |
.font-size-12 |
font-size 0.85714rem (12px) |
.font-size-13 |
font-size 0.92857rem (13px) |
.font-size-14 |
font-size 1rem (14px) |
.font-size-15 |
font-size 1.07143rem (15px) |
.font-size-16 |
font-size 1.14286rem (16px) |
.font-size-20 |
font-size 1.42857rem (20px) |
.font-size-25 |
font-size 1.78571rem (25px) |
.font-size-30 |
font-size 2.14286rem (30px) |
.font-size-40 |
font-size 2.85714rem (40px) |
.line-height-0-8em |
text line height is set to .8em |
.line-height-0-9em |
text line height is set to .9em |
.line-height-1em |
text line height is set to 1em |
.line-height-1-1em |
text line height is set to 1.1em |
.line-height-1-2em |
text line height is set to 1.2em |
.line-height-1-3em |
text line height is set to 1.3em |
.line-height-1-4em |
text line height is set to 1.4em |
.line-height-1-5em |
text line height is set to 1.5em |
.line-height-1-6em |
text line height is set to 1.6em |
.font-weight-200 |
font weight 200 (Extra Light) |
.font-weight-300 |
font weight 300 (Light) |
.font-weight-400 |
font weight 400 (Normal) |
.font-weight-500 |
font weight 500 (Medium) |
.font-weight-600 |
font weight 600 (Semi Bold) |
.font-weight-700 |
font weight 700 (Bold) |
.font-weight-800 |
font weight 800 (Extra Bold) |
.font-weight-900 |
font weight 900 (Black) |
.bold / .text-bold |
font weight bold |
.text-left |
aligns text to the left |
.text-center |
aligns text to the center |
.text-right |
aligns text to the right |
.no-underline |
no underline text decoration property |
.underline |
underline text decoration property |
.underline-hover |
underline text decoration property on hover and on focus |
.underline-focus |
underline text decoration property on focus |
.underline-text-color |
underline of text color (#333) |
.underline-hover-text-color |
underline of text color (#333) that shows up on hover |
.underline-white |
underline of white color (#FFF) |
.underline-hover-white |
underline of white color (#FFF) that shows up on hover |
.underline-black |
underline of black color (#000) |
.underline-hover-black |
underline of black color (#000) that shows up on hover |
.underline-primary |
underline of primary theme color |
.underline-hover-primary |
underline of primary theme color that shows up on hover |
.underline-highlight |
underline of highlight theme color |
.underline-hover-highlight |
underline of highlight theme color that shows up on hover |
.underline-standout |
underline of standout theme color |
.underline-hover-standout |
underline of standout theme color that shows up on hover |
.text-primary |
primary text color (#006CE0) |
.text-success |
success text color (#1F7F35) |
.text-info |
info text color (#117888) |
.text-muted |
muted text color (#555) |
.published |
publication metadata text color (gray-700) |
.text-accent1 |
accent text color 1 (#1b76bb) |
.text-accent2 |
accent text color 2 (#0779b6) |
.text-accent3 |
accent text color 3 (#247f75) |
.text-accent4 |
accent text color 4 (#30812c) |
.text-accent5 |
accent text color 5 (#815ab4) |
.text-accent6 |
accent text color 6 (#b932c8) |
.text-accent7 |
accent text color 7 (#c93e2c) |
.text-accent8 |
accent text color 8 (#bb520c) |
.text-accent9 |
accent text color 9 (#f7e455) |
.text-accent-p1 |
accent highlight text color (theme color p1) |
.text-accent-p2 |
accent primary text color (theme color p2) |
.text-accent-p3 |
accent standout text color (theme color p3) |
.text-accent-s1 |
accent secondary text color 1 (theme color s1) |
.text-accent-s2 |
accent secondary text color 2 (theme color s2) |
.text-accent-s3 |
accent secondary text color 3 (theme color s3) |
.outline-focus |
2px solid blue outline on focus |
.outline-dark-mode-focus |
2px solid dark mode outline on focus |
.outline-block-offset |
2px solid blue outline on focus with outline offset -2px and display block properties |
.outline-offset-2 |
outline offset set to -2px on focus |
.outline-offset-3 |
outline offset set to -3px on focus |
.outline-offset-4 |
outline offset set to -4px on focus |
.outline-offset-5 |
outline offset set to -5px on focus |
.outline-1-gray-100-hover |
1px solid gray-100 outline on hover |
.outline-2-gray-100-hover |
2px solid gray-100 outline on hover |
.outline-1-gray-200-hover |
1px solid gray-200 outline on hover |
.outline-2-gray-200-hover |
2px solid gray-200 outline on hover |
.outline-1-gray-300-hover |
1px solid gray-300 outline on hover |
.outline-2-gray-300-hover |
2px solid gray-300 outline on hover |
.outline-1-gray-400-hover |
1px solid gray-400 outline on hover |
.outline-2-gray-400-hover |
2px solid gray-400 outline on hover |
.cursor-pointer |
cursor pointer |
.link-icon |
icon styling inside links (smaller size and offset top position) |
Transitions and transforms
| Class | Description |
|---|---|
.transform-scale-1_05--hover |
scale up an element by 5% on hover |
.transition-0_3 |
change property values smoothly over .3 seconds |