Badges

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

Badge's Types

Add a class .u-badge-v* to make basic badge. The margin spacing might be any but for the all badges examples the following margin spacing classes are used g-mr-10 and g-mb-10.

Badge's Positions

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

Top Left

4 33 33 33 33 33 33 33 33 33

Copy code

Top Right

4 33 33 33 33 33 33 33 33 33

Copy code

Bottom Left

4 33 33 33 33 33 33 33 33 33

Copy code

Bottom Right

4 33 33 33 33 33 33 33 33 33

Copy code

Colored Badges

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

Default Color

4 33 33 33 33 33 33 33 33 33

Copy code

Primary Color

4 33 33 33 33 33 33 33 33 33

Copy code

Red Color

4 33 33 33 33 33 33 33 33 33

Copy code

Bordered Badges

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

Border width: 1px

4 33 33 33 33 33 33 33 33 33

Copy code

Border width: 2px

4 33 33 33 33 33 33 33 33 33

Copy code

Border width: 3px

4 33 33 33 33 33 33 33 33 33

Copy code

Different Usages

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

Badges with another type of icons

22 12 42 6 9 16 33 20 23 11

Copy code

Badges with buttons

14 Primary 1 Red 32 Light Red 8 Dark Red 11 Blue 0 Indigo 23 Purple

Copy code

Badges with Images

Copy code

Badge as an Indicator

The Badge as an Indicator Badges style uses the u-badge-indicator class.

Copy code

Badge's Sizes

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

Extra Small (xs)

4 33 33 33 33 33 33 33 33 33

Copy code

4 33 33 33 33 33 33 33 33 33

Copy code

Small (sm)

4 33 33 33 33 33 33 33 33 33

Copy code

4 33 33 33 33 33 33 33 33 33

Copy code

Default

4 33 33 33 33 33 33 33 33 33

Copy code

4 33 33 33 33 33 33 33 33 33

Copy code

Large (lg)

4 33 33 33 33 33 33 33 33 33

Copy code

4 33 33 33 33 33 33 33 33 33

Copy code

Extra Large (xl)

4 33 33 33 33 33 33 33 33 33

Copy code

4 33 33 33 33 33 33 33 33 33

Copy code

We offer best in class service for your needs

Purchase Now

About Us

About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.

Useful Links

Our Contacts

795 Folsom Ave, Suite 600,
San Francisco, CA 94107 795

(+123) 456 7890
(+123) 456 7891

info@htmlstream.com
www.htmlstream.com

Unify Shortcodes

Badges

Badge's Types

Default

Rounded

Rounded (circle)

Text Shadow

Icons

Images

Badge's Positions

Top Left

Top Right

Bottom Left

Bottom Right

Colored Badges

Default Color

Primary Color

Red Color

Bordered Badges

Border width: 1px

Border width: 2px

Border width: 3px

Different Usages

Badges with another type of icons

Badges with buttons

Badges with Images

Badge as an Indicator

Badge's Sizes

Extra Small (xs)

Small (sm)

Default

Large (lg)

Extra Large (xl)

About Us

Latest Posts

Incredible template

New features

New terms and conditions

Useful Links

Our Contacts