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.
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
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.
  3. 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
Input Label
Name
*
Text Field
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.