7.8.0
Pages
Kits

Kits


Avatar

Default






Monogram


Status





Avatar Action Button

Default


Placement


Actions


On Click


Tooltip


Background

Light


White


Dark


Gradient


Image

Background Kit Image

We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. -Cesar Chavez

Button

Button Variants


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


Button Toolbar

Default


Secondary


Circle Icon Button

Default





Link



Card

Default

Card content

Highlight Cards

Card content

Card content

Header Cards

Category Colors


category_1
Body

category_2
Body

Product Colors


Siding
Body

Gutters
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

No Border

Card content

Checkbox

Default


Load as checked


Custom Checkbox


Default w/ Error


Checkbox w/ Options


Bar Graph

Default


Legend


Legend Non Clickable


Height




Circle Chart

Default Style


Rounded Corners


Accepts Any Block



83

Color Overrides


Data Labels


Legend


Title


Inner Circle Size Options


Distribution Bar

Default




Gauge

Default


Disable Animation


Title


Units


Full Circle


Min Max Labels


Sizing


Height


Legend

Default

Doors
Roofing
Siding
Solar
Gutters
Insulation
Other

With Prefix Text

10 Windows

Line Graph

Default


Legend


Legend Nonclickable


Height




Filter

Default

name

John Wick

city

San Francisco

Results:

1
sort by:

No Background

name

John Wick

city

Las Vegas

3 Results

name

John Wick

city

Las Vegas

Results:

3
sort by:

Single

name

John Wick

546 Results

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 here to generate report


Click to Close

Error Message



Items Successfully Moved



Scan to Assign Selected Items


Dark

Error Message



Items Successfully Moved



Scan to Assign Selected Items


Multi Line Dark

Scan to Assign Selected Items. Click here to generate report.


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

Date Picker

Default

Date Picker

Hide Input Icon

Date Picker

Default Date

Default Date String
Default Date Dynamic
Default Date Range
Default Behavior

Input Field

Aria, Name, and Data Attributes
Custom Placeholder
Blank Placeholder
Disable Input

Label

Your Label Here

Range

Date Picker

Format

Date Picker
Date Picker
Date Picker
Date Picker

Disabled Dates

Disable Single Date
Disable Multiple Dates
Disable Single Range
Disable Multiple Ranges
Disable Specific Weekdays

Min Max

Dynamic dates
Absolute formatted dates

Error

Date Picker
Invalid date. Please pick a valid date.

Hooks

onChange
onOpen

Year Range

Date Picker

File Upload

Form

Default (Form With)


Default (Form With) + Validation


Default (Simple Form)


Default (Simple Form) + Validation


Form Group

Default

First Name
Middle Intial
Last Name

Button

with label



Date Picker

Event
Event Date

Select

Artist

Selectable Card


Selectable Card Icon


Form Pill

Form Pill User

Anna Black



Anna Black


Form Pill Tag

this is a tag


Radio

Default




Custom




With Error


With Options


Select

Default


Blank Selection Text


Disabled Options


Disabled Select Field


Required Select Field


Equal option value and value text


Custom Select


Select w/ Error


Selectable Card

Default


Single Select


Block




With Options


Image Example


Selectable Card Icon

Default


Checkmark


Single Select


With Options


Selectable Icon

Default


Single Select


With Options


Selectable List

Default


Radio variant


Text Input

Default

First Name
Last Name
Phone Number
Email Address
Zip Code

With Error

Email Address
Please enter a valid email address
Confirm Email Address

Custom

Custom Input

Disabled

Last Name

Textarea

Default

Label

Label

Label

Custom Textarea Input

Label

Resize

vertical

both

horizontal

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




With Pills


With Pills (Async Data)


With Pills (Async Data w/ Users)


Toggle

Default State



Name and Value

Which of the following vehicles do you own?


Car

Bike

Custom checkbox input


Custom radio inputs

Select one option:


Walk

Bike

Ride

Toggle w/ Options


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.



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


Dark


Dark Size






Dark Color


Icon Stat Value

Default

64.18

 
kw
Electric

24

 
days
deadline

Size

158.3

 
mi
distance driven

158.3

 
mi
distance driven

158.3

 
mi
distance driven

Vertical

102.5

 
wkz
Radio

Color

0.39

 
AU
Mercury

0.723

 
AU
Venus

1.0

 
AU
Earth

1.524

 
AU
Mars

5.203

 
AU
Jupitar

9.539

 
AU
Saturn

19.18

 
AU
Uranus

Icon Value

Default

93

5

15m

Align

93

5

15m

Dark

93

5

15m

Align Dark

93

5

15m

Image

Default








Rounded






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

Collection Layout

Card content

Title 4

Title 3

Anna Black

Remodeling Consultant

Title 4

Title 2

Title 1

Card content
Card content

Anna Black

Remodeling Consultant
Card content

Title 4

Title 3

Title 2

Title 1


Collection Detail Layout

Menu
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content

Kanban Layout

Queued
Kanban Item
In Progress
Kanban Item
Kanban Item
Kanban Item
Validation
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Kanban Item
Done
Kanban Item
Kanban Item
Kanban Item
OKRs
Kanban Item
Kanban Item
Kanban Item
Bugs
Kanban Item
Kanban Item
Kanban Item
Another Column
Kanban Item
Kanban Item
Kanban Item
Another Column
Kanban Item
Kanban Item
Kanban Item
A Final Column
Kanban Item
Kanban Item
Kanban Item

Content Layout

Header
Sidebar

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

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

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

Layout Left

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

Layout Right

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

  • Label

    Caption
    $

    2,000

    .50

Loading Inline

Light

Loading
Loading
Loading

Multiple Users

Default

+2



Reverse

+2



Multiple Users Stacked

Default





+4

