---

Style Guide for Stree

Welcome to your project's style guide. Use this area to keep track of all your global website classes.

Have Questions?

Typography

Headings - Figtree Font

AaBbCc

heading-style-h1

AaBbCc

heading-style-h1
is-white

AaBbCc

heading-style-h2

AaBbCc

heading-style-h2
is-gold

AaBbCc

heading-style-h2
is-white

AaBbCc

heading-style-h3

AaBbCc

heading-style-h4
Text - Louis George Cafe Font

Lorem ipsum dolor sit amet

text-size-xlarge

Lorem ipsum dolor sit amet

text-size-xlarge
is-white

Lorem ipsum dolor sit amet

text-size-large

Lorem ipsum dolor sit amet

text-size-large
is-white

Lorem ipsum dolor sit amet

text-size-medium

Lorem ipsum dolor sit amet

text-size-medium
is-white

Lorem ipsum dolor sit amet

text-size-medium
is-bold

Lorem ipsum dolor sit amet

text-size-regular

Lorem ipsum dolor sit amet

text-size-regular
is-white

Lorem ipsum dolor sit amet

text-size-small

Lorem ipsum dolor sit amet

text-size-small
is-cap

Lorem ipsum dolor sit amet

text-size-small
is-white

Lorem ipsum dolor sit amet

text-size-tiny
text-link
Field Labels

Label

form-label
Rich Text

Heading 1

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Heading 2

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

hgggg

Heading 3

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  1. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  2. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading 4

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  • Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Heading 5

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Heading 6

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam ex, imperdiet ut nunc nec, tempus tempus lacus. Nullam lobortis molestie leo ut cursus. Sed porttitor ex sed bibendum imperdiet. Sed semper, velit in tincidunt rutrum, sapien libero vehicula ante, posuere posuere ligula sem at metus. Sed nulla lacus, accumsan sed fringilla quis, congue eget dolor. Vestibulum lectus purus, imperdiet at lorem a, hendrerit hendrerit diam.

text-rich-text

Color

Background / Body Colour
#84566b
rgba(0, 0, 0, 0.8)
#fffff
#f3f4f5
Line Colour
rgba(148, 148, 148, 0.27)
Text Color

Lorem ipsum dolor sit amet

is-white

Lorem ipsum dolor sit amet

is-black
Link
text-link
text-link.is-no_underline
is-no_underline
text-link.is-fade_underline
is-fade_underline

Elements

Button
Get in Touch
button.is-brand_long
Get in Touch
button.is-brand
Get in Touch
button.is-outlined
Get in Touch
button.is-long
About Us
button-outlined
Learn More
button-outlined
no-border
Button Text
button
is-text
ABOUT US
button
is-text-white
Icon Button
icon-embed
icon-embed_svg
has-hover
Containers
page-wrapper
main-wrapper
container-small
container-large
container-xlarge
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Max widths
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
Spacers
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
Form Component
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form-component