Version 1

Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
heading-1-display

Display Style-h1

heading-1-40px

Heading-style-h1

heading-2-32px

Heading-style-h2

Text Colours
Various text color can be apply to any text element
text-color-Gray900
Text box has color Gray900
text-color-Gray800
Text box has color Gray800
text-color-Gray700
Text box has color dark grey
text-color-white
Text box has color white
text-color-teal
Text box has color blue
text-color-yellow
Text box has color Yellow
text-color-pink
Text box has color pink
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-Thin
Text weight - Thin(100)
text-weight-ExtraLight
Text weight - ExtraLight(200)
text-weight-Light
Text weight - Light(300)
text-weight-Normal
Text weight - Normal(400)
text-weight-Medium
Text weight - Medium(500)
text-weight-SemiBold
Text weight - Semi Bold(600)
text-weight-Bold
Text weight - Bold(700)
text-weight-ExtraBold
Text weight - Extra Bold(800)
text-weight-black
Text weight - Black(900)
Text Style
Text style classes when typography style doesn't match the default HTML tag..
text-style-italic
Text style italic
text-style-strikethrough
Text style strikethrough
text-style-underline
Text style underline
text-style-allcaps
text style allcaps
text-style-lowercase
text style lowercase
text-style-nowrap
Text style Nowrap
text-weight-Bold
Text weight - Bold(700)
text-style-muted
Text Style muted
Text Alignment
Text style classes when typography style doesn't match the default HTML tag..
text-align-left
Text align-left
text-align-center
Text align-center
text-style-underline
Text style underline
text-align-right
Text align-right
Paragraphs Classes
Different paragraph with sizes
para-18px

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

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.

Other HTML Tags
HTML tags define default text styles.
All Paragraphs

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.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list item
  • No bullet list item
All Unordered Lists
  • Bullet list item
  • Bullet list item
All Ordered Lists
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
Text Blocks
Text blocks classes when typography size doesn't match the default HTML tag.
Text-block-24px
This is some text inside of a div block.
Text-block-24px
This is some text inside of a div block.
Text-Block-16px
This is some text inside of a div block.
Text-Block-14px
This is some text inside of a div block.
Text-Block-12px
This is some text inside of a div block.
Text-Block-10px
This is some text inside of a div block.
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

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.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Text Weight
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-Thin
Text weight - Thin(100)
text-weight-ExtraLight
Text weight - ExtraLight(200)
text-weight-Light
Text weight - Light(300)
text-weight-Normal
Text weight - Normal(400)
text-weight-Medium
Text weight - Medium(500)
text-weight-SemiBold
Text weight - Semi Bold(600)
text-weight-Bold
Text weight - Bold(700)
text-weight-ExtraBold
Text weight - Extra Bold(800)
text-weight-black
Text weight - Black(900)
Colors
Primary and secondary colors
The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc
Primary
secondary
secondary
secondary
secondary
Background colors
Manage recurring background colors.
dark grey
dark grey
White
Text colors
Manage recurring text colors
Gray 900
Gray 800
gray 700
gray 600
Gray 500
Gray 400
Gray 300
Gray 200
Gray 100
Gray 50

UI elements

The different types of buttons used throughout the website.

UI Elements
Buttons
The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc
Primary button
btn-primary
Button
btn-primary
is-small
Button
Secondary button
btn-secondary
Button
btn-secondary
is-small
Button
Button link
btn-secondary
Button
btn-secondary
Button
disabled button
btn-disable
Button
btn-disable
is-small
Button
Buttons with icons
Button with icon
btn-icon
Button
btn-icon
is-small
Button
secondary button with icon
btn-icon-secondary
Button
btn-icon-secondary
is-small
Button
Button Link with icon
btn-link-icon
Button
Form elements
field-label
form-input
form-input
is-text-area
form-input-select_wrapper
form-checkbox
form-radio
form-radio
form-success-message
Thank you! Your submission has been received!
form-error-message
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
icons image

icon-height-16px

icon-height-24px

icon-height-32px

icon-height-48px

