Current Snippets

Contact InkTide

info@inktidedesign.com

© 2025 InkTide Design

Badges

Compact markers that emphasize or identify content

Click Here Next Submit Explore Next Page Click Explore More Submit Start Launch Search Send Continue Click Here Apply Previous Apply Next Continue Next Page Click Submit Launch Send Previous More Start Search Click Here
Home

/

Snippets

/

Components

/

Badges

Default Badges

Use .pt-badge to add text or other items inside a section with .position-relative. Adjust the badge color with .pt-bg-(color).

Showcase

HTML/CSS

37

37

37

37

37

37

1

Rounded Badges

Use .pt-round-(roundness) to soften the badge corners.

Showcase

HTML/CSS

37

37

37

37

37

37

1

Text Badges

Use .pt-badge-txt to style the badge for text-only content.

Showcase

HTML/CSS

37

37

37

37

37

37

1

Icon Badges

Add any icon from the Font Awesome or Google Material Icons pages inside a badge for extra usability.

Showcase

HTML/CSS

1

Image Badges

Use .pt-badge-img with an image instead of text to create a small badge photo.

Showcase

HTML/CSS

1

Badge Locations

Use .pt-badge-(corner) to position badges in each corner.

Showcase

HTML/CSS

37

37

37

37

1

Border Badges

Use .pt-brd-(color), .pt-brd-(width), and .pt-brd-(style) to add a border for separation or extra color.

Showcase

HTML/CSS

37

37

37

37

37

37

1