Base Base Styleguide

Typography

Sans Serif Aa Regular Aa Bold
base-font-family: sans-serif
base-font-size: 16px
base-line-height: 22px
base-font-color: #333
base-font-weight: 400
base-background-color: #fff

Body & Elements

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a blockquote in all its awesomeness and this text can be from a famous author / poet / artist

Unknown author

The a element example
The abbr element and abbr element with title examples
The b element example
The strong element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The sub element example
The sup element example
The u element example
The var element example

Address: this is an example of how the address element looks
  <pre>
    html
  </pre>

Below is a Horizontal Rule

Headings

All Headings base-heading-font-family: sans-serif
Heading 1 <h1> base-h1-font-size: 32px
base-h1-line-height: 38px
class .h1 base-h1-font-size: 32px
base-h1-line-height: 38px
Heading 2 <h2> base-h2-font-size: 26px
base-h2-line-height: 32px
class .h2 base-h2-font-size: 26px
base-h2-line-height: 32px
Heading 3 <h3> base-h3-font-size: 22px
base-h3-line-height: 28px
class .h3 base-h3-font-size: 22px
base-h3-line-height: 28px
Heading 4 <h4> base-h4-font-size: 18px
base-h4-line-height: 24px
class .h4 <h4> base-h4-font-size: 18px
base-h4-line-height: 24px
Heading 5 <h5> base-h5-font-size: 16px
base-h5-line-height: 22px
class .h5 base-h5-font-size: 16px
base-h5-line-height: 22px
Heading 6 <h6> base-h6-font-size: 14px
base-h6-line-height: 20px
class .h6 base-h6-font-size: 14px
base-h6-line-height: 20px

Typography Helpers

Class Outcome
.no-select Disables highlighting and selection for all devices
.font-100 Sets a font weight of 100 for mobile devices and up
.font-200 Sets a font weight of 200 for mobile devices and up
.font-300 Sets a font weight of 300 for mobile devices and up
.font-400 Sets a font weight of 400 for mobile devices and up
.font-500 Sets a font weight of 500 for mobile devices and up
.font-600 Sets a font weight of 600 for mobile devices and up
.font-700 Sets a font weight of 700 for mobile devices and up
.font-800 Sets a font weight of 800 for mobile devices and up
.font-900 Sets a font weight of 900 for mobile devices and up
.uppercase Sets text to Uppercase for all devices
.lowercase Sets text to Lowercase for all devices
.capitalize Sets text to capitalize for all devices
.text-left Aligns text to the left for all devices
.text-right Aligns text to the right for all devices
.text-center Aligns text to the center for all devices
.text-left-m Aligns text to the left for medium devices and up
.text-right-m Aligns text to the right for medium devices and up
.text-center-m Aligns text to the center for medium devices and up
.text-left-l Aligns text to the left for large devices and up
.text-right-l Aligns text to the right for large devices and up
.text-center-l Aligns text to the center for large devices and up
.text-left-xl Aligns text to the left for extra large devices and up
.text-right-xl Aligns text to the right for extra large devices and up
.text-center-xl Aligns text to the center for extra large devices and up

Tables

Table Heading 1 Table Heading 2
Table data cell Table data cell
Table data cell Table data cell

Forms

Legend

Containers

Styles for containers for all breakpoints.

Class Purpose Example Outcome
.container Apply a .container <div class="container">This is a container for all breakpoints</div> Applies a .container to a div element for all breakpoints
.container-m Apply a .container-m <div class="container-m">This is a container for medium devices and above</div> Applies a .container-m to a div element for medium devices and above
.container-l Apply a .container-l <div class="container-l">This is a container for large devices and above</div> Applies a .container-l to a div element for large devices and above
.container-xl Apply a .container-xl <div class="container-xl">This is a container for extra large devices and above</div> Applies a .container-xl to a div element for extra large devices and above
This is a .container which is applied for mobile and above breakpoints
This is a .container-m which is applied for medium devices and above (full width for mobile. Medium width for medium devices and above)
This is a .container-l which is applied for large devices and above (full width for mobile. Large width for large devices and above)
This is a .container-xl which is applied for extra large devices and above (full width for mobile. Extra Large width for extra large devices and above)

Grid

Contains styles for flex grids, rows and basic columns for all breakpoints.

