Create and reuse a style guide template

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Create and reuse a style guide template

You can create a style guide template that you can use to create the style guide of any new project.

Creating the template

To create a simple style guide template:

  1. Create a project with a single page
  2. Add a section onto the page
  3. Add at least one of each element that has an HTML tag you can style
  4. Do not add any classes to these elements

Pasting & styling the template

To use this template in a new project:

  1. Create a new page in your new project. Call it “Style guide”.
  2. Save the page as draft
  3. Go to the template project
  4. Select and copy the section
  5. Paste in the “Style guide” page of the new project
  6. Select each element and style the HTML tag of that element

This way, you can get all the tags that you plan to use in this project set up. This saves you a lot of work and time. Learn more about styling HTML tags.

Don’t forget to style the Body (All Pages) tag. Since you can't copy/paste a page's body, you can’t include it in your style guide. However, you can select the body element on the “Style guide” page, then select and style the Body (All Pages) tag. Learn more about the Body element.

Cloneable Style Guide

Building out a page with all these elements can be a hassle. So, we did it for you — by building a cloneable project that contains all the HTML tags available to style in Webflow. Just clone the HTML tags project to your account, then copy-paste the whole thing into every new project to kickstart your next website with a clean style guide.

Helpful resources

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form