File: /home/ekspardev/public_html/tubisad/rapor/src/pages/cards.html
---
title: Cards
page-header: Cards
menu: base.cards.base
---
{% assign cards-stack = 'First,Second,Third' | split: ',' %}
{% assign cards-stack-colors = 'red,green,blue' | split: ',' %}
<div class="row row-cards">
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">Simple card</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-header card-header-light">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">Card with header background</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-borderless">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<div>Card without border</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
</div>
<div class="card-body">Card with title and subtitle</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<a href="#" class="card card-link">
<div class="card-body">Default hover effect</div>
</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="#" class="card card-link card-link-rotate">
<div class="card-body">Rotate hover effect</div>
</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="#" class="card card-link card-link-pop">
<div class="card-body">Pop hover effect</div>
</a>
</div>
<div class="col-md-6 col-lg-3">
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-rotate-right">
<div class="card-body">Card rotate right</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-rotate-left">
<div class="card-body">Card rotate left</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-active">
<div class="card-body">
<p>This is a card with active state.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-inactive">
<div class="card-body">
<p>This is some text inactive state.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-stamp">
<div class="card-stamp-icon bg-yellow">
{% include ui/icon.html icon="bell" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with icon bg</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-primary-lt">
<div class="card-body">
<h3 class="card-title">Card with primary light background</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-primary text-primary-fg">
<div class="card-stamp">
<div class="card-stamp-icon bg-white text-primary">
{% include ui/icon.html icon="star" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with background and icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html status-top="danger" title="Card with top status" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html status-left="primary" title="Card with side status" %}
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="ribbon ribbon-top bg-yellow">{% include ui/icon.html icon="star" %}</div>
<div class="card-body">
<h3 class="card-title">Card with top ribbon</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="ribbon bg-red">NEW</div>
<div class="card-body">
<h3 class="card-title">Card with text ribbon</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html progress=true title="Card with progress bar" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html class="card-stacked" title="Stacked card" %}
</div>
<div class="col-lg-6">
{% include cards/card-image.html title="Card with left side image" %}
</div>
<div class="col-lg-6">
{% include cards/card-image.html title="Card with right side image" right=true img-id=3 %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html img-top=true title="Card with top image" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h3 class="card-title">Card with footer</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
<div class="card-footer">
This is standard card footer
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h3 class="card-title">Card with transparent footer</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
<div class="card-footer card-footer-transparent">
This is transparent card footer
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html title="Card with footer button" footer-button=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html footer-elements="more,>switch" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html footer-elements=">avatars" %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card.html header-tabs=true %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card.html header-pills=true %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card-tabs.html count=4 %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Cards inside card</h3>
</div>
<div class="card-body">
<div class="row row-cards">
{% for i in cards-stack %}
<div class="col-md">
<div class="card">
<div class="card-status-top bg-{{ cards-stack-colors[forloop.index0] }}"></div>
<div class="card-header">
<h3 class="card-title">{{ i }} card</h3>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card-group">
{% for i in cards-stack %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ i }} card</h3>
</div>
{% include cards/body-placeholder.html %}
</div>
{% endfor %}
</div>
</div>
<div class="col-12">
<div class="row row-cards row-deck">
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
<div class="card-footer">
Last updated 3 mins ago
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">This card has supporting text below as a natural lead-in to additional content.</div>
<div class="card-footer">
Last updated 3 mins ago
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with very long content</h3>
</div>
<div class="card-body">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.</div>
<div class="card-footer">
Last updated 3 mins ago
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">{% include cards/card.html empty=true %}</div>
<div class="col-lg-4">{% include cards/credit-card.html %}</div>
</div>