---
title: Cards
page-title: Cards
done: true
---

{% assign photos = site.data.photos | where: "horizontal", true %}
<div class="row">

	<div class="col-12">
		<div class="card flex-row">
			<div class="media media-4x3 col-4">
				<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column">
				<div class="flex-fill">
					<a href="#" class="card-title text-md">
						Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
					</a>
					<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>
				</div>
				<div class="text-muted text-sm">Feb 22, 11:38 am</div>
			</div>
		</div>
	</div>
	<div class="col-12">
		<div class="card flex-row flex-row-reverse">
			<div class="media media-4x3 col-4">
				<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
				</a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-dark-overlay">MUSIC</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column">
				<div class="flex-fill ">
					<a href="#" class="card-title text-md">
						It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
					</a>
					<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 28, 10:54 am</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card flex-row">
			<div class="media media-4x3 col-4">
				<a class="media-content " style="background-image:url({% include ui/image.html id=8 %})">
				</a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<a href="#" class="card-title ">
						The Tallest Unclimbed Mountains In The World
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 3, 4:45 am</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card flex-row">
			<div class="media media-4x3 col-4">
				<a class="media-content " style="background-image:url({% include ui/image.html id=9 %})">
				</a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-info">Music</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<a href="#" class="card-title ">
						Congrats on the Lifestyle! The Dark Side to Influencer Marketing
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 6, 8:18 am</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card flex-row">
			<div class="media media-4x3 col-5">
				<a class="media-content " style="background-image:url({% include ui/image.html id=10 %})">
				</a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<a href="#" class="card-title h-2x">
						The Tallest Unclimbed Mountains In The World
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 26, 2:17 am</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card flex-row">
			<div class="media media-4x3 col-5">
				<a class="media-content " style="background-image:url({% include ui/image.html id=11 %})">
				</a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-danger">Fashion</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<a href="#" class="card-title h-2x">
						What Not To Wear: The Hats, Scarves In History
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 23, 11:15 am</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card flex-row">
			<div class="media media-4x3 col-5">
				<a class="media-content " style="background-image:url({% include ui/image.html id=12 %})">
				</a>
				<div class="media-overlay overlay-top">
					<a href="#"><span class="badge badge-md text-uppercase bg-warning">AI</span></a>
				</div>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<a href="#" class="card-title">
						How AI Helps Recruiters Track Jobseekers’ Emotions
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 11, 6:54 am</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="card flex-row">
			<div class="media media-4x3 col-5">
				<a class="media-content " style="background-image:url({% include ui/image.html id=13 %})">
				</a>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<div class="mb-3">
						<a href="#">
							<span class="badge badge-md text-uppercase bg-danger">Fashion</span>
						</a>
					</div>
					<a href="#" class="card-title h-2x">
						What Not To Wear: The Hats, Scarves In History
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 26, 1:49 am</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card flex-row">
			<div class="media media-4x3 col-5">
				<a class="media-content " style="background-image:url({% include ui/image.html id=14 %})">
				</a>
				<div class="media-action ">
				</div>
			</div>
			<div class="card-body d-flex flex-column ">
				<div class="flex-fill ">
					<div class="mb-3">
						<a href="#">
							<span class="badge badge-md text-uppercase bg-warning">AI</span>
						</a>
					</div>
					<a href="#" class="card-title h-2x">
						How AI Helps Recruiters Track Jobseekers’ Emotions
					</a>
				</div>
				<div class="">
					<div class="text-muted text-sm">Feb 16, 11:18 am</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-sm-12">
		<div class="row mb-4">

			{% for photo in photos limit: 3 offset: 10 %}
			<div class="col-4">
				<div class="card">
					<div class="media media-16x9">
						<a class="media-content" style="background-image:url(/img/photos/{{ photo.file }})">
						</a>
					</div>
					<div class="card-body">
						<h4 class="card-title">{{ photo.title }}</h4>
						<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi
							architecto commodi, cum, dicta dignissimos distinctio eos</p>
						<p class="card-text text-muted">
							Last updated 3 mins ago
						</p>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>
	</div>

	<div class="col-sm-12">
		<div class="card-group mb-4">
			{% for photo in photos limit: 3 offset: 13 %}
			<div class="card">
				<div class="media media-16x9">
					<a class="media-content" style="background-image:url(/img/photos/{{ photo.file }})">
					</a>
				</div>
				<div class="card-body">
					<h5 class="card-title">{{ photo.title }}</h5>
					<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
						additional content. This content is a little bit longer.</p>
					<p class="card-text text-muted">
						Last updated 3 mins ago
					</p>
				</div>
			</div>
			{% endfor %}
		</div>
	</div>

	<div class="col-sm-12">
		<div class="row">
			<div class="col-4">
				<div class="card">
					<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[17].file }}" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title">Card title that wraps to a new line</h5>
						<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
							additional content. This content is a little bit longer.</p>
					</div>
				</div>
				<div class="card p-3">
					<cardquote class="cardquote mb-0 card-body">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
						<footer class="cardquote-footer">
							<small class="text-muted">
								Someone famous in <cite title="Source Title">Source Title</cite>
							</small>
						</footer>
					</cardquote>
				</div>
			</div>

			<div class="col-4">
				<div class="card">
					<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[18].file }}" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional
							content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card bg-primary text-center p-3">
					<cardquote class="cardquote text-white mb-0">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
						<footer class="text-fade text-sm">
							Someone famous in <cite title="Source Title">Source Title</cite>
						</footer>
					</cardquote>
				</div>
				<div class="card text-center">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional
							content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
			</div>

			<div class="col-4">
				<div class="card">
					<img class="card-img" src="{{ site.base }}/img/photos/{{ site.data.photos[19].file }}" alt="Card image">
				</div>
				<div class="card p-3 text-right">
					<cardquote class="cardquote mb-0">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
						<footer>
							Someone famous in <cite title="Source Title">Source Title</cite>
						</footer>
					</cardquote>
				</div>
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">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.</p>
						<p class="card-text text-muted">
							Last updated 3 mins ago
						</p>
					</div>
				</div>
			</div>

		</div>
	</div>

</div>