cfone/app/home/templates/ui-cards.html

175 lines
6.6 KiB
HTML
Raw Normal View History

2021-09-23 03:46:35 +00:00
{% 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 %}