Style Guide

Consistent & customizable styles used across the Corpex Template

Colors

Manage colors through the variables panel

Neutral

Darker

Dark

White

Brand

Coral

Coral 80

Purple

Light Purple

Pink

Text

Text 80

Text 64

Text 56

Text 48

Typography

HTML Tags, Headings, Paragraphs, Subheadings, Labels, Rich Text

HTML Tags

H1 Heading

The quick brown fox jumps over the lazy dog

H2 Heading

The quick brown fox jumps over the lazy dog

H3 Heading

The quick brown fox jumps over the lazy dog

H4 Heading

The quick brown fox jumps over the lazy dog

H5 Heading

The quick brown fox jumps over the lazy dog

H6 Heading

The quick brown fox jumps over the lazy dog

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Text Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Link

Lorem ipsum

Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Subheading

Subheading Regular

Lorem ipsum dolor sit amet

Subheading Small

Lorem ipsum dolor sit amet

Paragraphs

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph X Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Label

Label Regular

Lorem ipsum dolor sit amet

Label Small

Lorem ipsum dolor sit amet

Text Colors

Text Color White

Text Color 80

Text Color 56

Gradients

Text Gradient Light

Text Gradient

Text Gradient Dark

Text Gradient Primary

Text Weights

Text Weight Regular

Text Weight Medium

Text Weight Semibold

Text Alignment

Text Align Center

Text Align Left

Text Align Right

Rich Text

Rich Text Block

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

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!

Example List
Example List
Example List

Structure

Sections, Containers, Spacing

Sections

Section X Small

Section Small

Section Regular

Section Large

Containers

Container X Small

Container Small

Container Regular

Container Large

Container X Large

Max Widths

Max Width Small

Max Width Medium

Max Width Large

Max Width X Large

Wrap V

Column Tiny

Column X Small

Column Small

Column Regular

Column Large

Column X Large

Wrap H

Row Tiny

Row X Small

Row Small

Row Regular

Row Large

Grid

Grid Two Column

Titles

Title Wrapper Small

Title Wrapper Medium

Title Wrapper Large

Title Grid

Other

Page Wrapper

Elements

Buttons, Icons

Buttons

Button Primary

Button Text

Button Primary

Large

Button Text

Button Secondary

Button Text

Icons

Icon X Small

Icon Small

Icon Regular

Icon Large

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.