---
title: Cards
page-header: Cards
page-menu: base.cards.base
layout: default
permalink: cards.html
---

{% assign cards-stack = 'First,Second,Third' | split: ',' %}
{% assign cards-stack-colors = 'red,green,blue' | split: ',' %}

<div class="row row-cards">
	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Card title</h3>
			</div>
			<div class="card-body">Simple card</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="card-header card-header-light">
				<h3 class="card-title">Card title</h3>
			</div>
			<div class="card-body">Card with header background</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card card-borderless">
			<div class="card-body">
				<h3 class="card-title">Card title</h3>
				<div>Card without border</div>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
			</div>
			<div class="card-body">Card with title and subtitle</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-3">
		<a href="#" class="card card-link">
			<div class="card-body">Default hover effect</div>
		</a>
	</div>
	<div class="col-md-6 col-lg-3">
		<a href="#" class="card card-link card-link-rotate">
			<div class="card-body">Rotate hover effect</div>
		</a>
	</div>
	<div class="col-md-6 col-lg-3">
		<a href="#" class="card card-link card-link-pop">
			<div class="card-body">Pop hover effect</div>
		</a>
	</div>
	<div class="col-md-6 col-lg-3">
	</div>

	<div class="col-md-6 col-lg-3">
		<div class="card card-rotate-right">
			<div class="card-body">Card rotate right</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card card-rotate-left">
			<div class="card-body">Card rotate left</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card card-active">
			<div class="card-body">
				<p>This is a card with active state.</p>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card card-inactive">
			<div class="card-body">
				<p>This is some text inactive state.</p>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="card-stamp">
				<div class="card-stamp-icon bg-yellow">
					{% include "ui/icon.html" icon="bell" %}
				</div>
			</div>
			<div class="card-body">
				<h3 class="card-title">Card with icon bg</h3>
				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card bg-primary-lt">
			<div class="card-body">
				<h3 class="card-title">Card with primary light background</h3>
				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card bg-primary text-primary-fg">
			<div class="card-stamp">
				<div class="card-stamp-icon bg-white text-primary">
					{% include "ui/icon.html" icon="star" %}
				</div>
			</div>
			<div class="card-body">
				<h3 class="card-title">Card with background and icon</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" status-top="danger" title="Card with top status" %}
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" status-left="primary" title="Card with side status" %}
	</div>

	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
			<div class="card-body">
				<h3 class="card-title">Card with top ribbon</h3>
				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="ribbon bg-red">NEW</div>
			<div class="card-body">
				<h3 class="card-title">Card with text ribbon</h3>
				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" progress=true title="Card with progress bar" %}
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" class="card-stacked" title="Stacked card" %}
	</div>
	<div class="col-lg-6">
		{% include "cards/card-image.html" title="Card with left side image" %}
	</div>
	<div class="col-lg-6">
		{% include "cards/card-image.html" title="Card with right side image" right=true img-id=3 %}
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" img-top=true title="Card with top image" %}
	</div>
	<div class="col-md-6 col-lg-3">
		{% include "cards/card.html" img-bottom=true title="Card with bottom image" %}
	</div>

	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Card with footer</h3>
				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
			</div>
			<div class="card-footer">
				This is standard card footer
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Card with transparent footer</h3>
				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
			</div>
			<div class="card-footer card-footer-transparent">
				This is transparent card footer
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-3">{% include "cards/card.html" title="Card with footer button" footer-button=true %}</div>
	<div class="col-md-6 col-lg-3">{% include "cards/card.html" title="Card with footer buttons" footer-buttons=true %}</div>

	<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements="more,>switch" %}</div>
	<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements=">avatars" %}</div>

	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>


	<div class="col-12">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Cards inside card</h3>
			</div>
			<div class="card-body">
				<div class="row row-cards">
					{% for i in cards-stack %}
					<div class="col-md">
						<div class="card">
							<div class="card-status-top bg-{{ cards-stack-colors[forloop.index0] }}"></div>
							<div class="card-header">
								<h3 class="card-title">{{ i }} card</h3>
							</div>
							{% include "cards/body-placeholder.html" %}
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

	<div class="col-12">
		<div class="card-group">
			{% for i in cards-stack %}
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">{{ i }} card</h3>
				</div>
				{% include "cards/body-placeholder.html" %}
			</div>
			{% endfor %}
		</div>
	</div>

	<div class="col-12">
		<div class="row row-cards row-deck">
			<div class="col">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">Card title</h3>
					</div>
					<div class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
					<div class="card-footer">
						Last updated 3 mins ago
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">Card title</h3>
					</div>
					<div class="card-body">This card has supporting text below as a natural lead-in to additional content.</div>
					<div class="card-footer">
						Last updated 3 mins ago
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">Card with very long content</h3>
					</div>
					<div class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</div>
					<div class="card-footer">
						Last updated 3 mins ago
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
	<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
</div>