Style Guide
This interactive, customizable style guide brings together all the basic elements of your site.
Colors
You can update all the colors throughout your site instantly using Webflow's global swatches feature. As long as you use global swatches when adding color to the elements on your site, this tool will control the colors of those elements.
To customize, select a color square below and edit its global swatch. You do this in the Style Panel on the right, under the Backgrounds section, by selecting the Color option for each color square, and changing its global color swatch to your liking. See how it works.
Other Colors
Headings
By default, the Headings each inherit the font family of the Body (All Pages) tag. They also share the same font color you customized in the above Colors section of this style guide. The second part of this Headings section helps you test the line-height of each of your Headings across all device breakpoints.
Headings, One Line
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Headings, Two Lines
Lorem Ipsum Dolor Sit Amet
Consectetur Adipiscing Elit
Lorem Ipsum Dolor Sit Amet
Consectetur Adipiscing Elit
Lorem Ipsum Dolor Sit Amet
Consectetur Adipiscing Elit
Lorem Ipsum Dolor Sit Amet
Consectetur Adipiscing Elit
Lorem Ipsum Dolor Sit Amet
Consectetur Adipiscing Elit
Paragraphs
In addition to the All Paragraphs styling, you have two more size variations you can customize.
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.
Vestibulum elementum sed metus a ultrices. Curabitur non sagittis justo, eu sollicitudin augue. Etiam pretium, purus a feugiat pellentesque, nibh erat vestibulum tortor, vitae malesuada dui magna eget augue. Nullam blandit odio vel est fringilla posuere. Aliquam volutpat rhoncus condimentum.
Large 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.
Vestibulum elementum sed metus a ultrices. Curabitur non sagittis justo, eu sollicitudin augue. Etiam pretium, purus a feugiat pellentesque, nibh erat vestibulum tortor, vitae malesuada dui magna eget augue. Nullam blandit odio vel est fringilla posuere. Aliquam volutpat rhoncus condimentum.
Small 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.
Vestibulum elementum sed metus a ultrices. Curabitur non sagittis justo, eu sollicitudin augue. Etiam pretium, purus a feugiat pellentesque, nibh erat vestibulum tortor, vitae malesuada dui magna eget augue. Nullam blandit odio vel est fringilla posuere. Aliquam volutpat rhoncus condimentum.
Other Typography
Lists
- Quisque ullamcorper velit eu lectus lacinia rutrum quis et orci. Ut a elementum justo. Aenean finibus quam sed lorem cursus euismod.
- Proin sed mi at felis mollis volutpat ut a elit. Mauris fermentum ullamcorper risus, sit amet elementum nisl blandit sed.
- Donec tincidunt, felis vel tincidunt iaculis, leo massa interdum mi, eget vehicula ligula massa nec purus. Curabitur tempus ligula eu nunc vehicula elementum.
- Quisque ullamcorper velit eu lectus lacinia rutrum quis et orci. Ut a elementum justo. Aenean finibus quam sed lorem cursus euismod.
- Proin sed mi at felis mollis volutpat ut a elit. Mauris fermentum ullamcorper risus, sit amet elementum nisl blandit sed.
- Donec tincidunt, felis vel tincidunt iaculis, leo massa interdum mi, eget vehicula ligula massa nec purus. Curabitur tempus ligula eu nunc vehicula elementum.
Links
Blockquotes
Aenean lorem ligula, pellentesque vulputate ipsum quis, faucibus maximus elit. Nullam vitae luctus sapien. Ut molestie faucibus dignissim. Nulla magna sapien, pharetra id tincidunt sit amet, bibendum in felis. Nam ultricies dolor est, non fermentum tortor elementum a. Aenean at blandit arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Rich Text
Lorem Ipsum Dolor Sit Amet
Vivamus iaculis tristique neque, id suscipit lacus vehicula eu. Praesent ac lorem ut dolor convallis bibendum. Integer rhoncus purus sapien, non molestie erat viverra nec. Nullam ornare vel dui ac pellentesque. Aenean eu hendrerit odio. Ut ipsum odio, vehicula sit amet eros ac, aliquam luctus massa.
Donec eu lacinia nisi. Aliquam erat volutpat. Quisque sit amet magna porttitor ligula facilisis lacinia in ac eros. Duis sed ultricies metus. Ut eu lectus sit amet augue malesuada viverra id ac metus. Donec malesuada, nibh ut volutpat scelerisque, nulla metus molestie leo, eget dictum lacus sem in arcu.
Aliquam blandit odio at commodo blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lacinia dictum justo, a porttitor nulla accumsan non. Aenean feugiat, augue nec convallis malesuada, sapien enim elementum nulla, vitae posuere elit ipsum id augue. Donec dictum augue ut purus malesuada iaculis.
Quisque cursus tempor tincidunt
Donec faucibus turpis ut fermentum sollicitudin. Fusce at turpis vitae felis tempor viverra id tincidunt ante. Vivamus feugiat tortor augue, non auctor diam molestie quis. Etiam non tortor sed dolor interdum hendrerit.
- Quisque ullamcorper velit eu lectus lacinia rutrum quis et orci. Ut a elementum justo. Aenean finibus quam sed lorem cursus euismod.
- Proin sed mi at felis mollis volutpat ut a elit. Mauris fermentum ullamcorper risus, sit amet elementum nisl blandit sed.
- Donec tincidunt, felis vel tincidunt iaculis, leo massa interdum mi, eget vehicula ligula massa nec purus. Curabitur tempus ligula eu nunc vehicula elementum.
Nunc bibendum imperdiet ligula
Donec vestibulum est odio, ac pellentesque ligula faucibus eu. Aliquam vel ex imperdiet, lacinia dui sit amet, mattis purus. Maecenas sodales in ante eget tempus. Donec tristique leo at lacus ultricies, mollis accumsan mauris venenatis.
- Quisque ullamcorper velit eu lectus lacinia rutrum quis et orci. Ut a elementum justo. Aenean finibus quam sed lorem cursus euismod.
- Proin sed mi at felis mollis volutpat ut a elit. Mauris fermentum ullamcorper risus, sit amet elementum nisl blandit sed.
- Donec tincidunt, felis vel tincidunt iaculis, leo massa interdum mi, eget vehicula ligula massa nec purus. Curabitur tempus ligula eu nunc vehicula elementum.
Suspendisse sollicitudin tellus in eros molestie viverra
Cras viverra varius dignissim. Sed diam nisl, sodales id hendrerit ut, blandit a enim. Phasellus eu urna nisi. Pellentesque placerat suscipit molestie. Mauris velit ex, pellentesque eget nisi fringilla, placerat consequat lacus.
Aenean lorem ligula, pellentesque vulputate ipsum quis, faucibus maximus elit. Nullam vitae luctus sapien. Ut molestie faucibus dignissim. Nulla magna sapien, pharetra id tincidunt sit amet, bibendum in felis. Nam ultricies dolor est, non fermentum tortor elementum a. Aenean at blandit arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris eget nisl libero. Fusce lacus mi, pretium id pulvinar nec, efficitur vel tellus. Pellentesque nec rutrum nibh. Ut placerat luctus nisi, a cursus mauris semper vel. Curabitur vel nibh mauris. Nunc maximus imperdiet sollicitudin.
Nam imperdiet tristique ante et elementum
Ut id metus eget sem posuere accumsan eget sed orci. Aliquam erat volutpat. Curabitur eget nunc tincidunt, dapibus arcu ac, tempus urna. In sagittis lobortis scelerisque. Praesent luctus leo a vehicula venenatis.
Vivamus tincidunt ipsum at lectus feugiat luctus
Nam luctus orci ut aliquam semper. Integer vehicula ligula a ex sollicitudin, sed consectetur sapien ultrices. Morbi vitae dapibus augue, vel mattis purus. Mauris laoreet, nunc sed tincidunt interdum, sem ante sollicitudin ante, et pretium sem tortor quis quam.
Buttons
First, customize the non-color attributes of the Default Button below - like padding and margin, height, border radius, effect transitions, etc. - which will cascade down to all your other buttons. Then you can customize each button individually. Button colors are pre-set with your customizations from the Colors section above.
Default Button
All Buttons
Forms
You already customized the colors for your forms in the Colors section above. Below you can style the All Labels tag and each of the other form elements individually. Because most form elements don't have HTML tags, I created classes for each element in the form. So in order to preserve your styling customizations, you should copy and paste this Form Block each time you want to insert a new form on your site.
Tabs
Because most Tab elements don't have HTML tags, I created classes for each element below. So in order to preserve your styling customizations, you should copy and paste this Tabs element each time you want to insert a new Tabs section on your site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis imperdiet purus, at bibendum nisl. Sed a ullamcorper lectus. Vivamus gravida cursus hendrerit. In in enim pellentesque, fermentum sem fringilla, scelerisque diam. Sed eu felis et arcu faucibus suscipit quis id leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non varius odio.
Morbi nec libero et neque eleifend aliquet eget eu dolor. Vivamus at mollis mauris, sed imperdiet urna. Proin tristique aliquet mi, eget dapibus elit tincidunt et. Sed vel sodales sapien. Aenean a ex eleifend turpis malesuada suscipit eu vitae leo. Phasellus urna lacus, cursus at viverra eget, sollicitudin ut diam. Nam laoreet porta lorem, non iaculis orci aliquam nec. Etiam luctus, libero sed finibus cursus, nibh libero vulputate magna, in malesuada nisl metus ultrices dolor.
Nunc vestibulum urna sit amet finibus volutpat. Curabitur vulputate imperdiet tortor sit amet egestas. Phasellus quis augue vitae nisl hendrerit volutpat. Phasellus ac sem vitae odio scelerisque malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis nisl ut dolor pretium, id fermentum libero cursus.
Vivamus feugiat imperdiet ligula, sed mollis augue efficitur quis. Nunc sit amet lacinia eros, accumsan efficitur metus. Vestibulum vitae nibh ullamcorper, pharetra orci in, dignissim mauris. Suspendisse sit amet nisl nulla. Donec eu augue nec erat interdum vehicula interdum et nunc. Vestibulum ut cursus diam, faucibus imperdiet lacus. Donec a tincidunt lacus. Nulla metus metus, ullamcorper eget leo id, bibendum semper diam. Aenean tincidunt pulvinar elit, in facilisis tellus vulputate nec.
Pellentesque cursus magna quis est imperdiet, tempus pretium quam consectetur. Etiam nec lacus ac justo molestie iaculis. Praesent congue, nibh sed ultrices rhoncus, sapien magna rhoncus nisi, id malesuada nunc quam nec magna. Integer ultrices mattis luctus. Curabitur gravida ligula eu tortor fringilla consequat. Quisque a elit id ante sollicitudin malesuada.
Praesent egestas libero sapien, at gravida mi ultricies at. Fusce in quam neque. Nam in turpis id felis euismod ornare id ac nisi. Donec pellentesque ullamcorper est, nec consequat tortor pulvinar ut. Vivamus vitae libero sollicitudin, fringilla metus id, eleifend eros. Nulla facilisi. Proin quis feugiat turpis. Curabitur ultrices vestibulum sem semper porta.
Spacers & Dividers
Drop a Div Block anywhere on your site and apply the relevant spacer or divider tags.
Spacers
Customize the spacers by adjusting their padding. The spacers below are visible because they have the "Visible" combo class (so you can see them). Simply omit the "Visible" combo class when you place them on your site to keep your spacers hidden.