Style

guide

heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
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.

rich text

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.

colors
Cadet Blue
#529bb6
Dark Slate Blue
#283b59
black
#222222
white
#ffffff

CSS_sheet

cards

Upscale sales
No items found.
No items found.

CSS_shMaeet

Upscale sales

Upscale sales

Upscale sales

Marquee text

1. Text styling

1.1 Font types

This is a taglineThis is a taglineThis is a taglineThis is a taglineThis is a taglineThis is a tagline.

Heading

Heading

Heading

Heading

Heading

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

This is a quote This is a quote This is a quote This is a quote This is a quote This is a quote This is a quote This is a quote This is a quote This is a quote This is a quote

Heading

1.2 Font color

Basic

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

System

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

Special

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

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.

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.

Head ing

1.3 Font sizing

Px

Font-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-small

Font-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-small

Font-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-small

font-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-big

Ch

font-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-ch

font-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-ch

1.4 alignment

Breaking:no wrapBreaking:no wrapBreaking:no wrapBreaking:no wrap Breaking:no wra

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.

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.

Heading

<style>
.outline-white {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #ffffff;
</style>

<style>
.outline-black {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #000000;
</style>

<style>
.outline-misc {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #??????;
</style>

Text shadow

2. buttons

<button>

Button Text Button Text Button Text Button Text Button Text

Special buttons

gallery

gallery

3. bg colors

Base

System

Special

4. card

5. filters

6. form

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

misc

spacing

Size

seperators

Je kunt hier de dikte van se seperators aanpassen.

voeg een seperator toe, deze heeft geen bg. De breedte gebruik je de wid30, 50 of 100. de kleur doe je met bg-color. wil je een overlopende seperator? gebruik dan een achtergrond die radial is en de zijkanten transparant maken.

Structuur

Je kunt hier de basisstructuur van de website aanpassen.

Standaardformaat zit er nu in. Gebruik X-Ray mode om te zien.

Measurements

Flexbox

Vertical

Horizon

Position

Shadow

Opacity

Responsive