CSS Style Guide

colors
#1cbec8
#ed145b
#4561ad
#000000
#666666
#888888
#cacaca
#eeeeee
Grids
6 columns
1/6
2/6
3/6
4/6
5/6
6/6
4 columns
1/4
2/4
3/4
4/4
2 columns
1/2
2/2
1 column
1/1
.padding-vertical-large .collapse-bottom
.padding-vertical-large
.padding-vertical-med
.padding-vertical-small
.padding-vertical-none
Typography

Jumbo Heading

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder
Sample text is being
used as a placeholder
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

text-extralarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse underlined enim in eros elementum tristique.

text-large

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

paragraph

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

text-split

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

text-small

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

text-tiny

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Satoshi Template

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

‍

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

‍

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.

‍

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

‍

‍

text-color-teal
text-color-magenta
text-color-royalblue
‍
text-color-white
text-color-black
text-color-dark gray
text-color-gray
text-color-light gray
text-color-white smoke
.text-align-left
text-align-left
.text-align-center
text-align-center
.text-align-right
text-align-right
.text-style-strikethrough

text-style-strikethrough

.text-style-extralight

text-style-extralight

.text-style-medium

text-style-medium

.text-style-semibold

text-style-semibold

.text-style-bold

text-style-bold

.text-style-extrabold

text-style-extrabold

.text-style-black

text-style-black

.text-style-italic

text-style-italic

.text-style-muted

text-style-muted

.text-style-allcaps

text-style-allcaps

.text-style-nowrap

text-style-nowrap

.text-style-quote

Sample text is being used as a placeholder.

Buttons
.button
Button Text
Button TextButton Text
.button .is-small
Button TextButton TextButton Text
.button .is-large
Button TextButton TextButton Text
is-secondary
Button TextButton Text
.button .is-text
Button Text
Button Text
Button Text
.button .is-icon
Button Text
Button Text
Button Text
.social-icon + .icon-1x1-small
Padding
.padding-bottom
.padding-top
.padding-vertical
.padding-horizontal
.padding-left
.padding-right
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
.padding-xhuge
.padding-xxhuge
Margins
.margin-bottom
.margin-top
.margin-vertical
.margin-horizontal
.margin-left
.margin-right
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-xxhuge
.hide
.hide-tablet
.hide-mobile-portrait
.hide-mobile-landscape
.overflow-visible
.overflow-hidden
.overflow-auto
.overflow-scroll
.align-left
.align-center
.align-right
.is-rounded
.is-outlined
backgrounds
.is-teal
.is-teal-opaque
.is-magenta
.is-magenta-opaque
.is-royalblue
.is-royalblue-opaque
.is-white
.is-black
.is-dark-gray
.is-gray
.is-light gray
.is-whitesmoke