4.16.0


Kits

Tokens


Kits


Avatar

Default






Monogram


Status





Badge

Rectangle

+1
+4
+1000

Rounded

+1
+4
+1000

Colors

+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000

Dark

+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000

Button

Button Variants


Button Variants Dark


Button Full Width


Button Links

A Tag Button Open in new Window A Tag Button Disabled
Button Loading


Button Block Content


Button Accessibility Options

Button with ARIA
Button Additional Options


Circle Icon Button

Default





Dark





Link


Card

Default

Card content

Dark Cards

Dark Card content

Highlight Cards

Card content

Card content

Header Cards

Header
Body

Header
Body

Selected

Card content

Card content

Padding Size

Card content

Card content

Card content

Card content

Card content

Shadow Size

Card content

Card content

Card content

Card content

Content Size

Card Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.

Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.

Separator Card

Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
Footer

Checkbox

Default


Load as checked


Dark


Custom Checkbox


Default w/ Error


Dark w/ Error


Bar Graph

Default


Legend


Height




Legend

Default

Doors
Roofing
Siding
Solar
Gutters
Insulation
Other

With Prefix Text

10 Windows

Dark Mode

Doors
Roofing
Siding
Solar
Gutters
Insulation
Other

Dark Mode with Prefix Text

10 Windows

Line Graph

Default


Legend


Height




Distribution Bar

Default




Circle Chart

Default Style


Data Labels


Legend


Title


Inner Circle Size Options


Filter

Default

name

John Wick

Results:

546
sort by:

Single

name

John Wick

546 Results

No Background

name

John Wick

1 Result

name

John Wick

Results:

546
sort by:

Filter Only

name

John Wick


Sort Only


Fixed Confirmation Toast

Default

Error Message



Items Successfully Moved



Scan to Assign Selected Items


Multi Line

Scan to Assign Selected Items. Click X to close at any time


Flex

Default

Row


1
2
3
4


Column


1
2
3
4

Inline

Row


1
2
3
4


Column


1
2
3
4

Reverse

Row


1
2
3
4


Column


1
2
3
4

Wrap

Wrap


1
2
3
4
5
6
7
8
9
10


No Wrap


1
2
3
4
5
6
7
8
9
10

Spacing

None


1
2


Around


1
2


Evenly


1
2


Between


1
2

Horizontal Alignment

Row


1
2
3
4


1
2
3
4


1
2
3
4


Column


1
2
3
4


1
2
3
4


1
2
3
4


1
2
3
4

Vertical Alignment

Row


1
2
3
4


1
2
3
4


1
2
3
4


1
2
3
4


Column


1
2
3
4


1
2
3
4


1
2
3
4

File Upload

Form

Default (Form With)


Default (Form With) + Validation


Default (Simple Form)


Default (Simple Form) + Validation


Form Pill

Form Pill User

Anna Black



Anna Black


Form Pill Tag

this is a tag


Radio

Default




Dark




Custom




With Error


With Error


Select

Default


Blank Selection Text


Disabled Options


Disabled Select Field


Required Select Field


Equal option value and value text


Custom Select


Dark Select


Select w/ Error


Select Dark w/ Error


Selectable Card

Default


Single Select


Block




Dark


Selectable Card Icon

Default


Checkmark


Single Select


Dark


Selectable Icon

Default


Single Select


Dark


Text Input

Default

First Name
Last Name
Phone Number
Email Address
Zip Code

Dark

First Name
Last Name
Phone Number
Email Address
Zip Code

With Error

Email Address
Please enter a valid email address
Confirm Email Address

Dark With Error

Email Address
Please enter a valid email address
Confirm Email Address

Custom

Custom Input

Textarea

Default

Label

Label

Label

Custom Textarea Input

Label

Dark

Label

Label

Label

Resize

vertical

both

horizontal

Textarea w/ Error

Label
This field has an error!

Textarea w/ Error

Label
This field has an error!

Typeahead

Default

user



Use the above input to search for users on Github, and see the results as you type.
When you make a selection, you will see it apear in the list below

With Context

Crayola Crayons




Toggle

Sizes



Default State



Name and Value

Which of the following vehicles do you own?


Car

Bike

Custom checkbox input


Custom radio inputs

Select one option:


Male

Female

Other

Highlight

Default

Highlight Kit

Kit wrapping


This an example Highlight Example around.


Search


hello helpers are great even highlighting this


To enable highlighting make sure the [highlighting] flag is set to true.



Hashtag

Hashtag Types

P#470297


H#123456


A#345678


#123456

Dark

P#470297


H#123456


A#345678


#123456

Icon

Icon Default


Icon Rotate


