mirror of
https://github.com/tabler/tabler.git
synced 2026-07-17 02:51:41 +04:00
chomik
61 lines
2.2 KiB
HTML
61 lines
2.2 KiB
HTML
---
|
|
page-title: Cards
|
|
---
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="This is a standard card" show-footer=true %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Built card" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card blue" status="blue" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card green" status-left="green" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html body-title="Card with body title" hide-header=true %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card red" status="red" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card yellow" status="yellow" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card teal" status="teal" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card purple" status="purple" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card status on left side" status-left="blue" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Initial collapsed card" collapsed=true %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
|
|
</div>
|
|
<div class="col-lg-6">
|
|
{% include cards/card.html title="Panel with custom buttons" show-buttons=true %}
|
|
</div>
|
|
<div class="col-lg-6">
|
|
{% include cards/card.html title="Card with search form" show-form=true %}
|
|
</div>
|
|
<div class="col-lg-6 col-xl-4">
|
|
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
|
|
</div>
|
|
<div class="col-lg-6 col-xl-4">
|
|
{% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}
|
|
</div>
|
|
<div class="col-lg-6 col-xl-4">
|
|
{% include cards/card.html title="Card with switch" show-switch=true %}
|
|
</div>
|
|
<div class="col-lg-6 col-xl-4">
|
|
{% include cards/card.html title="Card with loader" show-loader=true %}
|
|
</div>
|
|
</div>
|