Typography

Thrive UI toolkit - this is a heading 1

H2 heading

H3 heading

H4 heading

Paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, non?

All classes are prefixed with tvd-

Alignment classes

Add .left-align class

Add .right-align class

Add .center-align class

Float classes

Add .left class

Add .right class

Forms

New select no search box

New select search box

New select optgroups

New select combobox

New select data sources




Button green Button green spinner Button blue Button gray Button red Button red Button flat primary Button flat secondary Button flat disabled Button flat secondary
Button flat primary Button flat secondary Button flat disabled




Test 1
Test 2
Test 3
Test 4
Test 1
Test 2
Test 3
Test 4

Cards

Default State

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Inactive State

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Enter your license details:

No Dashboard

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Many options

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Thrive Features

API Connections

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Custom Fonts

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Retina Icons

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

General Settings

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Other card states

ArpReach

Tag
Tag
Tag

Inactive State

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Enter your license details:

License Activated!

We weren’t able to validate your license.

Reason: invalid key

Preloader card

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

API states

Connection Error

Add new Connection

Add new Connection

Testing...

Connection works!

The connection failed.

Edit settings

Are you sure you want to delete this connection?

Modals

Simple

Modal

Create a new connection:

Modal width loader

Modal

Create a new connection:

Green modal

Modal

Connection Ready!

You can now connect your opt-in forms to Constant Contact. See how it’s done.

Orange modal

Modal

The connection didn't work.

Error message: [whatever message we can show here].

Collapsible

Collections

Collections with header

Switch

Slider




Date picker

Default State

Lorem ipsum dolor sit amet elit adipiscing nunc ipsum lorem.

Date picker on an icon

Toast

Toast!