Menu
OverviewColorsHTML TagsHeading ClassesText ClassesText WeightsRich TextButtons

Overview

The purpose of this style guide is to help you understand how to manage this project in style. It lays out all the elements, components, tools, and resources used to develop it. Each section begins with a tutorial to reinforce you further.

Global Styles

This project comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project. Styles are added to an embed so we can see the CSS inside the Webflow Designer. Feel free to update and add to it.

Shortcuts

The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.

Do Math Within Input Fields

Everything in this project is measured using REM. The base font size is 1 rem. When you need to convert units such as pixels to REM, simply select your input field and type 14/16rem and it automatically calculates the difference and converts. You can do any other form of calculation, as well.

Remove Unused Elements

Once you're finished editing the project, open the Style Manager and click Clean Up to remove unused classes. Then open the Interactions panel and click Clean Up to remove unused interactions. Finally, open the Assets Panel, expand it from the top right, click Select All and Delete. Webflow will automatically dispose of any assets you haven't used. The rest will show up again once you publish your project and refresh the page.

Swatches

#000
#FFF
#181e40
#5d78fe
#f3f8fc
#ff778c
#ffd65d
#00a267

H1 • Title

H2 • Subtitle

H3 • Third Title

H4 • Fourth Title

H5 • Fifth Title
H6 • Sixth Title

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.

Text Links
All Quotes

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.

H1 • Heading-One

H2 • Heading-Two

H3 • Heading-Three

H4 • Heading-Four

text-size-large
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.

text-style-strikethrough

text-style-italic

text-muted
text-allcaps
text-link
text-quote
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.
text-bold

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

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.
Placeholder
This is a placeholder image.