Pill Tags - Robust Admin Template

All People Project Task

People

Karmen Dartez

JavaScriptHTML

Sr. Developer - karmen@example.com

Scot Loh

PhotoShopUX

Sr. UI/UX Desugner - scot@example.com

Kim Willmore

CSSHTML

UI Developer - kim@example.com

Project

WordPress Template Support

25%

Collicitudin vel metus scelerisque ante commodo.

In Progress25% Completed

Application UI/UX

100%

Cetus scelerisque ante sollicitudin commodo.

Completed100% Completed

SEO Project

65%

Notifications scelerisque ante sollicitudin commodo.

Delayed65% Completed

Task

Create the new layout for menu

Pcelerisque ulla vel metus ante sollicitudin commodo.

Open 22 January, 16

Addition features on footer

Tuaiulla vel metus scelerisque ante sollicitudin commodo.

On hold 24 January, 16

Remove TODO comments

Mulullametu vel scelerisque ante sollicitudin commodo.

Resolved 25 January, 16

Pill Tags

Pills for adding notification or info

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Default Pill Tags

Use the .tag class, followed by.tag-pill with .tag-defaultclass within element to create default pill tag.

59

Primary Pill Tags

Use the .tag class, followed by.tag-pill with .tag-primaryclass within element to create primary pill tag.

43

Success Pill Tags

Use the .tag class, followed by.tag-pill with .tag-successclass within element to create success pill tag.

25

Danger Pill Tags

Use the .tag class, followed by .tag-pill with .tag-dangerclass within element to create danger pill tag.

78

Info Pill Tags

Use the .tag class, followed by .tag-pill with .tag-infoclass within element to create info pill tag.

57

Warning Pill Tags

Use the .tag class, followed by .tag-pill with .tag-warningclass within element to create warning pill tag.

68

Custom Brown Color Pill Tags

Use the .tag class, followed by .tag-pill with .bg-brownclass within element to create brown pill tag.

34

Custom Blue Grey Color Pill Tags

Use the .tag class, followed by.bg-blue-greyclass within element to create blue grey label.

63

Pill Tags With Glow effect

Default Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

59

Primary Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

41

Success Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

25

Danger Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

78

Info Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

57

Warning Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

68

Custom Brown Color Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

34

Custom Blue Grey Color Pill Tags

Use the .tag class, followed by .tag-pill with .tag-glowclass within element to create glow styled pill tag.

63

Square Pill Tags

For square pill tags, use .tag-square class with .tag class.

Default Square Pill

15

Square Primary Pill

21

Square Success Pill

36

Pill Tags with Icons

Default Icon Pill

Primary Icon Pill

Success Icon Pill

Square Danger Icon Pill

Square Info Icon pill tag

Square Warning Icon Label

Pill Tags as Notification

Use .tag-up to set pill tag to higher than other text. So that it can work with notifications also.

Default Icon Pill

4

Primary Icon Pill

1

Success Icon Pill

6

Square Danger Icon Pill

2

Square Info Icon pill tag

5

Square Warning Icon Label

3

Bordered Pill Tags

Primary Pill Tags

Use the .tag class, followed by.tag-border with .tag-primaryclass within element to create primary pill tag.

43

Success Pill Tags

Use the .tag class, followed by.tag-border with .tag-successclass within element to create success pill tag.

25

Danger Pill Tags

Use the .tag class, followed by .tag-border with .tag-dangerclass within element to create danger pill tag.

78

Info Pill Tags

Use the .tag class, followed by .tag-border with .tag-infoclass within element to create info pill tag.

57

Warning Pill Tags

Use the .tag class, followed by .tag-border with .tag-warningclass within element to create warning pill tag.

68

Custom Brown Color Pill Tags

Use the .tag class, followed by .tag-border with .bg-brownclass within element to create brown pill tag.

34

Pill Tags With Glow effect

Primary Pill Tags

Use the .tag class, followed by .tag-border with .tag-glowclass within element to create glow styled pill tag.

41

Success Pill Tags

Use the .tag class, followed by .tag-border with .tag-glowclass within element to create glow styled pill tag.

25

Danger Pill Tags

Use the .tag class, followed by .tag-border with .tag-glowclass within element to create glow styled pill tag.

78

Info Pill Tags

Use the .tag class, followed by .tag-border with .tag-glowclass within element to create glow styled pill tag.

57

Warning Pill Tags

Use the .tag class, followed by .tag-border with .tag-glowclass within element to create glow styled pill tag.

68

Custom Brown Color Pill Tags

Use the .tag class, followed by .tag-border with .tag-glowclass within element to create glow styled pill tag.

34

Square Pill Tags

For square pill tags, use .tag-square class with .tag class.

Danger Square Pill

15

Square Primary Pill

21

Square Success Pill

36

Bordered Pill Tags with Icons

Pink Icon Pill

Primary Icon Pill

Success Icon Pill

Square Danger Icon Pill

Square Info Icon pill tag

Square Warning Icon Label

Pill Tags as Notification

Use .tag-up to set pill tag to higher than other text. So that it can work with notifications also.

Teal Icon Pill

4

Purple Icon Pill

1

Success Icon Pill

6

Square Danger Icon Pill

2

Square Info Icon pill tag

5

Square Warning Icon Label

3