Style Gide

Home Page
Colors
Typography
Buttons and links
Inputs
Checkboxes and radio buttons
Social media icons
Banners

Colors

Main colors
Primary
Secondary
Background 1
Background 2
Background 3
Neutral colors
Neutral 800
Neutral 700
Neutral 600
Neutral 500
Neutral 400
Neutral 300
Neutral 200
Neutral 100
Semantic colors
Warning
Success
Attention
Information

Typography

Headings | Golos Text
Heading 1

This is some text inside of a div block.

Heading 2

This is some text inside of a div block.

Heading 3

This is some text inside of a div block.

Heading 4

This is some text inside of a div block.

Heading 5
This is some text inside of a div block.
Heading 6
This is some text inside of a div block.
Display Headings | Golos Text
Large
This is some text inside of a div block.
Medium
This is some text inside of a div block.
Small

This is some text inside of a div block.

Paragraph | Golos Text
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text Block

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

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!

How to customize formatting for each rich text

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.

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Unordered List

  • 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.

Ordered List

  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.

Buttons and links

Primary buttons

Small
Label
Primary - Big
Label
Primary - Small - Not active
Label
Primary - Big - Not active
Label
Small
Label
Primary - Big
Label
Primary - Small - Not active
Label
Primary - Big - Not active
Label

Secondary buttons

Secindary - Small
Label
Secondary - Big
Label
Secondary - Small - Not active
Label
Secondary - Big - Not active
Label

Links

Nav link
Link
Text link
Text Link

Inputs

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkboxes and radio buttons

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Social media icons

Banners

Home
About
Courses
Blog
Support
404
Licensing
Styleguide
Password
Cookies settings
Terms of Service
Privacy Policy
Get in touch

© Made by Stepan Dihich - Powered by Webflow