Avatar

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Samll

Medium

Large

Xlarge

MM

Letters

Badge

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Badge

Buttons

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Primary

Primary

Distructive

Destructive

Naked

Naked

Naked inverse

Naked inverse

Ghost

Ghost

Checkbox

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Planview checkbox normal

Checkbox selected

Checkbox disabled

Circle progress bar

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem. Donec id porttitor nibh.

40%

Counter

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

2

Primary

9

critical

<div class="pv-counter primary">2</div> <div class="pv-counter critical">9</div>

Dropdown

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Stefan Morgan

Gerald Moody

Bryant Sherman

Elijah Sharp

Kurtis Neal

Grabber

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Normal

Hover

Normal

Hover

<div class='grabber-wrapper horizontal is-normal'> <div class='grabber-handle cursor-grab'> <div class='grabber-dots'> <div class='grabber-dot'></div> <div class='grabber-dot'></div> <div class='grabber-dot'></div> </div> </div> </div> <div class='grabber-wrapper vertical is-hover'> <div class='grabber-handle cursor-grab'> <div class='grabber-dots'> <div class='grabber-dot'></div> <div class='grabber-dot'></div> <div class='grabber-dot'></div> </div> </div> </div>

Show and hide

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Show Hide

<div class="pv-counter primary">2</div> <div class="pv-counter critical">9</div>

Icon

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Sizes

Xsmall

Small

Medium

Large

States

Normal

Hover

Active

Disabled

Icons code

Grid system

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

12

11

1

10

2

9

3

8

4

7

5

6

6

5

7

4

8

3

9

2

10

1

11

12

<div class="row"> <div class="col bg-1 c12">12</div> </div> <div class="row"> <div class="col bg-2 c11">11</div> <div class="col bg-1 c1">1</div> </div>

Input types

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Input text

Date picker

Input number

Input time

Message center

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

File created successfully

Success

Something went wrong. Please try again

Error

<div class="pv-message-center"> <div class="icon-container-medium"> <img src="img/info.png" /> </div> <div class="message">Something went wrong. Please try again</div> </div>

Modal

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Modal header

The extra thing we will do here to add the position absolute.

Cancel Submit

Popover

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Value: Can display regular text, links, list elements and other components (Icon, Avatar) based on use case

<div class="pv-popover"> <div class="pv-popover-container"> Value: Can display regular text, links, list elements and other components (Icon, Avatar) based on use case </div> </div>

Progress bar

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Regular

Inverse

Progress bar code

Spinner

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Sizes

Xsmall

Small

Medium

Large

Switch

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

On

Off

Tabular data

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Country	Population	Rank	Economy
India	1.4 Billion	2	23.2%
India	1.4 Billion	2	23.2%
India	1.4 Billion	2	23.2%
India	1.4 Billion	2	23.2%

Tag

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Product development Accounts Translators

Textarea

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

Tooltip

Vestibulum tristique molestie ex, sed tincidunt diam egestas eu. Pellentesque bibendum, nulla auctor finibus dictum, arcu urna efficitur risus, in lacinia turpis nibh maximus lorem.

User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.

Left

User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.

Right

User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.

Top

User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.

Bottom