Getting Started

Copy the stylesheet <link> and paste it into your <head> to load badges.css...


						<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@josivaldojnr/badges.css@0.1.0/dist/badges.min.css">

...or install via npm


						npm install @josivaldojnr/badges.css

Color Variations

Add the badge class to an element. You can add the class badge-primary, badge-secondary, badge-success, badge-warning, badge-danger or badge-info for colored badges.

default primary secondary success warning danger info


						<span class="badge">default</span>
						<span class="badge badge-primary">primary</span>
						<span class="badge badge-secondary">secondary</span>
						<span class="badge badge-success">success</span>
						<span class="badge badge-warning">warning</span>
						<span class="badge badge-danger">danger</span>
						<span class="badge badge-info">info</span>

Join Badges

Combine multiple badges into one segmented badge using the join-badges class.

badges css ednaldo pereira take off your pants and jacket


						<span class="join-badges">
						    <span class="badge">badges</span>
						    <span class="badge badge-primary">css</span>
						</span>
						

						<span class="join-badges">
						    <span class="badge badge-secondary">ednaldo</span>
						    <span class="badge badge-info">pereira</span>
						</span>
						

						<span class="join-badges">
						    <span class="badge badge-danger">take off</span>
						    <span class="badge badge-warning">your pants</span>
						    <span class="badge badge-success">and jacket</span>
						</span>