Class Purpose Example Outcome
.row Apply a .row when wrapping columns <div class="row">This needs to be wrapped around columns.</div> Applies a .row to a div element which has a negative margin left and right of the gutter spacing for all breakpoints
.col-1 Apply a .col-1 <div class="col-1">Column</div> Applies a .col-1 to a div element which has a padding left and right of gutter spacing and a width of 8.33333% for all breakpoints
.col-2 Apply a .col-2 <div class="col-2">Column</div> Applies a .col-2 to a div element which has a padding left and right of gutter spacing and a width of 16.66667% for all breakpoints
.col-3 Apply a .col-3 <div class="col-3">Column</div> Applies a .col-3 to a div element which has a padding left and right of gutter spacing and a width of 25%
.col-4 Apply a .col-4 <div class="col-4">Column</div> Applies a .col-4 to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for all breakpoints
.col-5 Apply a .col-5 <div class="col-5">Column</div> Applies a .col-5 to a div element which has a padding left and right of gutter spacing and a width of 41.66667% for all breakpoints
.col-6 Apply a .col-6 <div class="col-6">Column</div> Applies a .col-6 to a div element which has a padding left and right of gutter spacing and a width of 50% for all breakpoints
.col-7 Apply a .col-7 <div class="col-7">Column</div> Applies a .col-7 to a div element which has a padding left and right of gutter spacing and a width of 58.33333% for all breakpoints
.col-8 Apply a .col-8 <div class="col-8">Column</div> Applies a .col-8 to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for all breakpoints
.col-9 Apply a .col-9 <div class="col-9">Column</div> Applies a .col-9 to a div element which has a padding left and right of gutter spacing and a width of 75% for all breakpoints
.col-10 Apply a .col-10 <div class="col-10">Column</div> Applies a .col-10 to a div element which has a padding left and right of gutter spacing and a width of 83.33333% for all breakpoints
.col-11 Apply a .col-11 <div class="col-11">Column</div> Applies a .col-11 to a div element which has a padding left and right of gutter spacing and a width of 91.66667% for all breakpoints
.col-12 Apply a .col-12 <div class="col-12">Column</div> Applies a .col-12 to a div element which has a padding left and right of gutter spacing and a width of 100% for all breakpoints
.col-1-2 Apply a .col-1-2 <div class="col-1-2">Column</div> Applies a .col-1-2 to a div element which has a padding left and right of gutter spacing and a width of 50% for all breakpoints
.col-1-3 Apply a .col-1-3 <div class="col-1-3">Column</div> Applies a .col-1-3 to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for all breakpoints
.col-2-3 Apply a .col-2-3 <div class="col-2-3">Column</div> Applies a .col-2-3 to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for all breakpoints
.col-1-4 Apply a .col-1-4 <div class="col-1-4">Column</div> Applies a .col-1-4 to a div element which has a padding left and right of gutter spacing and a width of 25% for all breakpoints
.col-3-4 Apply a .col-3-4 <div class="col-3-4">Column</div> Applies a .col-3-4 to a div element which has a padding left and right of gutter spacing and a width of 75% for all breakpoints
.col-1-5 Apply a .col-1-5 <div class="col-1-5">Column</div> Applies a .col-1-5 to a div element which has a padding left and right of gutter spacing and a width of 20% for all breakpoints
.col-2-5 Apply a .col-2-5 <div class="col-2-5">Column</div> Applies a .col-2-5 to a div element which has a padding left and right of gutter spacing and a width of 40% for all breakpoints
.col-3-5 Apply a .col-3-5 <div class="col-3-5">Column</div> Applies a .col-3-5 to a div element which has a padding left and right of gutter spacing and a width of 60% for all breakpoints
.col-4-5 Apply a .col-4-5 <div class="col-4-5">Column</div> Applies a .col-4-5 to a div element which has a padding left and right of gutter spacing and a width of 80% for all breakpoints
.col-full Apply a .col-full <div class="col-full">Column</div> Applies a .col-full to a div element which has a padding left and right of gutter spacing and a width of 100% for all breakpoints
.row-m Apply a .row-m when wrapping columns <div class="row-m">This needs to be wrapped around columns.</div> Applies a .row-m to a div element which has a negative margin left and right of the gutter spacing for medium devices and up
.col-1-m Apply a .col-1-m <div class="col-1-m">Column</div> Applies a .col-1-m to a div element which has a padding left and right of gutter spacing and a width of 8.33333% for medium devices and up
.col-2-m Apply a .col-2-m <div class="col-2-m">Column</div> Applies a .col-2-m to a div element which has a padding left and right of gutter spacing and a width of 16.66667% for medium devices and up
.col-3-m Apply a .col-3-m <div class="col-3-m">Column</div> Applies a .col-3-m to a div element which has a padding left and right of gutter spacing and a width of 25%
.col-4-m Apply a .col-4-m <div class="col-4-m">Column</div> Applies a .col-4-m to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for medium devices and up
.col-5-m Apply a .col-5-m <div class="col-5-m">Column</div> Applies a .col-5-m to a div element which has a padding left and right of gutter spacing and a width of 41.66667% for medium devices and up
.col-6-m Apply a .col-6-m <div class="col-6-m">Column</div> Applies a .col-6-m to a div element which has a padding left and right of gutter spacing and a width of 50% for medium devices and up
.col-7-m Apply a .col-7-m <div class="col-7-m">Column</div> Applies a .col-7-m to a div element which has a padding left and right of gutter spacing and a width of 58.33333% for medium devices and up
.col-8-m Apply a .col-8-m <div class="col-8-m">Column</div> Applies a .col-8-m to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for medium devices and up
.col-9-m Apply a .col-9-m <div class="col-9-m">Column</div> Applies a .col-9-m to a div element which has a padding left and right of gutter spacing and a width of 75% for medium devices and up
.col-10-m Apply a .col-10-m <div class="col-10-m">Column</div> Applies a .col-10-m to a div element which has a padding left and right of gutter spacing and a width of 83.33333% for medium devices and up
.col-11-m Apply a .col-11-m <div class="col-11-m">Column</div> Applies a .col-11-m to a div element which has a padding left and right of gutter spacing and a width of 91.66667% for medium devices and up
.col-12-m Apply a .col-12-m <div class="col-12-m">Column</div> Applies a .col-12-m to a div element which has a padding left and right of gutter spacing and a width of 100% for medium devices and up
.col-1-2-m Apply a .col-1-2-m <div class="col-1-2-m">Column</div> Applies a .col-1-2-m to a div element which has a padding left and right of gutter spacing and a width of 50% for medium devices and up
.col-1-3-m Apply a .col-1-3-m <div class="col-1-3-m">Column</div> Applies a .col-1-3-m to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for medium devices and up
.col-2-3-m Apply a .col-2-3-m <div class="col-2-3-m">Column</div> Applies a .col-2-3-m to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for medium devices and up
.col-1-4-m Apply a .col-1-4-m <div class="col-1-4-m">Column</div> Applies a .col-1-4-m to a div element which has a padding left and right of gutter spacing and a width of 25% for medium devices and up
.col-3-4-m Apply a .col-3-4-m <div class="col-3-4-m">Column</div> Applies a .col-3-4-m to a div element which has a padding left and right of gutter spacing and a width of 75% for medium devices and up
.col-1-5-m Apply a .col-1-5-m <div class="col-1-5-m">Column</div> Applies a .col-1-5-m to a div element which has a padding left and right of gutter spacing and a width of 20% for medium devices and up
.col-2-5-m Apply a .col-2-5-m <div class="col-2-5-m">Column</div> Applies a .col-2-5-m to a div element which has a padding left and right of gutter spacing and a width of 40% for medium devices and up
.col-3-5-m Apply a .col-3-5-m <div class="col-3-5-m">Column</div> Applies a .col-3-5-m to a div element which has a padding left and right of gutter spacing and a width of 60% for medium devices and up
.col-4-5-m Apply a .col-4-5-m <div class="col-4-5-m">Column</div> Applies a .col-4-5-m to a div element which has a padding left and right of gutter spacing and a width of 80% for medium devices and up
.col-full-m Apply a .col-full-m <div class="col-full-m">Column</div> Applies a .col-full-m to a div element which has a padding left and right of gutter spacing and a width of 100% for medium devices and up
.row-l Apply a .row-l when wrapping columns <div class="row-l">This needs to be wrapped around columns.</div> Applies a .row-l to a div element which has a negative margin left and right of the gutter spacing for large devices and up
.col-1-l Apply a .col-1-l <div class="col-1-l">Column</div> Applies a .col-1-l to a div element which has a padding left and right of gutter spacing and a width of 8.33333% for large devices and up
.col-2-l Apply a .col-2-l <div class="col-2-l">Column</div> Applies a .col-2-l to a div element which has a padding left and right of gutter spacing and a width of 16.66667% for large devices and up
.col-3-l Apply a .col-3-l <div class="col-3-l">Column</div> Applies a .col-3-l to a div element which has a padding left and right of gutter spacing and a width of 25%
.col-4-l Apply a .col-4-l <div class="col-4-l">Column</div> Applies a .col-4-l to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for large devices and up
.col-5-l Apply a .col-5-l <div class="col-5-l">Column</div> Applies a .col-5-l to a div element which has a padding left and right of gutter spacing and a width of 41.66667% for large devices and up
.col-6-l Apply a .col-6-l <div class="col-6-l">Column</div> Applies a .col-6-l to a div element which has a padding left and right of gutter spacing and a width of 50% for large devices and up
.col-7-l Apply a .col-7-l <div class="col-7-l">Column</div> Applies a .col-7-l to a div element which has a padding left and right of gutter spacing and a width of 58.33333% for large devices and up
.col-8-l Apply a .col-8-l <div class="col-8-l">Column</div> Applies a .col-8-l to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for large devices and up
.col-9-l Apply a .col-9-l <div class="col-9-l">Column</div> Applies a .col-9-l to a div element which has a padding left and right of gutter spacing and a width of 75% for large devices and up
.col-10-l Apply a .col-10-l <div class="col-10-l">Column</div> Applies a .col-10-l to a div element which has a padding left and right of gutter spacing and a width of 83.33333% for large devices and up
.col-11-l Apply a .col-11-l <div class="col-11-l">Column</div> Applies a .col-11-l to a div element which has a padding left and right of gutter spacing and a width of 91.66667% for large devices and up
.col-12-l Apply a .col-12-l <div class="col-12-l">Column</div> Applies a .col-12-l to a div element which has a padding left and right of gutter spacing and a width of 100% for large devices and up
.col-1-2-l Apply a .col-1-2-l <div class="col-1-2-l">Column</div> Applies a .col-1-2-l to a div element which has a padding left and right of gutter spacing and a width of 50% for large devices and up
.col-1-3-l Apply a .col-1-3-l <div class="col-1-3-l">Column</div> Applies a .col-1-3-l to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for large devices and up
.col-2-3-l Apply a .col-2-3-l <div class="col-2-3-l">Column</div> Applies a .col-2-3-l to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for large devices and up
.col-1-4-l Apply a .col-1-4-l <div class="col-1-4-l">Column</div> Applies a .col-1-4-l to a div element which has a padding left and right of gutter spacing and a width of 25% for large devices and up
.col-3-4-l Apply a .col-3-4-l <div class="col-3-4-l">Column</div> Applies a .col-3-4-l to a div element which has a padding left and right of gutter spacing and a width of 75% for large devices and up
.col-1-5-l Apply a .col-1-5-l <div class="col-1-5-l">Column</div> Applies a .col-1-5-l to a div element which has a padding left and right of gutter spacing and a width of 20% for large devices and up
.col-2-5-l Apply a .col-2-5-l <div class="col-2-5-l">Column</div> Applies a .col-2-5-l to a div element which has a padding left and right of gutter spacing and a width of 40% for large devices and up
.col-3-5-l Apply a .col-3-5-l <div class="col-3-5-l">Column</div> Applies a .col-3-5-l to a div element which has a padding left and right of gutter spacing and a width of 60% for large devices and up
.col-4-5-l Apply a .col-4-5-l <div class="col-4-5-l">Column</div> Applies a .col-4-5-l to a div element which has a padding left and right of gutter spacing and a width of 80% for large devices and up
.col-full-l Apply a .col-full-l <div class="col-full-l">Column</div> Applies a .col-full-l to a div element which has a padding left and right of gutter spacing and a width of 100% for large devices and up
.row-xl Apply a .row-xl when wrapping columns <div class="row-xl">This needs to be wrapped around columns.</div> Applies a .row-xl to a div element which has a negative margin left and right of the gutter spacing for extra large devices and up
.col-1-xl Apply a .col-1-xl <div class="col-1-xl">Column</div> Applies a .col-1-xl to a div element which has a padding left and right of gutter spacing and a width of 8.33333% for extra large devices and up
.col-2-xl Apply a .col-2-xl <div class="col-2-xl">Column</div> Applies a .col-2-xl to a div element which has a padding left and right of gutter spacing and a width of 16.66667% for extra large devices and up
.col-3-xl Apply a .col-3-xl <div class="col-3-xl">Column</div> Applies a .col-3-xl to a div element which has a padding left and right of gutter spacing and a width of 25%
.col-4-xl Apply a .col-4-xl <div class="col-4-xl">Column</div> Applies a .col-4-xl to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for extra large devices and up
.col-5-xl Apply a .col-5-xl <div class="col-5-xl">Column</div> Applies a .col-5-xl to a div element which has a padding left and right of gutter spacing and a width of 41.66667% for extra large devices and up
.col-6-xl Apply a .col-6-xl <div class="col-6-xl">Column</div> Applies a .col-6-xl to a div element which has a padding left and right of gutter spacing and a width of 50% for extra large devices and up
.col-7-xl Apply a .col-7-xl <div class="col-7-xl">Column</div> Applies a .col-7-xl to a div element which has a padding left and right of gutter spacing and a width of 58.33333% for extra large devices and up
.col-8-xl Apply a .col-8-xl <div class="col-8-xl">Column</div> Applies a .col-8-xl to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for extra large devices and up
.col-9-xl Apply a .col-9-xl <div class="col-9-xl">Column</div> Applies a .col-9-xl to a div element which has a padding left and right of gutter spacing and a width of 75% for extra large devices and up
.col-10-xl Apply a .col-10-xl <div class="col-10-xl">Column</div> Applies a .col-10-xl to a div element which has a padding left and right of gutter spacing and a width of 83.33333% for extra large devices and up
.col-11-xl Apply a .col-11-xl <div class="col-11-xl">Column</div> Applies a .col-11-xl to a div element which has a padding left and right of gutter spacing and a width of 91.66667% for extra large devices and up
.col-12-xl Apply a .col-12-xl <div class="col-12-xl">Column</div> Applies a .col-12-xl to a div element which has a padding left and right of gutter spacing and a width of 100% for extra large devices and up
.col-1-2-xl Apply a .col-1-2-xl <div class="col-1-2-xl">Column</div> Applies a .col-1-2-xl to a div element which has a padding left and right of gutter spacing and a width of 50% for extra large devices and up
.col-1-3-xl Apply a .col-1-3-xl <div class="col-1-3-xl">Column</div> Applies a .col-1-3-xl to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for extra large devices and up
.col-2-3-xl Apply a .col-2-3-xl <div class="col-2-3-xl">Column</div> Applies a .col-2-3-xl to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for extra large devices and up
.col-1-4-xl Apply a .col-1-4-xl <div class="col-1-4-xl">Column</div> Applies a .col-1-4-xl to a div element which has a padding left and right of gutter spacing and a width of 25% for extra large devices and up
.col-3-4-xl Apply a .col-3-4-xl <div class="col-3-4-xl">Column</div> Applies a .col-3-4-xl to a div element which has a padding left and right of gutter spacing and a width of 75% for extra large devices and up
.col-1-5-xl Apply a .col-1-5-xl <div class="col-1-5-xl">Column</div> Applies a .col-1-5-xl to a div element which has a padding left and right of gutter spacing and a width of 20% for extra large devices and up
.col-2-5-xl Apply a .col-2-5-xl <div class="col-2-5-xl">Column</div> Applies a .col-2-5-xl to a div element which has a padding left and right of gutter spacing and a width of 40% for extra large devices and up
.col-3-5-xl Apply a .col-3-5-xl <div class="col-3-5-xl">Column</div> Applies a .col-3-5-xl to a div element which has a padding left and right of gutter spacing and a width of 60% for extra large devices and up
.col-4-5-xl Apply a .col-4-5-xl <div class="col-4-5-xl">Column</div> Applies a .col-4-5-xl to a div element which has a padding left and right of gutter spacing and a width of 80% for extra large devices and up
.col-full-xl Apply a .col-full-xl <div class="col-full-xl">Column</div> Applies a .col-full-xl to a div element which has a padding left and right of gutter spacing and a width of 100% for extra large devices and up

