tabler/preview/card-actions.html

---
title: Card actions
page-header: Card actions
menu: base.cards.actions
---

<div class="row row-cards">
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Sample card</h3>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Card with action</h3>
				<div class="card-actions">
					{% include ui/button.html color="primary" icon="plus" text="Add new" %}
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Cart title</h3>
				<div class="card-actions">
					{% include ui/button.html icon="phone" text="Phone" %}
					{% include ui/button.html icon="mail" text="Email" %}
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	{% assign person = site.data.people[0] %}
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div>
					<div class="row align-items-center">
						<div class="col-auto">
							{% include ui/avatar.html person=person %}
						</div>
						<div class="col">
							<div class="card-title">{{ person.full_name }}</div>
							<div class="card-subtitle">{{ person.job_title }}</div>
						</div>
					</div>
				</div>
				<div class="card-actions">
					{% include ui/button.html icon="phone" text="Phone" %}
					{% include ui/button.html icon="mail" text="Email" %}
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div>
					<h3 class="card-title">
						With description
					</h3>
					<p class="card-subtitle">
						Lorem ipsum dolor sit amet consectetur adipisicing.
					</p>
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div>
					<h3 class="card-title">
						With description and action
					</h3>
					<p class="card-subtitle">
						Lorem ipsum dolor sit amet consectetur adipisicing.
					</p>
				</div>
				<div class="card-actions">
					{% include ui/button.html color="primary" text="Create new job" %}
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	{% assign person = site.data.people[3] %}
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<div>
					<div class="row align-items-center">
						<div class="col-auto">
							{% include ui/avatar.html person=person %}
						</div>
						<div class="col">
							<div class="card-title">{{ person.full_name }}</div>
							<div class="card-subtitle">{{ person.job_title }}</div>
						</div>
					</div>
				</div>
				<div class="card-actions">
					<div class="dropdown">
						<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% include ui/icon.html icon="dots-vertical" %}</a>
						<div class="dropdown-menu dropdown-menu-end">
							<a class="dropdown-item" href="#">Edit user</a>
							<a class="dropdown-item" href="#">Change permissions</a>
							<a class="dropdown-item text-danger" href="#">Delete user</a>
						</div>
					</div>
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>

	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Card actions</h3>
				<div class="card-actions btn-actions">
					<a href="#" class="btn-action" >{% include ui/icon.html icon="refresh" %}</a>
					<a href="#" class="btn-action" >{% include ui/icon.html icon="chevron-up" %}</a>
					<a href="#" class="btn-action" >{% include ui/icon.html icon="dots-vertical" %}</a>
					<a href="#" class="btn-action" >{% include ui/icon.html icon="x" %}</a>
				</div>
			</div>
			{% include cards/body-placeholder.html %}
		</div>
	</div>
</div>