Components framework

Create numbers indicators, unread counts and text indicators.

Labels & Badges

Create numbers indicators, unread counts and text indicators.

Labels

Result Helper class
Primary .label-primary
Default .label-default
Success .label-success
Danger .label-danger
Warning .label-warning
Info .label-info
Blue alternate .label-blue-alt
Yellow .label-yellow
Purple .label-purple
Azure .label-azure
Black .label-black

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges

Result Helper class Description
56 .badge-success Used for success actions.
573 .badge-danger Used for error actions.
12 .badge-warning Used for warning actions.
43 .badge-info Used for information actions.
9 .badge-blue-alt Alternate blue background.
7 .badge-yellow Yellow background.
4 .badge-purple Purple background.
1 .badge-azure Azure background.
456 .badge-black Black background.

Inline

Inbox 42

Absolute positioned

9 Left badge Right badge 87

Status

Ribbons

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Ribbon positioned to the right

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...