Grid .col-*

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
2
5
6
6
7
5
8
4
9
3
10
2
11
1
12
1-2
1-2
1-3
1-3
1-3
1-4
1-4
1-4
1-4
1-5
1-5
1-5
1-5
1-5
2-3
1-3
3-4
1-4
2-5
3-5
4-5
1-5

Grid Medium Devices - .col-*-m

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
2
5
6
6
7
5
8
4
9
3
10
2
11
1
12
1-2
1-2
1-3
1-3
1-3
1-4
1-4
1-4
1-4
1-5
1-5
1-5
1-5
1-5
2-3
1-3
3-4
1-4
2-5
3-5
4-5
1-5

Grid Large Devices - .col-*-l

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
2
5
6
6
7
5
8
4
9
3
10
2
11
1
12
1-2
1-2
1-3
1-3
1-3
1-4
1-4
1-4
1-4
1-5
1-5
1-5
1-5
1-5
2-3
1-3
3-4
1-4
2-5
3-5
4-5
1-5

Grid Extra Large Devices - .col-*-xl

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
2
5
6
6
7
5
8
4
9
3
10
2
11
1
12
1-2
1-2
1-3
1-3
1-3
1-4
1-4
1-4
1-4
1-5
1-5
1-5
1-5
1-5
2-3
1-3
3-4
1-4
2-5
3-5
4-5
1-5

