---
title: Badges
page-title: Badges
done: true
---

<div class="row">
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div class="card-title">Standard badges</div>
			</div>
			<div class="card-body">
				<p>
					{% for variant in site.variants %}
					<span class="badge badge-{{ variant }}">{{ variant }}</span>
					{% endfor %}
				</p>
				<p>
					{% for color in site.colors %}
					<span class="badge badge-{{ color[0] }}">{{ color[0] }}</span>
					{% endfor %}
				</p>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div class="card-title">Light badges</div>
			</div>
			<div class="card-body">
				<p>
					{% for variant in site.variants %}
					<span class="badge badge-{{ variant }}-lt">{{ variant }}</span>
					{% endfor %}
				</p>
				<p>
					{% for color in site.colors %}
					<span class="badge badge-{{ color[0] }}-lt">{{ color[0] }}</span>
					{% endfor %}
				</p>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div class="card-title">Bordered badges</div>
			</div>
			<div class="card-body">
				<p>
					{% for variant in site.variants %}
					<span class="badge badge-{{ variant }} badge-outline">{{ variant }}</span>
					{% endfor %}
				</p>
				<p>
					{% for color in site.colors %}
					<span class="badge badge-{{ color[0] }} badge-outline">{{ color[0] }}</span>
					{% endfor %}
				</p>
			</div>
		</div>
	</div>
</div>