---
title: Cards
page-header: Cards
menu: base.cards
---

<div class="row row-cards">
	<div class="col-md-6 col-xl-4">
		<div class="row row-cards">
			<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div>
			<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div>
			<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div>
			<div class="col-12">{% include cards/card.html inactive=true body="This is some text inactive state." %}</div>
			<div class="col-12">{% include cards/card.html footer-elements="more,>switch" %}</div>
			<div class="col-12">{% include cards/card.html footer-elements=">avatars" %}</div>
			<div class="col-12">{% include cards/card.html header-tabs=true %}</div>
			<div class="col-12">{% include cards/card.html header-pills=true %}</div>
			<div class="col-12">{% include cards/card.html progress=true title="Card with progress bar" %}</div>
			<div class="col-12">{% include cards/card.html empty=true %}</div>
			<div class="col-12">{% include cards/card-tabs.html count=4 %}</div>
			<div class="col-12">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
		</div>
	</div>
	<div class="col-md-6 col-xl-8">
		<div class="row row-cards">

			<div class="col-12">{% include cards/card-image.html title="Card with left side image" %}</div>
			<div class="col-12">{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}</div>
			<div class="col-12">{% include cards/card-group.html %}</div>

			<div class="col-12">
				<div class="row row-cards">
					<div class="col-xl-6">
						<div class="row row-cards">
							<div class="col-12">{% include cards/card.html img-top=true title="Card with top image" %}</div>
							<div class="col-12">{% include cards/card.html button=true title="Card with button link" %}</div>
							<div class="col-12">{% include cards/card.html status-top="danger" title="Card with top status" %}</div>
							<div class="col-12">{% include cards/card.html status-bottom="success" title="Card with bottom status" %}</div>
							<div class="col-12">{% include cards/card.html status-left="primary" title="Card with side status" %}</div>
							<div class="col-12">{% include cards/card.html class="card-stacked" title="Stacked card" %}</div>
							<div class="col-12">{% include cards/credit-card.html %}</div>
						</div>
					</div>
					<div class="col-xl-6">
						<div class="row row-cards">
							<div class="col-12">{% include cards/card.html title="Card title" subtitle="Card subtitle" %}</div>
							<div class="col-12">{% include cards/card.html header=true %}</div>
							<div class="col-12">{% include cards/card.html title="Card with footer" footer=true %}</div>
							<div class="col-12">{% include cards/card.html title="Card with footer button" footer-button=true %}</div>
							<div class="col-12">{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
