tabler/preview/tags.html

---
title: Tags
page-header: Tags
menu: base.tags
---

{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}

<div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default tags</h3>
				<div class="tags-list">   
					{% for i in (1..14) %}     
					{% capture text %}Label {{ i }}{% endcapture %}
					{% include ui/tag.html text=text %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with flag</h3>
				<div class="tags-list">   
					{% for country in site.data.flags limit: 9 %}     
					{% include ui/tag.html text=country.name flag=country.code %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with icon</h3>
				<div class="tags-list">   
					{% for icon in icons %}     
					{% include ui/tag.html text=icon icon=icon %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with avatar</h3>
				<div class="tags-list">   
					{% for person in site.data.people limit: 8 %}     
					{% include ui/tag.html text=person.full_name person=person %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with status</h3>
				<div class="tags-list">   
					{% for color in site.colors %}
					{% capture status %}{{ color[1].class }}{% endcapture %}
					{% capture text %}{{ color[1].title }}{% endcapture %}
					{% include ui/tag.html text=text status=status %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Tags with legend</h3>
				<div class="tags-list">   
					{% for color in site.colors %}
					{% capture status %}{{ color[1].class }}{% endcapture %}
					{% capture text %}{{ color[1].title }}{% endcapture %}
					{% include ui/tag.html text=text legend=status %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default tags</h3>
				<div class="tags-list">   
					{% for i in (1..6) %}     
					{% capture text %}Label {{ i }}{% endcapture %}
					{% include ui/tag.html text=text checkbox=true %}
					{% endfor %}
					{% for i in (7..12) %}     
					{% capture text %}Label {{ i }}{% endcapture %}
					{% include ui/tag.html text=text checkbox=true checked=true %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default tags</h3>
				<div class="tags-list">   
					{% for i in (1..12) %}     
					{% include ui/tag.html text="Label" badge=i %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>