---
title: Card actions
page-header: Card actions
page-menu: base.cards.actions
layout: default
permalink: card-actions.html
---

<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 = 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 = 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>