Style Guide
Colors
Brand Colors
Categories Colors
Product Colors
Typography
H1
Heading h1
heading-style-h1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
H2
Heading h2
heading-style-h2
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
H3
Heading h3
heading-style-h3
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h1
H4
Heading h4
heading-style-h4
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
H5
Heading h5
heading-style-h5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
H6
Heading h6
heading-style-h6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Paragraph
Paragraph
paragraph-style
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Text Classes
txt-L
Sample text
txt-M
Sample text
txt-S
Sample text
Text Colors
txt-grey-dark
Sample text
txt-grey-medium
Sample text
txt-off-white
Sample text
txt-white
Sample text
txt-red-dark
Sample text
txt-red-light
Sample text
txt-orange-dark
Sample text
txt-orange-light
Sample text
txt-pink-dark
Sample text
txt-pink-light
Sample text
txt-green-dark
Sample text
txt-green-light
Sample text
txt-purple-dark
Sample text
txt-purple-light
Sample text
txt-100
Sample text
txt-200
Sample text
txt-300
Sample text
txt-400
Sample text
txt-500
Sample text
txt-600
Sample text
txt-700
Sample text
txt-800
Sample text
txt-900
Sample text
Text Styles
txt-medium
Sample text
txt-italic
Sample text
Sample text
Other HTML Tags
Text Link
Text LinkList Unordered
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div block.
List Ordered
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div block.
Block Quote
Block Quote
Text Block
This is some text inside of a div block.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Buttons
btn-arrow
Button Text
is-white
Button Text
btn-outline
Button Textis-white
Button Textbtn-txt
Button Textis-white
Button Textbtn-txt-lg
Button Textis-white
Button TextLabels
label-lg
Label Text
is-white
Label Text
is-red
Label Text
is-green
Label Text
is-orange
Label Text
is-pink
Label Text
is-purple
Label Text
label-lg
Label Text
is-white
Label Text
is-red
Label Text
is-green
Label Text
is-orange
Label Text
is-pink
Label Text
is-purple
Label Text
label-outline-lg
Label Text
is-white
Label Text
label-outline-lg
Label Text
is-white
Label Text
label-sm
Label Text
is-white
Label Text
label-sm
Label Text
is-white
Label Text
is-500
Label Text
is-off-white
Label Text
label-outline-sm
Label Text
is-white
Label Text
label-outline-sm
Label Text
is-white
Label Text
Spacers
spacer-160
spacer-120
spacer-72
spacer-52
spacer-32
spacer-24
spacer-16
spacer-8
Containers
container-L
container-M
container-S
Paddings
padding-block-XL
padding-block-L
padding-block-M
padding-block-S
padding-section-L
padding-section-M
padding-section-S
padding-global
Elements
line-enternainment-full
line-enternainment-half
line-fiction-full
line-fiction-half
line-reality-full
line-sports-half
line-information-full
line-information-half
line-sports-full
line-sports-half
line-product-full
line-product-half