This announcement bar can be used to inform users of your Privacy Policy etc.
Modular & Reusable

Style Guide

Colors

Primaries and grays
Primary
tpx_Red
#E21D38
tpx_Blue
#001066
tpx_Purple
#041E3D
tpx_LightBlue
#5E0089
tpx_Mint
#00D08E
tpx_Lime
#D79F6E
tpx_Orange
#E3961B
tpx_Blue_70
#001066 @70%
Note: The numbers Primary 1, Primary 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Primary 1" , "BG Primary 2" etc.
Gray
tpx_Black
#000000
tpx_BodyTextGrey
#303030
tpx_LightGrey
#F1F1F1
tpx_MidGrey
#E0E0E0
tpx_White
#FFFFFF
Note: The numbers Gray 1, Gray 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Gray 1" , "BG Gray 2" etc.
Status
Success
#51D37E
Warning
#FAB14E
Danger
#FC4343
Info
#8ae2f0
Note: The colors Success, Warning, Danger and Info refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Success" , "BG Warning" etc.
Gradients
tpx_Gradient_ROB
#51D37E
Note: The colors Success, Warning, Danger and Info refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Success" , "BG Warning" etc.

Type

Headings, body and other common text elements.
Display 1
Display 2
Note: You can make any text element display as a 'Display 1' or 'Display 2' size by adding the class 'Display 1' or 'Display 2' to it.

Heading one

Heading one

Heading two

Heading two

Heading three

Heading three

Heading four

Heading four

Heading five
Heading five
Heading six
Heading six
Heading six small

Body Text

Large Text   
Lead Link
Body Text   
Body Text   
Text Link
Underlined Link
Small Text   
Small Text Muted
Text Link
Small Caps

Icons

Common interface and social network iconography
Interface icons
Social icons

Buttons

Component, text style and size variations
Sizes
Note: Use the class "Button" on an element to format as a button. To format as a large or small button, add the class "Button Large" or "Button Small"
Variations
Note: Add the class "Button Outline" a "Button" element to format as an outlined button.
Round

Forms

Size and state variations for text inputs and selectables.
Input Sizes
Note: Add the class "Form Input" a form input element to format as above. Add the classes "Form Input Small" or "Form Input Large" to control the size.
Textarea
Checkboxes + Radios
Dark Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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!

Lorem ipsum solor amet.

I am Link

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.

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!

Lorem ipsum solor amet.

I am Link

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.