Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Colors

Default

White

Black

Main

On Main

Details

Primary

10

20

30

40

50

60

70

80

90

100

System

Success

Warning

Error

Accent

Teal

Purple

Orange

Font Color
Font Color Secondary Text

Font Color / Secondary Text

Font Color Tertiary Text

Font Color / Tertiary Text

Font Color Primary

Font Color / Primary

Font Color Success

Font Color / Success

Font Color Warning

Font Color / Warning

Font Color Error

Font Color / Error

Font Color Teal

Font Color / Teal

Font Color Purple

Font Color / Purple

Font Color Orange

Font Color / Orange

Opacities

0

10

20

30

40

50

60

70

80

90

Typography

Headings

All H1 Headings

Plus Jakarta Sans

All H2 Headings

Plus Jakarta Sans

All H3 Headings

Plus Jakarta Sans

All H4 Headings

Plus Jakarta Sans

All H5 Headings

Plus Jakarta Sans

All H6 Headings

Plus Jakarta Sans
Paragraphs

Paragraph / 2XL

The quick brown fox jumps over the lazy dog.

Paragraph / XL

The quick brown fox jumps over the lazy dog.

Paragraph / LG

The quick brown fox jumps over the lazy dog.

All Paragraphs

The quick brown fox jumps over the lazy dog.

Paragraph / SM

The quick brown fox jumps over the lazy dog.

Paragraph / XS

The quick brown fox jumps over the lazy dog.

Link

Link / SM

Link / MD

Link / LG

Font Sizing
Font Sizing 2XL

Font Sizing / 2XL

Font Sizing XL

Font Sizing / XL

Font Sizing LG

Font Sizing / LG

Font Sizing MD

Font Sizing / MD

Font Sizing SM

Font Sizing / SM

Font Sizing XS

Font Sizing XS

Font Weight
Font Weight Thin

Font Weight / Thin

Font Weight Extra Light

Font Weight / Extra Light

Font Weight Light

Font Weight / Light

Font Weight Normal

Font Weight / Normal

Font Weight Medium

Font Weight / Medium

Font Weight Thin

Font Weight / Semibold

Font Weight Bold

Font Weight / Bold

Font Weight Extra Bold

Font Weight / Extra Bold

Font Weight Black

Font Weight / Black

Font Align
Font Align Left

Font Align / Left

HTML

Font Align Center

Font Align / Center

Font Align Right

Font Align / Right

Font Style
Font Style Normal

Font Style / Normal

HTML

Font Style Italic

Font Style / Italic

Font Capitalize
Font Capitalize All Caps

Font Capitalize / All Caps

Font Capitalize Every Word

Font Capitalize / Every Word

Font Capitalize Lowercase

Font Capitalize / Lowercase

Block Quotes

All Block Quotes

This is a block quote.
Lists
  1. This is an ordered list
  2. This is an ordered list
  3. This is an ordered list

All Ordered List

  • This is an unordered list
  • This is an unordered list
  • This is an unordered list

All Unordered List -Bullets

  • This is an unbulleted list
  • This is an unbulleted list
  • This is an unbulleted list

All Unordered List

Rich Text

This is 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.

  • list item
  • list item
  • list item

Edit static and dynamic 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!

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

UDESLY-START-PHPecho udesly_get_image(_u('i2cdc0b6e', 'img'))->altUDESLY-END-PHP
Style this image caption.
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.

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.

Components

Avatars
CRM team MetaConnect

Avatar / SM

CRM team MetaConnect

Avatar / MD

CRM team MetaConnect

Avatar / LG

Buttons

Primary

Button / Primary / SM

Button / Primary / MD

Secondary

Button / Secondary / SM

Button / Secondary / MD

Forms

Text Inputs

Thank you! Your submission has been received!
Oops! Something went wrong!

[↓] Form
···[↓] Form
······[→] Form / Input Field / SM

Thank you! Your submission has been received!
Oops! Something went wrong!

[↓] Form
···[↓] Form
······[→] Form / Input Field / MD

Message Inputs

Thank you! Your submission has been received!
Oops! Something went wrong!

[↓] Form
··[↓] Form
····[→] Form / Input Field / SM, Message

Thank you! Your submission has been received!
Oops! Something went wrong!

[↓] Form
··[↓] Form
····[→] Form / Input Field / MD, Message

Capture Fields

[↓] Email Form
··[↓] Form
····[→] Form / Capture Field / SM
····[→] Form / Capture Button / SM

[↓] Email Form
··[↓] Form
····[→] Form / Capture Field / MD
····[→] Form / Capture Button / MD

[↓] Email Form
··[↓] Form
····[→] Form / Capture Field / SM
····[→] Form / Circular Button / SM

[↓] Email Form
··[↓] Form
····[→] Form / Capture Field / MD
····[→] Form / Circular Button / MD

Icons

Font

person

Icon / Text / SM

person

Icon / Text / MD

Image

Icon / Image / SM

Icon / Image / MD

Label
Label SM

Label / SM

Label MD

Label / MD

Logo

Logo / SM

Logo / MD

Structure

Using a consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy your website on all their devices.

Grid

Grid

Grid + Gap / XS

Grid + Gap / SM

Grid + Gap / MD

Container

Container / SM

Container / MD

Container / LG

Cards

Card / SM

Card / MD

Card / LG

Card / XL

Layout

Display

Display / Horizontal

Display / Vertical

Display / Inline

Align

Align / Start

Align / Center

Align / Stretch

Justify

Justify / Start

Justify / Center

Justify / Space Between

Columns

Column / XS

Column / SM

Column / MD

Column / LG

Column / XL

Column / 2XL

Row

Row / XS

Row / SM

Row / MD

Row / LG

Row / XL

Row / 2XL

Max Width

Max Width / XS

Max Width / SM

Max Width / MD

Max Width / LG

Max Width / XL

Max Width / 2XL

Max Width / 100% / Tablet

Max Width / 100% / Portrait

Max Width / 100% / Phone

Margin
Example item
Example item
Example item

Margin / XS

Example item
Example item
Example item

Margin / SM

Example item
Example item
Example item

Margin / MD

Example item
Example item
Example item

Margin / LG

Example item
Example item
Example item

Margin / XL

Example item
Example item
Example item

Margin / 2XL

Example item
Example item
Example item

Margin / 3XL

Example item
Example item
Example item

Margin / 4XL

Example item
Example item
Example item

Margin / 5XL

Hide and Show

Hide / All

Hide / On Desktop

Hide / On Tablet

Hide On / Landscape

Hide / On Portrait

Show / On Phone

Show / On Portrait

Overflow Hidden

Size

Width / 25%

Width / 50%

Width / 75%

Width / 100%

Width / 100%, + Cover

Height / 100%

Launch Fast With Our Dynamic Templates

Get Started