Style Guide

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

Headline Styles

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

Text Styles

Light it up
Stylish modern lighting
Transform any environment
Thoughtfully curated modern lighting
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
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The
Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room
How To Choose The Right Lighting For Any Room

Text Styles - Combos

Explanation:

There are 7 types of text classes for working with 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.

Light it up
Light it up
Light it up
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination
Lasting solutions that provide a lifetime of illumination

etc…

Colors

Beige
#f7e4cf
White Smoke
#eeeff0
Black
#000000
Rosy Brown
#8f745f
Dark Slate Blue
#34345d
Light Cyan
#eaf4ff
Indian Red
#b83851
Red Lavender
#fff0f4
Dark Slate Green
#184742
Mint Cream
#e6f3ef
Dark Slate Purple
#4f367d
Lavender
#f5f0ff

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.”

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.”
Default LinkLink Style 1Link Style 3
Link Style 2
voir l'agenda complet
Les dimanches
Agenda
  • 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.

Rich Text

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. This image was taken in...

Labels

Premium
Premium
Premium
Premium

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Product Cards

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.

Wrappers

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]