175 lines
6.6 KiB
HTML
175 lines
6.6 KiB
HTML
|
{% 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 %}
|