Icon Flip


Icon Animation

Spin


Pulse


Icon Pull


Icon Border


Icon Sizes

Large

Small

XSmall



1x

2x

3x

4x

5x

6x

7x

8x

9x

10x


Icon Default Dark


Icon Circle

Default


Size


Color


Icon Value

Default

93

5

15m

Align

93

5

15m

Image

Default


Layout

Colors

Light
Body


Dark
Body


Gradient
Body

Transparent

Side
Body

Sizes

Side
Body


Side
Body


Side
Body


Side
Body


Side
Body

Sizes Dark

Side
Body


Side
Body


Side
Body


Side
Body


Side
Body

List

Default

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Large

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Ordered

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Borderless

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Horizontal Padding

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Dark Default

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Dark Large

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Dark Ordered

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Dark Borderless

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Dark Horizontal Padding

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Loading Inline

Light

Loading
Loading
Loading

Dark

Loading
Loading
Loading

Logistic

Default

Project
33-12345 Jefferson-Smith · 11/18


Project
33-12345 Jefferson-Smith · 11/18


Project
33-12345 Jefferson-Smith


Project
33-12345 Jefferson-Smith

Dark

Project
33-12345 Jefferson-Smith · 11/18


Project
33-12345 Jefferson-Smith · 11/18


Project
33-12345 Jefferson-Smith


Project
33-12345 Jefferson-Smith

Multiple Users

Default

+2



Reverse

+2



Multiple Users Stacked

Default





+4

Nav

Default

Menu

With Icons

Browse

No Highlight


Subtle Variant


Subtle With Icons


Subtle No Highlight


Horizontal Nav


Block

Menu

Without Title


Online Status

Default




Pill

Default

default



success



error



warning



info



neutral



primary


Popover

Default

Click Me.

With any children


Close on click outside


Close on click inside


Close on click anywhere


Progress Pills

Default


Status

Status:

Orientation

Dark

Status:

Orientation

Progress Simple

Default


Setting Values



Progress Bar Width


Muted


Align




Progress Step

Default





Child
Child
Child

Vertical



Child
Child
Child

Dark


Section Separator

Text Separator

Title Separator

Line Separator

Background Variant

Title Separator

Vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Dark

Title Separator

Source

Default

BJ's Johnston-208

Retail


Referral-phrg

Inbound


BJ's Future CB

Anna Black
48582

Hide Icon

BJ's Johnston-208

Retail


Referral-phrg

Inbound


BJ's Future CB

Anna Black
48582

Source Types

BJ's Johnston-208

Retail


Referral-phrg

Inbound


B.B.B. Outbound

Outbound


Contractor.com

Prospecting


Beards, Beers and Brats

Events


BJ's Johnston-208

Referral


Employee Referral

Anna Black
48582


BJ's Future CB

Anna Black
48582

Star Rating

Default

0

3

1.5

5

Hide Rating Value


Stat Change

Default

28.4%

6.1%

102%

Table

Small

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Medium

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Large

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Side Highlight

Product Colors Column 2 Column 3 Column 4 Column 5
Windows Value 2 Value 3 Value 4 Value 5
Siding Value 2 Value 3 Value 4 Value 5
Doors Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Status Colors Column 2 Column 3 Column 4 Column 5
Success Value 2 Value 3 Value 4 Value 5
Warning Value 2 Value 3 Value 4 Value 5
Error Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Table Container Off

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Disable Hover

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Multi-line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5

Force Single Line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5

Data Table

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Responsive Tables

Default

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Responsive Off

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Table Dark

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Table Container Off Dark

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Tooltip

Default

Hover over me.

White

I am a white tooltip.

Body

Light UI

I am a body kit
I am a body kit (Light)
I am a body kit (Lighter)
I am a body kit (Status: negative)
I am a body kit (Status: positive)

Dark UI

I am a body kit
I am a body kit (Light)
I am a body kit (Lighter)
I am a body kit (Status: negative)
I am a body kit (Status: positive)

Block

I am body kit

Caption

Light UI

Caption
Caption Large
Subcaption

Dark UI

Caption
Caption Large
Subcaption

Title

Light UI

Default Title


Title 4

Title 3

Title 2

Title 1


Dark UI

Default Title


Title 4

Title 3

Title 2

Title 1


Contact

Default

(349) 185-9988
(555) 555-5555
email@example.com
(324) 562-7482
(349) 185-9988

Detail Indicator

(349) 185-9988 Cell
(555) 555-5555 Home
(324) 562-7482 Work
(324) 562-7482 Work-Cell

Currency

Small

Caption
$

2,000

.50
Caption
€

342

.00
Caption
$

