Webflow Styleguide

Browse the UI elements available on the Template. Growth is a Webflow Template for Marketing Agencies. Growth was designed & developed by BRIX Templates.

Colors

Primary Color

Primary 1
#F4263E

Secondary Colors

Secondary 1
#782CE4
Secondary 2
#FFCD1D
Secondary 3
#FFFAF1
Secondary 4
#FF961B
Secondary 5
#1B76FF
Secondary 6
#3FDCFF

Neutral Colors

Neutral 700
#1F2559
Neutral 500
#62668A
Neutral 300
#BEBFCC
Neutral 200
#E7E8F1
Neutral 100
#FAFAFC
White
#FFFFFF

Typography

Rich Text

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.

Heading H1 - Aa Bb Cc Dd

Heading 1 - 48px/1.292em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 38px/1.263em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 24px/1.375em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 20px/1.400em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/1.333em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/1.125em

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 Default - 16px/1.688em

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 - 20px/1.7em

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum volutpat integer. Cursus est elementum maecenas ut.
Block Quote
  • Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lectus quam.
  • Placerat vestibulum lectus mauris ultrices eros in cursus.
  • Convallis aenean et tortor at. Convallis tellus id interdum velit laoreet idon.
Bullet List
  1. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lectus quam.
  2. Placerat vestibulum lectus mauris ultrices eros in cursus.
  3. Convallis aenean et tortor at. Convallis tellus id interdum velit laoreet idon.
Numered List
Lorem ipsum dolor sit ame porttiust eroso
Figure & Figure Caption

Icons

Icon Font

Line icons rounded

Line icons square

Filled icons

Social media icons

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large