icon-height-80px

icon-height-104px

icon-height-custom

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Tabs - Native
Use the Tabs element to add responsive, tabbed content to your Webflow project..
Tabs-rounded
Tab 1
Tab 2
Tab 3
Tabs-native
Tab 1
Tab 2
Tab 3

Structure Classes

The different types of buttons used throughout the website.

Structure Classes
Main Wrapper
The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.
main-wrapper
Padding Global
Global horizontal spacing. This class manages the left and right padding of a page's content.
padding-global
Page Wrapper
Outermost parent of all elements on the page. This Div Block wraps every element on the page.
page-wrapper
Main Wrapper

The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.
main-wrapper
Containers
Used to center the content in page
container-1440px
container-1366px
container-1152px
container-768px
Padding Vertical
Create top and bottom padding inside a section.
padding-vertical
padding-verticle-96px-96px
padding-vertical-84px-84px
padding-vertical-72px-72px
padding-vertical-60px-60px
padding-vertical-48px-48px
padding-vertical-32px-32px
padding-vertical-24px-24px
padding-vertical-16px-16px
padding-vertical-12px-12px

Sizing

Using various sizing classes - Width, height, Max-width, Min-width, Max-height,Min-height, Overflow

Sizing
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
Good to know- Max-width" classes are used apply max width for inner content
i
max-width-1600px
max-width-1440px
max-width-1280px
max-width-1100px
max-width-900px
max-width-800px
max-width-700px
max-width-622px
max-width-600px
max-width-500px
max-width-400px
max-width-380px
max-width-300px
max-width-200px
max-width-100px
Min Widths
Use the min-width CSS property to contain inner content to a minimum width.
Good to know- Max-width" classes are used apply max width for inner content
i
min-width-full
min-width-auto
min-width-Viewport-full
Widths
Add description here.
Good to know- Max-width" classes are used apply max width for inner content
i
width-4px
width-8px
width-12px
width-16px
width-20px
width-24px
width-28px
width-32px
width-40px
width-60px
width-64px
width-80px
width-84px
width-90px
width-100px
Good to know- We can declare custom width classes based on design
i
width-1/2
width-1/3
width-1/4
width-full
width-viewport-full
width-auto
Overflow
Add description here.
overflow-hidden
overflow-scroll
overflow-tablet-scroll

margins

Use the max-width CSS property to contain inner content to a maximum width.

Margins
Direction class - Margin Top
Add decription here.
margin-top-12px
margin-top-16px
margin-top-24px
margin-top-32px
margin-top-48px
margin-top-60px
margin-top-72px
margin-top-84px
margin-top-96px
margin-top-120px
margin-top-150px
Direction class - Margin bottom
Add decription here.
margin-bottom-12px
margin-bottom-16px
margin-bottom-24px
margin-bottom-32px
margin-bottom-48px
margin-bottom-60px
margin-bottom-72px
margin-bottom-84px
margin-bottom-96px
margin-bottom-150px
Direction class - Margin left
Add description here.
margin-left-12px
margin-left-24px
margin-left-32px
margin-left-48px
margin-left-60px
margin-left-72px
margin-left-84px
margin-left-96px
margin-left-120px
margin-left-150px
Direction class - Margin right
Add description here.
margin-right-12px
margin-right-24px
margin-right-32px
margin-right-48px
margin-right-60px
margin-right-72px
margin-right-84px
margin-right-96px
margin-right-120px
margin-right-150px

Paddings

Use the max-width CSS property to contain inner content to a maximum width.

