mirror of
https://github.com/tabler/tabler.git
synced 2025-12-25 11:29:57 +04:00
48 lines
2.3 KiB
HTML
48 lines
2.3 KiB
HTML
---
|
|
title: Cards
|
|
page-header: Cards
|
|
menu: base.cards
|
|
---
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html body="This is some text within a card body." %}
|
|
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
|
|
{% include cards/card.html active=true body="This is a card with active state." %}
|
|
{% include cards/card.html inactive=true body="This is some text inactive state." %}
|
|
{% include cards/card.html footer-elements="more,>switch" %}
|
|
{% include cards/card.html footer-elements=">avatars" %}
|
|
{% include cards/card.html header-tabs=true %}
|
|
{% include cards/card.html header-pills=true %}
|
|
{% include cards/card.html progress=true title="Card with progress bar" %}
|
|
{% include cards/card.html empty=true %}
|
|
{% include cards/card-tabs.html count=4 %}
|
|
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-8">
|
|
{% include cards/card-image.html title="Card with left side image" %}
|
|
{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
|
|
{% include cards/card-group.html %}
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
{% include cards/card.html img-top=true title="Card with top image" %}
|
|
{% include cards/card.html button=true title="Card with button link" %}
|
|
{% include cards/card.html status-top="danger" title="Card with top status" %}
|
|
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
|
|
{% include cards/card.html status-left="primary" title="Card with side status" %}
|
|
{% include cards/card.html class="card-stacked" title="Stacked card" %}
|
|
{% include cards/credit-card.html %}
|
|
</div>
|
|
<div class="col-xl-6">
|
|
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
|
|
{% include cards/card.html header=true %}
|
|
{% include cards/card.html title="Card with footer" footer=true %}
|
|
{% include cards/card.html title="Card with footer button" footer-button=true %}
|
|
{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|