{% extends "layouts/base.html" %}

{% block title %} UI Cards {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

	<main class="content">
		<div class="container-fluid p-0">

			<h1 class="h3 mb-3">Cards</h1>

			<div class="row">
				<div class="col-12 col-md-6 col-lg-4">
					<div class="card">
						<img class="card-img-top" src="/static/assets/img/photos/unsplash-1.jpg" alt="Unsplash">
						<div class="card-header">
							<h5 class="card-title mb-0">Card with image and links</h5>
						</div>
						<div class="card-body">
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="card-link">Card link</a>
							<a href="#" class="card-link">Another link</a>
						</div>
					</div>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<div class="card">
						<img class="card-img-top" src="/static/assets/img/photos/unsplash-2.jpg" alt="Unsplash">
						<div class="card-header">
							<h5 class="card-title mb-0">Card with image and button</h5>
						</div>
						<div class="card-body">
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<div class="card">
						<img class="card-img-top" src="/static/assets/img/photos/unsplash-3.jpg" alt="Unsplash">
						<div class="card-header">
							<h5 class="card-title mb-0">Card with image and list</h5>
						</div>
						<ul class="list-group list-group-flush">
							<li class="list-group-item">Cras justo odio</li>
							<li class="list-group-item">Dapibus ac facilisis in</li>
							<li class="list-group-item">Vestibulum at eros</li>
						</ul>
					</div>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title mb-0">Card with links</h5>
						</div>
						<div class="card-body">
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="card-link">Card link</a>
							<a href="#" class="card-link">Another link</a>
						</div>
					</div>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title mb-0">Card with button</h5>
						</div>
						<div class="card-body">
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title mb-0">Card with list</h5>
						</div>
						<ul class="list-group list-group-flush">
							<li class="list-group-item">Cras justo odio</li>
							<li class="list-group-item">Dapibus ac facilisis in</li>
							<li class="list-group-item">Vestibulum at eros</li>
						</ul>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<ul class="nav nav-tabs card-header-tabs pull-right" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#tab-1">Active</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#tab-2">Link</a>
								</li>
								<li class="nav-item">
									<a class="nav-link disabled" data-toggle="tab" href="#tab-3">Disabled</a>
								</li>
							</ul>
						</div>
						<div class="card-body">
							<div class="tab-content">
								<div class="tab-pane fade show active" id="tab-1" role="tabpanel">
									<h5 class="card-title">Card with tabs</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">Go somewhere</a>
								</div>
								<div class="tab-pane fade text-center" id="tab-2" role="tabpanel">
									<h5 class="card-title">Card with tabs</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">Go somewhere</a>
								</div>
								<div class="tab-pane fade" id="tab-3" role="tabpanel">
									<h5 class="card-title">Card with tabs</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">Go somewhere</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<ul class="nav nav-pills card-header-pills pull-right" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#tab-4">Active</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#tab-5">Link</a>
								</li>
								<li class="nav-item">
									<a class="nav-link disabled" data-toggle="tab" href="#tab-6">Disabled</a>
								</li>
							</ul>
						</div>
						<div class="card-body">
							<div class="tab-content">
								<div class="tab-pane fade show active" id="tab-4" role="tabpanel">
									<h5 class="card-title">Card with pills</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">Go somewhere</a>
								</div>
								<div class="tab-pane fade text-center" id="tab-5" role="tabpanel">
									<h5 class="card-title">Card with pills</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">Go somewhere</a>
								</div>
								<div class="tab-pane fade" id="tab-6" role="tabpanel">
									<h5 class="card-title">Card with pills</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">Go somewhere</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}