Paddings
Direction class - Padding Top
Add description here.
padding-top-12px
padding-top-16px
padding-top-24px
padding-top-32px
padding-top-48px
padding-top-60px
padding-top-72px
padding-top-84px
padding-top-96px
padding-top-120px
padding-top-150px
Direction class - Padding bottom
Add decription here.
padding-bottom-12px
padding-bottom-16px
padding-bottom-24px
padding-bottom-32px
padding-bottom-48px
padding-bottom-60px
padding-bottom-72px
padding-bottom-84px
padding-bottom-96px
padding-bottom-150px
Direction class - Padding left
Add description here.
padding-left-12px
padding-left-16px
padding-left-24px
padding-left-32px
padding-left-48px
padding-left-60px
padding-left-72px
padding-left-84px
padding-left-96px
padding-left-120px
padding-left-150px
Direction class - padding right
Add description here.
padding-right-12px
padding-right-24px
padding-right-32px
padding-right-48px
padding-right-60px
padding-right-72px
padding-right-84px
padding-right-96px
padding-right-120px
padding-right-150px

Utility classes

Use the max-width CSS property to contain inner content to a maximum width.

Utility classes
Useful utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
This element is hidden on tablet breakpoint
hide-mobile-portrait
This element is hidden on Mobile-portrait breakpoint
hide-mobile-landscape
This element is hidden on mobile-landscape breakpoint
overflow-visible
This element has set size property Overflow - Visible
overflow-hidden
This element has set size property Overflow - Hidden
overflow-auto
This element has set size property Overflow - Auto
overflow-scroll
This element has set size property Overflow - Scroll
pointer-events-on
Add below code in Custom Code section of your site settings in the HEAD panel
pointer-events-off
Add below code in Custom Code section of your site settings in the HEAD panel
div-square
spacing-clean
This element has set spacing property "0"
align-center
This element has set spacing property auto
z-index-1
This element has set position property position:relative , z-index:1
z-index-2
This element has set position property position:relative , z-index:2
margin-top-auto
This element has set spacing property margin-top:auto
Flexbox Readymade classes
flex-left-right-50
mob-landscape-reverse
flex-space-around
flex-wrap

Flexbox

Use the max-width CSS property to contain inner content to a maximum width.

Flexbox
Flexbox combo classes
flex-space-between
flex-space-around
flex-wrap
flex-center
Flex Horizontal Classes
Flexbox gives you precise alignment and stacking control for all the contents inside an element,
flex-horizontal-align-start
flex-horizontal-align-center
flex-horizontal-align-end
flex-horizontal-align-stretch
flex-horizontal-align-baseline
flex-horizontal-justify-start
flex-horizontal-justify-center
flex-horizontal-justify-end
flex-horizontal-justify-space-between
flex-horizontal-justify-space-around
Flex Vertical classes
Flexbox gives you precise alignment and stacking control for all the contents inside an element,
flex-vertical-align-start
flex-vertical-align-center
flex-vertical-align-end
flex-vertical-align-stretch
flex-vertical-align-baseline
flex-vertical-justify-start
flex-vertical-justify-center
flex-vertical-justify-end
flex-vertical-justify-space-between
flex-vertical-justify-space-around
Breakpoint overrides - Tablet
Naming convention - {Breakpoint}{Class}
tablet-flex-horizontal
tablet-flex-horizontal-reverse
tablet-flex-horizontal-center
tablet-flex-vertical
tablet-flex-vertical-reversed
tablet-flex-vertical-center
tablet-flex-align-start
tablet-flex-align-center
tablet-flex-align-end
tablet-flex-align-stretch
tablet-flex-justify-start
tablet-flex-justify-center
tablet-flex-justify-end
tablet-flex-space-between
Grid
Use CSS grid to position content within a responsive layout.
Good to know- Each grid has a base gap of 16px on the column & row.
Grid columns stack at various breakpoints by default, and you can override the columns using the breakpoint override classes.
i
grid-2-col
grid-3-col
grid-4-col
grid-5-col
grid-6-col
grid-8-col
grid-12-col

Spacers

Spacer elements using the 8-pt system to give sections more room to breathe.

16 px

24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX
Border
Borders
Add description here
border-1px
border-2px
border-top-1px
border-bottom-1px
border-left-1px
border-right-1px
Note- Working on it - Tablet and mobile specific classes( Ex- Tablet-border-bottom-none etc.)
i
Effects
Effects
Add description here
box-shadow-small
box-shadow-medium
box-shadow-large
Good to know- We can create custom shadow classes as per design
i