Style Guide

This guide lays out all of the CSS styles used throughout the kit. It includes specific directions on using text styles, product cards, and wrappers.

Navigating the Kit

Most of the layouts you can use to build your website live across the pages of the Prospero UI KIt project. In the project, navigate to each page in the Pages panel to explore the different layouts.

Additional layouts for product pages and category pages can be found on the product and category templates in the Pages panel. Each full layout is wrapped and labeled in a div, and can be seen in the Navigator panel.

Starting Your Project

To get started, you’ll have two options:

1. Start a new project and copy and paste the UI Kit’s contents in as needed.

This option will allow for a clean start. In a new project, enable ecommerce by clicking on the cart icon in the left menu.

2. Build directly from your new UI Kit project

You can just work from the cloned UI Kit project, though it may be harder to work around the imported assets in the asset manager, and all of the pre-built content. The advantage will be that products and content are already bound to the corresponding design layouts.

Adding or Importing Products

Add your products and variants manually, or use our CSV import tool. If you’re working from the UI Kit project, you may have to delete the products that are already featured in the kit. Remember that you’re also able to customize the product content structure by adding custom fields in your product settings.

1. Add your products manually

Head to the the Products collection in the Ecommerce panel, and click “New Product” to manually add your items.


2. Use the CSV Import Tool

You can batch import your product information using a downloaded or manually created CSV. Head to Webflow University for a full lesson on how to prepare your CSV.  

Note: You will not be able to enable checkout on an Ecommerce site without a hosted subscription. Head to our pricing page to see the various ecommerce plan options.

Creating a Page

You can create a new page by opening the Pages panel and clicking on the Create a new page icon.

Copy and paste full layouts‍

To use the sections and layouts featured in the Prospero UI Kit, copy and paste between pages or projects. You can copy and paste full sections or layouts, or any element within the kit. Each section is wrapped and labeled in a div, and can be seen in the Navigator panel. Static content will be completely copied over, though only dynamic and elements and styles will be duplicated.

Customizing Content

There are 2 ways to add dynamic content into the UI kit. First is for sections with only 1 featured product and the second way is to fill content into section using multiple items such as list of products or blog posts. We will cover all of this in the video below.

Change Typeface

To match your brand you can change the typeface in the whole UI kit just by changing one property. In the video below we provide a quick guide.

Wrap + Margins Combos

In this simple walkthrough we will create a simple page using 4 sections and we will take a look at how to work with .div Wrapper and how to use pre-defined spacing using mXXX combo classes.

Using the Style Guide

The author has included a comprehensive guide that lays out all of the CSS styles used throughout the kit. It includes specific directions on using text styles, product cards, and wrappers. Visit the style guide here

Using Our Ready-made Templates

If you need a hand in getting started, make use of our ready-to-use templates. These templates, Luma and Grit, can be found in the Webflow template marketplace.

Stylish modern lighting options

The right light can transform any environment

Thoughtfully curated modern lighting fixtures

The right light can transform any environment

8 Genius Ways to Use Lighting in Your Home
How To Choose The Right Lighting For Any Room
Let there be light
Stylish modern lighting options
The right light can transform any environment
Thoughtfully curated modern lighting fixtures
The right light can transform any environment
8 Genius Ways to Use Lighting in Your Home
How To Choose The Right Lighting For Any Room
Author's Explanation:

As we know now, there are 7 types of text classes for working with you typography. To easily align all your typography in the sections every text class comes with a combo class clearing the margins coming from the main class. As you can see on the example below there is Bottom Clear which removes the Bottom Margin, Full Clear for setting both margins to 0 and Top Clear is great for aligning headlines to the same level as paragraphs.

Lifetime of illumination
[SizeJumbo Text] - [SizetextJumbo Bottom Clear]
Lifetime of illumination
[SizeJumbo Text] - [SizetextJumbo Full Clear]
Lifetime of illumination
[SizeJumbo Text] - [SizetextJumbo Top Clear]
Text LinkText LinkText Link
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Text LinkText LinkText Link
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Text LinkText LinkText Link
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Text LinkText LinkText Link
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Text LinkText LinkText Link
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Text LinkText LinkText Link
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
White Smoke
#ebedee
Dark
#18181d
Black
#000000
Rosy Brown
#af9387
Indian Red
#db4b68
Sea Green
#12b878
Author's Explanation:

Product Cards are the main building part of every store. So to give you maximum flexibility Product grid cards are coming with S, M, L, XL combo classes. This is particulary handy when filling your CMS with landscape or portrait pictures. Don't forget that you can always go with different number of columns. Recommended number of columns is 1 to 4 for the optimal experience.

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”

As we know now, there are 7 types of text classes for working with you typography. To easily align all your typography in the sections every text class comes with a combo class clearing the margins coming from the main class. As you can see on the example below there is Bottom Clear which removes the Bottom Margin, Full Clear for setting both margins to 0 and Top Clear is great for aligning headlines to the same level as paragraphs.

As we know now, there are 7 types of text classes for working with you typography. To easily align all your typography in the sections every text class comes with a combo class clearing the margins coming from the main class. As you can see on the example below there is Bottom Clear which removes the Bottom Margin, Full Clear for setting both margins to 0 and Top Clear is great for aligning headlines to the same level as paragraphs.

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”
Shop our fall collection
  • How to customize formatting for each rich text
  • How to customize formatting for each rich text
  • How to customize formatting for each rich text
  1. How to customize formatting for each rich text
  2. How to customize formatting for each rich text
  3. How to customize formatting for each rich text
Can I cancel my subscription at anytime?

Sure. Your paid subscription can be cancelled anytime by shifting to Lite plan.

Can I cancel my subscription at anytime?

Sure. Your paid subscription can be cancelled anytime by shifting to Lite plan.

Heading 1

What’s a Rich Text element?

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 5
Heading 6
  • List Item
  • List Items
  • List Item
  • Link Item

Link

Bold

Italic

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.
Image Caption
Premium
Premium
Premium
Premium
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Author's Explanation:

Product Cards are the main building part of every store. So to give you maximum flexibility Product grid cards are coming with S, M, L, XL combo classes. This is particulary handy when filling your CMS with landscape or portrait pictures. Don't forget that you can always go with different number of columns. Recommended number of columns is 1 to 4 for the optimal experience.

No items found.
No items found.
No items found.
No items found.
Author's Explanation:

Wrapper is the ultimate building element to be able to put together all the UI Kit sections together. It's not required way how to combine the parts together but it definitely helps and makes your life easier. The way to use Wrapper element is to drag and drop Div Block into the canvas give it Class "Wrapper" and then use combo class (another class) from the dropdown menu with the exact spacing you would like to see. This makes your life easier and again it won't require any additional visual coding or polishing from your side. Currently there are margins of 0, 20, 50, 80, 100.

[Wrapper] - [M100]
[Wrapper] - [M80]
[Wrapper] - [M50]
[Wrapper] - [M20]
[Wrapper] - [M100-80]
[Wrapper] - [M100-50]
[Wrapper] - [M100-20]
[Wrapper] - [M80-100]
[Wrapper] - [M50-100]
[Wrapper] - [M20-100]
[Wrapper] - [M0-100]
[Wrapper] - [M0-80]
[Wrapper] - [M0-50]
[Wrapper] - [M0-20]
[Wrapper] - [M80-50]
[Wrapper] - [M50-80]
[Wrapper] - [M50-100]