Horizontal Spacers

Includes helpers for adding horizontally spaced rows (.padding-left-0-25rem, .padding-right-1-5rem, etc) for all breakpoints.

Class Purpose Example
.padding-left-0-25rem Applies padding left of 0.25rem for all devices <div class="padding-left-0-25rem"><div>
.padding-left-0-5rem Applies padding left of 0.5rem for all devices <div class="padding-left-0-5rem"><div>
.padding-left-1rem Applies padding left of 1rem for all devices <div class="padding-left-1rem"><div>
.padding-left-1-5rem Applies padding left of 1.5rem for all devices <div class="padding-left-1-5rem"><div>
.padding-left-2rem Applies padding left of 2rem for all devices <div class="padding-left-2rem"><div>
.padding-left-3rem Applies padding left of 3rem for all devices <div class="padding-left-3rem"><div>
.padding-left-4rem Applies padding left of 4rem for all devices <div class="padding-left-4rem"><div>
.padding-left-5rem Applies padding left of 5rem for all devices <div class="padding-left-5rem"><div>
.padding-right-0-25rem Applies padding right of 0.25rem for all devices <div class="padding-right-0-25rem"><div>
.padding-right-0-5rem Applies padding right of 0.5rem for all devices <div class="padding-right-0-5rem"><div>
.padding-right-1rem Applies padding right of 1rem for all devices <div class="padding-right-1rem"><div>
.padding-right-1-5rem Applies padding right of 1.5rem for all devices <div class="padding-right-1-5rem"><div>
.padding-right-2rem Applies padding right of 2rem for all devices <div class="padding-right-2rem"><div>
.padding-right-3rem Applies padding right of 3rem for all devices <div class="padding-right-3rem"><div>
.padding-right-4rem Applies padding right of 4rem for all devices <div class="padding-right-4rem"><div>
.padding-right-5rem Applies padding right of 5rem for all devices <div class="padding-right-5rem"><div>
.padding-left-0-25rem-m Applies padding left of 0.25rem for medium devices and up <div class="padding-left-0-25rem-m"><div>
.padding-left-0-5rem-m Applies padding left of 0.5rem for medium devices and up <div class="padding-left-0-5rem-m"><div>
.padding-left-1rem-m Applies padding left of 1rem for medium devices and up <div class="padding-left-1rem-m"><div>
.padding-left-1-5rem-m Applies padding left of 1.5rem for medium devices and up <div class="padding-left-1-5rem-m"><div>
.padding-left-2rem-m Applies padding left of 2rem for medium devices and up <div class="padding-left-2rem-m"><div>
.padding-left-3rem-m Applies padding left of 3rem for medium devices and up <div class="padding-left-3rem-m"><div>
.padding-left-4rem-m Applies padding left of 4rem for medium devices and up <div class="padding-left-4rem-m"><div>
.padding-left-5rem-m Applies padding left of 5rem for medium devices and up <div class="padding-left-5rem-m"><div>
.padding-right-0-25rem-m Applies padding right of 0.25rem for medium devices and up <div class="padding-right-0-25rem-m"><div>
.padding-right-0-5rem-m Applies padding right of 0.5rem for medium devices and up <div class="padding-right-0-5rem-m"><div>
.padding-right-1rem-m Applies padding right of 1rem for medium devices and up <div class="padding-right-1rem-m"><div>
.padding-right-1-5rem-m Applies padding right of 1.5rem for medium devices and up <div class="padding-right-1-5rem-m"><div>
.padding-right-2rem-m Applies padding right of 2rem for medium devices and up <div class="padding-right-2rem-m"><div>
.padding-right-3rem-m Applies padding right of 3rem for medium devices and up <div class="padding-right-3rem-m"><div>
.padding-right-4rem-m Applies padding right of 4rem for medium devices and up <div class="padding-right-4rem-m"><div>
.padding-right-5rem-m Applies padding right of 5rem for medium devices and up <div class="padding-right-5rem-m"><div>
.padding-left-0-25rem-l Applies padding left of 0.25rem for large devices and up <div class="padding-left-0-25rem-l"><div>
.padding-left-0-5rem-l Applies padding left of 0.5rem for large devices and up <div class="padding-left-0-5rem-l"><div>
.padding-left-1rem-l Applies padding left of 1rem for large devices and up <div class="padding-left-1rem-l"><div>
.padding-left-1-5rem-l Applies padding left of 1.5rem for large devices and up <div class="padding-left-1-5rem-l"><div>
.padding-left-2rem-l Applies padding left of 2rem for large devices and up <div class="padding-left-2rem-l"><div>
.padding-left-3rem-l Applies padding left of 3rem for large devices and up <div class="padding-left-3rem-l"><div>
.padding-left-4rem-l Applies padding left of 4rem for large devices and up <div class="padding-left-4rem-l"><div>
.padding-left-5rem-l Applies padding left of 5rem for large devices and up <div class="padding-left-5rem-l"><div>
.padding-right-0-25rem-l Applies padding right of 0.25rem for large devices and up <div class="padding-right-0-25rem-l"><div>
.padding-right-0-5rem-l Applies padding right of 0.5rem for large devices and up <div class="padding-right-0-5rem-l"><div>
.padding-right-1rem-l Applies padding right of 1rem for large devices and up <div class="padding-right-1rem-l"><div>
.padding-right-1-5rem-l Applies padding right of 1.5rem for large devices and up <div class="padding-right-1-5rem-l"><div>
.padding-right-2rem-l Applies padding right of 2rem for large devices and up <div class="padding-right-2rem-l"><div>
.padding-right-3rem-l Applies padding right of 3rem for large devices and up <div class="padding-right-3rem-l"><div>
.padding-right-4rem-l Applies padding right of 4rem for large devices and up <div class="padding-right-4rem-l"><div>
.padding-right-5rem-l Applies padding right of 5rem for large devices and up <div class="padding-right-5rem-l"><div>
.padding-left-0-25rem-xl Applies padding left of 0.25rem for extra large devices and up <div class="padding-left-0-25rem-xl"><div>
.padding-left-0-5rem-xl Applies padding left of 0.5rem for extra large devices and up <div class="padding-left-0-5rem-xl"><div>
.padding-left-1rem-xl Applies padding left of 1rem for extra large devices and up <div class="padding-left-1rem-xl"><div>
.padding-left-1-5rem-xl Applies padding left of 1.5rem for extra large devices and up <div class="padding-left-1-5rem-xl"><div>
.padding-left-2rem-xl Applies padding left of 2rem for extra large devices and up <div class="padding-left-2rem-xl"><div>
.padding-left-3rem-xl Applies padding left of 3rem for extra large devices and up <div class="padding-left-3rem-xl"><div>
.padding-left-4rem-xl Applies padding left of 4rem for extra large devices and up <div class="padding-left-4rem-xl"><div>
.padding-left-5rem-xl Applies padding left of 5rem for extra large devices and up <div class="padding-left-5rem-xl"><div>
.padding-right-0-25rem-xl Applies padding right of 0.25rem for extra large devices and up <div class="padding-right-0-25rem-xl"><div>
.padding-right-0-5rem-xl Applies padding right of 0.5rem for extra large devices and up <div class="padding-right-0-5rem-xl"><div>
.padding-right-1rem-xl Applies padding right of 1rem for extra large devices and up <div class="padding-right-1rem-xl"><div>
.padding-right-1-5rem-xl Applies padding right of 1.5rem for extra large devices and up <div class="padding-right-1-5rem-xl"><div>
.padding-right-2rem-xl Applies padding right of 2rem for extra large devices and up <div class="padding-right-2rem-xl"><div>
.padding-right-3rem-xl Applies padding right of 3rem for extra large devices and up <div class="padding-right-3rem-xl"><div>
.padding-right-4rem-xl Applies padding right of 4rem for extra large devices and up <div class="padding-right-4rem-xl"><div>
.padding-right-5rem-xl Applies padding right of 5rem for extra large devices and up <div class="padding-right-5rem-xl"><div>

