Styleguide
Styleguide is a set of guidelines and strategies created to help you build Webflow websites.
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Other HTML Tags
HTML tags define default text styles.
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.
Block Quote
List Item
List Item
List Item
List Item
List Item
List Item
Text Sizes
Text sizes when typography style doesn't match the default HTML tag.
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.
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.
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.
Eyebrow
Text Weights
text-weight-semibold (600)
text-weight-medium (500)
text-weight-normal (400)
text-weight-light (300)
Text Styles
text-style-italic
text-style-strikethrough
text-style-allcaps
text-style-nowrap
text-style-link
text-style-link
Text Alignment
text-align-left
text-align-center
text-align-right
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
Background Colors
Manage recurring background colors.
Text Colors
Manage recurring text colors.
Icons
Unify icons sizes.
Structure
Defined and flexible core structure we can use on all or most pages.
sHADOWS
Utility shadows mostly used on different cards
Utility Classes
Utility classes we like to use in most of our projects to build faster.
Words ClassES
Utility classes to animate each word on scroll to view.
Layout
Margins
Unified spacer system for the project.