Styleguide

Colours

Background colours
BG Main
Main Colour

Editing this Global Colour will change the main background colour across the website

BG Accent One
Accent one

Editing this Global Colour will change the lighter background accent across the website

BG Accent Two
Accent two

Editing this Global Colour will change the darker background accent across the website

BG Accent Three
Accent three

Editing this Global Colour will change the darker background accent across the website

BG Accent Two 40%
Accent two 40%

Editing this Global Colour will change the darker background accent across the website

BG Accent Three 40%
Accent three 10%

Editing this Global Colour will change the darker background accent across the website

BG Darkest
Background Darkest Colour

Editing this Global Colour will change the darkest background accent across the website

Buttons

shop collections
Button Basic One
shop collections
Button Basic One Outlined
shop collections
Button Basic Two
shop collections
Button Basic Two Outlined
shop collections
Button Basic Two
Small
shop collections
Button Basic Two Outlined
Small

Headings

Template for modern creatives

All H1 Headings

You can use spans to create accents inside the Headings. ("Caps", "Italic, Accent One")

Heading

All H1 Headings

Heading

All H2 Headings

Heading

All H3 Headings

Heading

All H4 Headings
Heading
All H5 Headings
Heading
All H6 Headings

Texts & Links

Text Italic
Text Italic
Text Bold
Text Bold
Caps accent
Caps Accent
Caps bigger accent
Caps Bigger Accent
Instagram Accent
Instagram Accent
Accent One
Accent One

Accent Text One (H1)

Accent Text One

Accent Text Two (H2)

Accent Text Two

Accent Text Three (H3)

Accent Text Three

Accent Text Four (H4)

Accent Text Four

Regular Link

All Links

Regular Link

Link Reversed

Link Light

Link Light

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.

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Paragraph Bigger

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.

Paragraph Accent One

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.

Paragraph Smaller

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.

Paragraph Smallest

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.

Paragraph Smaller
Paragraph Lighter

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.

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!

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.

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.

explore more templates by zerocodegirl