Current Snippets

Contact InkTide

info@inktidedesign.com

© 2025 InkTide Design

Labels

Labels call out and emphasize key information

Success Info Danger Default Active Warning New Link Success Update Alert Critical Pending Disabled Success Info Numbers Waiting Disabled Caution Default Active Info Primary Error Sale Approved Warning Alert
Home

/

Snippets

/

Components

/

Labels

Default Labels

Use .pt-label to set basic styling for text, padding, and sizing, and use .pt-bg-(color) to set the label color.

Showcase

HTML
Primary Secondary Accent Gray Red Orange Yellow Green Blue Purple

1

Round Labels

Use .pt-round-(roundness) to soften the edges of the label.

Showcase

HTML
Primary Secondary Accent Gray Red Orange Yellow Green Blue Purple

1

Label Sizes

Use .pt-font-size-(size) to set the font size and .pt-p(padding sides)-(amount) to adjust the padding and thickness of the label.

Showcase

HTML
Primary Secondary Accent Gray Red Orange Yellow Green Blue Purple

1

Icon Labels

Use any icon from either of the Font Awesome Icons or Google Material Icons pages inside a label - the icon will automatically align within the label.

Showcase

HTML
Primary Secondary Accent Gray Red Orange Yellow Green Blue Purple

1

Gradient Labels

Use .pt-bg-gradient-(gradient number) to apply a gradient background color to the label.

Showcase

HTML
Gradient 1 Gradient 2 Gradient 3 Gradient 4

1

Hover Labels

Use .pt-label-hide on the label, and .pt-label-hover on the object to be hovered over. Place both within a container with .d-inline-block and .position-relative for proper display and positioning.

Showcase

HTML

Hover me for a default label!

Hello!

Hover me for a rounded label!

Howdy!

Hover me for a large label!

How're You!

Hover me for an icon label!

How's it Goin?

Hover me for a gradient label!

What's Up!

1