Nav

Default

Menu

With Icons

Browse

With Custom Icon

Browse

No Highlight


No Borders


Subtle Variant


Subtle With Icons


Subtle No Highlight


Horizontal Nav


Block

Menu

Without Title


Online Status

Default




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

Hashtag

Hashtag Types

P#470297


H#123456


A#345678


#123456

Pill

Default

default



success



error



warning



info



neutral



primary


Popover

Default

Click info for more details
 

Example as dropdown


Close Options


Set Z-Index

I've got a z-index of 2

Scroll and Height Settings


Dark

Click info for more details
 

List Dark


Close Dark


Z-Index Dark

I've got a z-index of 2

Scroll and Height Settings Dark


Progress Pills

Default


Status

Status:

Orientation

Progress Simple

Default


Setting Values



Progress Bar Width


Variants




Muted


Align




Progress Step

Default



  • step 1
  • step 2
  • step 3
  • step 4
  • step 5


  • step 1
  • step 2
  • step 3

Vertical



  • Child
  • Card content

    Card content
  • Child

Tracker



  • Ordered
  • Shipped
  • Delivered


Custom Icon



  • Ordered
  • Shipped
  • Delivered

Rich Text Editor

Default


Simple


Focus



Sticky


Templates


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

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

Row Alignment

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

Column Alignment

Column 1 Column 2 Column 3 Rating Money
Value 1 Value 2 Value 3 3 $57.32
Value 1 Value 2 Value 3 2 $5,657.08
Value 1 Value 2 Value 3 4 $358.77

Shift Row

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1a
Value 1a
Value 1a 		Value 2a Value 3a Value 4a Value 5a
Value 1b
Value 1b
Value 1b 		Value 2b Value 3b Value 4b Value 5b
Value 1c
Value 1c
Value 1c 		Value 2c Value 3c Value 4c Value 5c

Shift Column Data

  Price
Total $12
$46
$25
-------
$83

Espresso Drinks Ingredients
Cappuccino Espresso
Steamed Milk
Milk Foam
Macchiato Espresso
Steamed Milk
Mocha Espresso
Hot Chocolate
Steamed Milk

Side Highlight

Product Colors Column 2 Column 3 Column 4 Column 5
Solar Value 2 Value 3 Value 4 Value 5
Roofing Value 2 Value 3 Value 4 Value 5
Gutters 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

Cateogry Colors Column 2 Column 3 Column 4 Column 5
Category Color 1 Value 2 Value 3 Value 4 Value 5
Category Color 2 Value 2 Value 3 Value 4 Value 5
Category Color 3 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 with 1 Action

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

Table with 2 Actions

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

Table with 2+ Actions

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

Table with Actions in the Middle

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

Table with Icon Buttons

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

Timeline

Default

Conversation started
Trip #12422
Refund issue #12422
Conversation resolved


Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Vertical

Conversation started
Trip #12422
Refund issue #12422
Conversation resolved


Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

With Date

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Society Hill

72 E St Astoria



Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Society Hill

72 E St Astoria

Tooltip

Default

Hover here (Top)
Hover here (Bottom)
Hover here (Right)
Hover here (Left)

White

I am a white tooltip.

Body

Default

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

Default

Caption
Caption Large
Subcaption

Block

Block
Large Block
Subcaption Block

Title

Light UI

Default Title


Title 4

Title 3

Title 2

Title 1


Variants

Title 4 (link)


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

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

Nov 27

Aug 2, 2012

Sat
•
Dec 2, 2017


Nov 27

Aug 2, 2012

Sat
•
Dec 2, 2017

Variants

Nov 27

Nov 27

Fri
•
Nov 27

Fri
•
Nov 27

Alignment

Fri
•
Nov 27


Fri
•
Nov 27


Fri
•
Nov 27

Timezones

East Coast (Default)
Nov 27

West Coast
Nov 27

Toyko, Japan
Nov 28

Anti-pattern example
Nov 27
Date.today ignores Timezone

DateTime respects Timezone
Nov 28
'.now' in Australia is tomorrow (if you're EST after 10am)

String Dates
Aug 1, 2012
Defaults to UTC, then changes due to EST Timezone.

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

Default

Fri
•
Nov 27
3:01p EST

Fri
•
Nov 27
3:01p EST

Nov 27
3:01p EST

Nov 28
5:01a JST

Alignment

Nov 27
3:01p EST

Nov 27
3:01p EST

Nov 27
3:01p EST

Size

Fri
•
Nov 27

Nov 28


Fri
•
Nov 27
3:01p EST

Nov 28
5:01a JST

Date Time Stacked

Default

01:26a
EST

Dark

01:26a
EST

Date Year Stacked

Default

27 NOV

2020


27 NOV

2020


27 NOV

2020

Dark

27 NOV

2020


27 NOV

2020


27 NOV

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

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.

Details

Installer

JD Installations LLC


Project
33-12345

Jefferson-Smith


Project
33-12345

Jefferson-Smith

· 11/18

Project
33-12345

Jefferson-Smith

· 11/18

Other Examples

Patient Profile

Age

24 yrs old

Weight

91 kg

Blood

A +

Height

187 cm




Workout Schedule

Chest
6 sets • 8 reps • 40-100 kg

Bench Press

Biceps
5 sets • 12 reps • 20-40 kg

Barbell Curl

Back
8 sets • 8 reps • 40-120 kg

Back Squat


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

Default






3:01p

3:01p EST

11:49a

11:49a EDT

Sizes


3:01p EST

Timestamp Values




Handling Timezones

East Coast


Central


Mountain


West Coast


Toyko, Japan


Alignment




Time Stacked

Default

03:01p
EST

03:01p
EST

03:01p
EST

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

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


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

User Badge

Default




Sizes