mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
284 lines
9.5 KiB
HTML
284 lines
9.5 KiB
HTML
---
|
|
title: Cards
|
|
page-header: Cards
|
|
page-menu: base.cards.base
|
|
layout: default
|
|
permalink: cards.html
|
|
---
|
|
|
|
{% 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">
|
|
{% include "cards/anomaly-alert.html" %}
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card card-rotate-end">
|
|
<div class="card-body">Card rotate end</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card card-rotate-start">
|
|
<div class="card-body">Card rotate start</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-secondary">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-secondary">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-start="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-secondary">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-secondary">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-secondary">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-secondary">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/billing-usage.html" %}</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> |