Vertical Spacers

Includes helpers for adding vertical spaced rows (.padding-top-0-25rem, .padding-bottom-1-5rem, etc) for all breakpoints.

Class Purpose Example
.padding-top-0-25rem Applies padding top of 0.25rem for all devices <div class="padding-top-0-25rem"><div>
.padding-top-0-5rem Applies padding top of 0.5rem for all devices <div class="padding-top-0-5rem"><div>
.padding-top-1rem Applies padding top of 1rem for all devices <div class="padding-top-1rem"><div>
.padding-top-1-5rem Applies padding top of 1.5rem for all devices <div class="padding-top-1-5rem"><div>
.padding-top-2rem Applies padding top of 2rem for all devices <div class="padding-top-2rem"><div>
.padding-top-3rem Applies padding top of 3rem for all devices <div class="padding-top-3rem"><div>
.padding-top-4rem Applies padding top of 4rem for all devices <div class="padding-top-4rem"><div>
.padding-top-5rem Applies padding top of 5rem for all devices <div class="padding-top-5rem"><div>
.padding-bottom-0-25rem Applies padding bottom of 0.25rem for all devices <div class="padding-bottom-0-25rem"><div>
.padding-bottom-0-5rem Applies padding bottom of 0.5rem for all devices <div class="padding-bottom-0-5rem"><div>
.padding-bottom-1rem Applies padding bottom of 1rem for all devices <div class="padding-bottom-1rem"><div>
.padding-bottom-1-5rem Applies padding bottom of 1.5rem for all devices <div class="padding-bottom-1-5rem"><div>
.padding-bottom-2rem Applies padding bottom of 2rem for all devices <div class="padding-bottom-2rem"><div>
.padding-bottom-3rem Applies padding bottom of 3rem for all devices <div class="padding-bottom-3rem"><div>
.padding-bottom-4rem Applies padding bottom of 4rem for all devices <div class="padding-bottom-4rem"><div>
.padding-bottom-5rem Applies padding bottom of 5rem for all devices <div class="padding-bottom-5rem"><div>
.padding-top-0-25rem-m Applies padding top of 0.25rem for medium devices and up <div class="padding-top-0-25rem-m"><div>
.padding-top-0-5rem-m Applies padding top of 0.5rem for medium devices and up <div class="padding-top-0-5rem-m"><div>
.padding-top-1rem-m Applies padding top of 1rem for medium devices and up <div class="padding-top-1rem-m"><div>
.padding-top-1-5rem-m Applies padding top of 1.5rem for medium devices and up <div class="padding-top-1-5rem-m"><div>
.padding-top-2rem-m Applies padding top of 2rem for medium devices and up <div class="padding-top-2rem-m"><div>
.padding-top-3rem-m Applies padding top of 3rem for medium devices and up <div class="padding-top-3rem-m"><div>
.padding-top-4rem-m Applies padding top of 4rem for medium devices and up <div class="padding-top-4rem-m"><div>
.padding-top-5rem-m Applies padding top of 5rem for medium devices and up <div class="padding-top-5rem-m"><div>
.padding-bottom-0-25rem-m Applies padding bottom of 0.25rem for medium devices and up <div class="padding-bottom-0-25rem-m"><div>
.padding-bottom-0-5rem-m Applies padding bottom of 0.5rem for medium devices and up <div class="padding-bottom-0-5rem-m"><div>
.padding-bottom-1rem-m Applies padding bottom of 1rem for medium devices and up <div class="padding-bottom-1rem-m"><div>
.padding-bottom-1-5rem-m Applies padding bottom of 1.5rem for medium devices and up <div class="padding-bottom-1-5rem-m"><div>
.padding-bottom-2rem-m Applies padding bottom of 2rem for medium devices and up <div class="padding-bottom-2rem-m"><div>
.padding-bottom-3rem-m Applies padding bottom of 3rem for medium devices and up <div class="padding-bottom-3rem-m"><div>
.padding-bottom-4rem-m Applies padding bottom of 4rem for medium devices and up <div class="padding-bottom-4rem-m"><div>
.padding-bottom-5rem-m Applies padding bottom of 5rem for medium devices and up <div class="padding-bottom-5rem-m"><div>
.padding-top-0-25rem-l Applies padding top of 0.25rem for large devices and up <div class="padding-top-0-25rem-l"><div>
.padding-top-0-5rem-l Applies padding top of 0.5rem for large devices and up <div class="padding-top-0-5rem-l"><div>
.padding-top-1rem-l Applies padding top of 1rem for large devices and up <div class="padding-top-1rem-l"><div>
.padding-top-1-5rem-l Applies padding top of 1.5rem for large devices and up <div class="padding-top-1-5rem-l"><div>
.padding-top-2rem-l Applies padding top of 2rem for large devices and up <div class="padding-top-2rem-l"><div>
.padding-top-3rem-l Applies padding top of 3rem for large devices and up <div class="padding-top-3rem-l"><div>
.padding-top-4rem-l Applies padding top of 4rem for large devices and up <div class="padding-top-4rem-l"><div>
.padding-top-5rem-l Applies padding top of 5rem for large devices and up <div class="padding-top-5rem-l"><div>
.padding-bottom-0-25rem-l Applies padding bottom of 0.25rem for large devices and up <div class="padding-bottom-0-25rem-l"><div>
.padding-bottom-0-5rem-l Applies padding bottom of 0.5rem for large devices and up <div class="padding-bottom-0-5rem-l"><div>
.padding-bottom-1rem-l Applies padding bottom of 1rem for large devices and up <div class="padding-bottom-1rem-l"><div>
.padding-bottom-1-5rem-l Applies padding bottom of 1.5rem for large devices and up <div class="padding-bottom-1-5rem-l"><div>
.padding-bottom-2rem-l Applies padding bottom of 2rem for large devices and up <div class="padding-bottom-2rem-l"><div>
.padding-bottom-3rem-l Applies padding bottom of 3rem for large devices and up <div class="padding-bottom-3rem-l"><div>
.padding-bottom-4rem-l Applies padding bottom of 4rem for large devices and up <div class="padding-bottom-4rem-l"><div>
.padding-bottom-5rem-l Applies padding bottom of 5rem for large devices and up <div class="padding-bottom-5rem-l"><div>
.padding-top-0-25rem-xl Applies padding top of 0.25rem for extra large devices and up <div class="padding-top-0-25rem-xl"><div>
.padding-top-0-5rem-xl Applies padding top of 0.5rem for extra large devices and up <div class="padding-top-0-5rem-xl"><div>
.padding-top-1rem-xl Applies padding top of 1rem for extra large devices and up <div class="padding-top-1rem-xl"><div>
.padding-top-1-5rem-xl Applies padding top of 1.5rem for extra large devices and up <div class="padding-top-1-5rem-xl"><div>
.padding-top-2rem-xl Applies padding top of 2rem for extra large devices and up <div class="padding-top-2rem-xl"><div>
.padding-top-3rem-xl Applies padding top of 3rem for extra large devices and up <div class="padding-top-3rem-xl"><div>
.padding-top-4rem-xl Applies padding top of 4rem for extra large devices and up <div class="padding-top-4rem-xl"><div>
.padding-top-5rem-xl Applies padding top of 5rem for extra large devices and up <div class="padding-top-5rem-xl"><div>
.padding-bottom-0-25rem-xl Applies padding bottom of 0.25rem for extra large devices and up <div class="padding-bottom-0-25rem-xl"><div>
.padding-bottom-0-5rem-xl Applies padding bottom of 0.5rem for extra large devices and up <div class="padding-bottom-0-5rem-xl"><div>
.padding-bottom-1rem-xl Applies padding bottom of 1rem for extra large devices and up <div class="padding-bottom-1rem-xl"><div>
.padding-bottom-1-5rem-xl Applies padding bottom of 1.5rem for extra large devices and up <div class="padding-bottom-1-5rem-xl"><div>
.padding-bottom-2rem-xl Applies padding bottom of 2rem for extra large devices and up <div class="padding-bottom-2rem-xl"><div>
.padding-bottom-3rem-xl Applies padding bottom of 3rem for extra large devices and up <div class="padding-bottom-3rem-xl"><div>
.padding-bottom-4rem-xl Applies padding bottom of 4rem for extra large devices and up <div class="padding-bottom-4rem-xl"><div>
.padding-bottom-5rem-xl Applies padding bottom of 5rem for extra large devices and up <div class="padding-bottom-5rem-xl"><div>

