Avatar

Placeholder type

Icon type

Text type

Circular with image

Sizes

Border

Zoom icon

Bar

Bar (compact)

Bar side paddings

Size "s"

Size "m_l"

Size "xl"

Responsive

Bar header with subheader and title

TEXT

Bar footer

Busy indicator

Sizes

With text

Very busy...

Button

Button styles

Button states

Compact button

Toggle button

Segmented button

Menu button

Split menu button

Icon button

Button with badge

Card

New

Card Title

Card Subtitle

1 of 10

Item 1

Item 2

Item 3

Card with table

New

Table Card

Compact mode

4 of 10

Name	Status	Price	Country
Banana		5 EUR	India
Pineapple		2 EUR	Mexico
Orange		6 EUR	Spain

Checkbox

States

Default

Checked

Required

Error

Success

Warning

Information

Hover

Disabled

Indeterminate

Default (readonly)

Checked (readonly)

Indeterminate (readonly)

Sizes

Compact

No label

Display-only mode

In display-only Mode, the checkbox is replaced by two icons to represent the checked and unchecked states. The control becomes a simple icon.

Unchecked Icon

Checked Icon

Indeterminate

ComboBox

ComboBox Input

ComboBox Input Dynamic

Multi Combobox

Field Set

Group Radio 1

Group Radio 2

Group Radio 3

Inputs

Default input (regular)

Default input (hover)

Required input

Horizontal text

Passowrd

Error input

Success input

Warning input

Information input

Date

Number

Textarea

Some text

Textarea error

Some text

Textarea success

Some text

Textarea warning

Some text

Textarea information

Some text

Input Group

Input group with buttons and icons

Input error with message

Something is very wrong here.

Textarea error with message

Some text

Something is very wrong here.

Radio

Checked

Unchecked

Icon Tab Bar

Text only

Text only with semantic colors

Text and counters

Icon only with counters

Icon only with semantic colors

Icon with description and counters

Process mode

Badge

Filter

Overflow

Overflowable

Extra button group

Unfocused tabs mode

Side paddings

Navigation tab bar

Closable tabs

Tab panels

Panel content for the first tab

Panel content for the second tab

Panel content for the last tab

Translucent mode

Panel content

Transparent mode

Panel content

List

Default List

List Item 1

List Item 2

List Item 3

More Options

List with icons and buttons

List Item 1

List Item 2

List Item 3

Interactive List

List Item 1

List Item 2

List Item 3

Navigation List

List Item 1 (inactive)

List Item 1

List Item 2

List Item 3

Scrollable list

List Item 1

List Item 2

List Item 3

List Item 4

List Item 5

List Item 6

List Item 7

List Item 8

List Item 9

Selection List (compact)

List Item 1

List Item 2

List Item 3

Byline List

Byline (description)

First text item in byline (standard text)

Second text item in byline (can be semantic)

Byline Navigation List

Byline (description)

First text item in byline (standard text)

Second text item in byline (can be semantic)

Byline Selection List

Byline (description)

First text item in byline (standard text)

Second text item in byline (can besemantic)

Byline (description)

Message Page

Sorry, we can’t find this page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Object Status

Text and Icon

Text Only

Icon Only

Clickable

Large

Inverted

Inverted Clickable

Single line text with ellipsis

Pagination

Compact pagination

Table with pagination

Product	Price	Amount
{{ item.product }}	{{ item.price }}	{{ item.amount }}

Panel

Panel Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.

Panel Header 2

Popover

Positions

Scroll

Sublist

Do not close on item selection

Product Switch

Large

Medium

Small

Scrollbar

Select

Compact Select With States

Select 2-column With Icons

Selected value: {{ selectSelectedValue }}

Select With Grouping

Fruits

Vegetables

Select dropdown position

Table

Name	Value
Option 1	Value 1
Option 2	Value 2
Option 3	Value 3

Compact table

Name	Value
Option 1	Value 1
Option 2	Value 2
Option 3	Value 3

Table with footer

Inventory Status. Use arrow keys to navigate between cells.
Column Header	Column Header	Column Header	Column Header
user.name@email.com	First Name	Last Name	01/26/17
user.name@email.com	First Name	Last Name	01/26/17
	First Name	Last Name

Table with indicators

	Header 1	Header 2	Header 3
	First Name	Last Name	01/26/17
	First Name	Last Name	01/26/17	>

Empty table with no outer borders

Header 1	Header 2	Header 3
No items available.

Table with group rows

Type	First Name	Last Name	Date
Group row (collapsed), level 1
Regular row, level 2	First Name	Last Name	01/26/17
Group row (collapsed), level 1
Regular row, level 2	First Name	Last Name	01/26/17
Group row (expanded), level 2
Regular row, level 3	First Name	Last Name	01/26/17

Table scroll

Name	Value
Option 1	Value 1
Option 2	Value 2
Option 3	Value 3
Option 2	Value 2
Option 3	Value 3
Option 2	Value 2
Option 3	Value 3
Option 2	Value 2
Option 3	Value 3
Option 2	Value 2
Option 3	Value 3
Option 2	Value 2
Option 3	Value 3

Token

Token Default

Tokenizer

Tokenizer scrollable

Tool header

Product title

Toolbar

Toolbar with title

Producs (35)

Label

Test

Compact toolbar

Producs (35)

Toolbar with no border

Toolbar types

Clear/Transparent

Auto

Info

Solid

Active state

3 item selected

Upload collection

This is the file description This is an additional description

Vertical Navigation

Default

Home

Sample

Condensed

Home

Sample

Condensed large icon mode

Home

Sample

Grouping

Home

Group header

Sample

Folder

Inner item 1

Inner item 2

Condensed expandable items

Home

Sample

Folder

Inner item 1

Inner item 2

Scroll/Overflow

Home

Calendar

Deliveries

Employees

Analytics

Support

Health

Sample

Navigation Indication

Home

Sample

Group

Folder

Inner item 1

Inner item 2

Home

Sample

Folder

Inner item 1

Inner item 2

Utility section

Home

Sample

Settings

Wizard

Wizard with steps

Step 1 content

Step 2 content

Step 3 content

Step 4 content

Summary content