45

/mo

Medium

Caption
$

2,000

.50
Caption
€

342

.00
Caption
$

45

/mo

Large

$

2,000

.50
Caption
€

342

.00
Caption
$

45

/mo

Dark

$

2,000

.50
Caption
€

342

.00
Caption
$

45

/mo

Dashboard Value

Full Example

Decreased Value

1,428

 

appts

26.1%


Increased Value

938

 

homes

56.1%


Neutral Value

261

 

windows

86%

Align

Top Title Value

1,428

 

appts

26.1%


Top Title Value

1,428

 

appts

56%


Top Title Value

1,428

 

appts

86.1%

Date

Default

JUN 5


FRI · JUN 5

THU · AUG 2


Date Range Inline

Default


Date Range Stacked

Default

18 JUN

2019

20 MAR

2020

Dark

18 JUN

2019

20 MAR

2020

Date Stacked

Default



Not Current Year



Day & Month Reverse



Sizes



Alignment







Dark



Date Time Stacked

Default

09:07p
EDT

Dark

09:07p
EDT

Date Year Stacked

Default

5 JUN

2020


5 JUN

2020


5 JUN

2020

Dark

5 JUN

2020


5 JUN

2020


5 JUN

2020

Home Address Street

Default

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382
H#8250263
PHL

Emphasis

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382
H#8250263
PHL


70 Prospect Ave · Colonial
Apt M18
West Chester, PA 19382
H#8250263
PHL

Modified

70 Prospect Ave

West Chester, PA 19382
PHL

Dark

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382
H#8250263
PHL

Label Pill

Default

Service Needed

76

Waiting

69

In Service

28

Fully Serviced

101

Inbox

197

Outbox

13

Inbox

218


Label Value

Default

Role
Administrator, Moderator

Email
anna.black@powerhrg.com

Bio
Proin pulvinar feugiat massa in luctus. Donec urna nulla, elementum sit amet tincidunt nec, mattis nec urna. Cras viverra lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae orci vehicula condimentum.

Dark

Role
Administrator, Moderator

Email
anna.black@powerhrg.com

Bio
Proin pulvinar feugiat massa in luctus. Donec urna nulla, elementum sit amet tincidunt nec, mattis nec urna. Cras viverra lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae orci vehicula condimentum.

Message

Default

Message
How can we assist you today?
20 seconds ago


Support
We'll escalate this issue to a Senior Support agent.
9 minutes ago


To processs your order, I'll need your full name.
4 hours ago


Application
Application for Kate Smith is waiting for your approval


Complaint
We're so sorry you had a bad experience!
2 days ago


Support
Please hold for one moment, I'll check with my manager.
2 days ago

Person

Default

Kyle

Fadigan


Person Contact

Default

Pauline

Smith

email@example.com
(555) 555-5555
(324) 562-7482

Multiple People

Harvey

Walters

email@example.com
(555) 555-5555
(324) 562-7482
Brenda

Walters

(555) 555-5555

With Detail

Harvey

Walters

email@example.com
(555) 555-5555 Home
(324) 562-7482 Work

With Wrong Numbers

Pauline

Smith

email@example.com
(555) 555-5555
(304) 861-5385
wrong number
(324) 562-7482

Stat Value

Default

1,048

 


Unit Value

5,294

 

appt


Time

Sizes

2:40p EDT



Timestamp Values




Time Stacked

Default

02:40p
EDT

With Caption

02:40p
EDT

Dark

02:40p
EDT

Timestamp

Default

20 seconds ago

Time Range Inline

Default

11:49a — 1:49p

11:49a — 1:49p


11:49a — 1:49p EDT

11:49a — 1:49p EDT


11:49a — 1:49p

11:49a — 1:49p


11:49a — 1:49p EDT

11:49a — 1:49p EDT

Dark

11:49a — 1:49p

11:49a — 1:49p


11:49a — 1:49p EDT

11:49a — 1:49p EDT


11:49a — 1:49p

11:49a — 1:49p


11:49a — 1:49p EDT

11:49a — 1:49p EDT

Title Count

Default

Appointments

35.78

Appointments

7,399

Appointments

-379,503.372

Align

Remodeling Consultants

527

Remodeling Consultants

527

Remodeling Consultants

527

Title Detail

Default

Email Notifications

Commits data and history

Email Notifications

Commits data and history

Email Notifications

Commits data and history

Weekday Stacked

Default


Dark


Compact


Variant


User

Default

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black


Anna Black


With Territory

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Text Only

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Horizontal Size

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Vertical Size

Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant

Dark

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black


Anna Black


Text Only

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

User Badge

Default




Sizes