Spacers

Includes helpers for adding spacing (.padding-0-5rem, .padding-2rem, etc) for all breakpoints.

Class Purpose Example
.padding-0 Applies padding of 0 for all devices <div class="padding-0"><div>
.padding-0-25rem Applies padding of 0.25rem for all devices <div class="padding-0-25rem"><div>
.padding-0-5rem Applies padding of 0.5rem for all devices <div class="padding-0-5rem"><div>
.padding-1rem Applies padding of 1rem for all devices <div class="padding-1rem"><div>
.padding-1-5rem Applies padding of 1.5rem for all devices <div class="padding-1-5rem"><div>
.padding-2rem Applies padding of 2rem for all devices <div class="padding-2rem"><div>
.padding-3rem Applies padding of 3rem for all devices <div class="padding-3rem"><div>
.padding-4rem Applies padding of 4rem for all devices <div class="padding-4rem"><div>
.padding-5rem Applies padding of 5rem for all devices <div class="padding-5rem"><div>
.padding-0-m Applies padding of 0 for medium devices and up <div class="padding-0-m"><div>
.padding-0-25rem-m Applies padding of 0.25rem for medium devices and up <div class="padding-0-25rem-m"><div>
.padding-0-5rem-m Applies padding of 0.5rem for medium devices and up <div class="padding-0-5rem-m"><div>
.padding-1rem-m Applies padding of 1rem for medium devices and up <div class="padding-1rem-m"><div>
.padding-1-5rem-m Applies padding of 1.5rem for medium devices and up <div class="padding-1-5rem-m"><div>
.padding-2rem-m Applies padding of 2rem for medium devices and up <div class="padding-2rem-m"><div>
.padding-3rem-m Applies padding of 3rem for medium devices and up <div class="padding-3rem-m"><div>
.padding-4rem-m Applies padding of 4rem for medium devices and up <div class="padding-4rem-m"><div>
.padding-5rem-m Applies padding of 5rem for medium devices and up <div class="padding-5rem-m"><div>
.padding-0-l Applies padding of 0 for large devices and up <div class="padding-0-l"><div>
.padding-0-25rem-l Applies padding of 0.25rem for large devices and up <div class="padding-0-25rem-l"><div>
.padding-0-5rem-l Applies padding of 0.5rem for large devices and up <div class="padding-0-5rem-l"><div>
.padding-1rem-l Applies padding of 1rem for large devices and up <div class="padding-1rem-l"><div>
.padding-1-5rem-l Applies padding of 1.5rem for large devices and up <div class="padding-1-5rem-l"><div>
.padding-2rem-l Applies padding of 2rem for large devices and up <div class="padding-2rem-l"><div>
.padding-3rem-l Applies padding of 3rem for large devices and up <div class="padding-3rem-l"><div>
.padding-4rem-l Applies padding of 4rem for large devices and up <div class="padding-4rem-l"><div>
.padding-5rem-l Applies padding of 5rem for large devices and up <div class="padding-5rem-l"><div>
.padding-0-xl Applies padding of 0 for extra large devices and up <div class="padding-0-xl"><div>
.padding-0-25rem-xl Applies padding of 0.25rem for extra large devices and up <div class="padding-0-25rem-xl"><div>
.padding-0-5rem-xl Applies padding of 0.5rem for extra large devices and up <div class="padding-0-5rem-xl"><div>
.padding-1rem-xl Applies padding of 1rem for extra large devices and up <div class="padding-1rem-xl"><div>
.padding-1-5rem-xl Applies padding of 1.5rem for extra large devices and up <div class="padding-1-5rem-xl"><div>
.padding-2rem-xl Applies padding of 2rem for extra large devices and up <div class="padding-2rem-xl"><div>
.padding-3rem-xl Applies padding of 3rem for extra large devices and up <div class="padding-3rem-xl"><div>
.padding-4rem-xl Applies padding of 4rem for extra large devices and up <div class="padding-4rem-xl"><div>
.padding-5rem-xl Applies padding of 5rem for extra large devices and up <div class="padding-5rem-xl"><div>