mirror of
https://github.com/tabler/tabler.git
synced 2026-06-17 12:50:03 +04:00
codecalm
81 lines
2.5 KiB
HTML
81 lines
2.5 KiB
HTML
---
|
|
title: Cards design
|
|
layout: default
|
|
menu: interface.cards
|
|
---
|
|
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
|
|
</div>
|
|
<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="green" %}
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
{% include cards/card.html title="Card orange" status="orange" %}
|
|
</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">
|
|
{% capture options %}
|
|
<a class="btn btn-secondary btn-sm">Action 1</a>
|
|
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
|
|
{% endcapture %}
|
|
|
|
{% include cards/card.html title="Pannel with custom buttons" options=options %}
|
|
</div>
|
|
<div class="col-lg-6">
|
|
{% capture options %}
|
|
<form action="">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
|
|
<span class="input-group-btn ml-2">
|
|
<button class="btn btn-sm btn-default" type="submit">
|
|
<span class="fe fe-search"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
{% endcapture %}
|
|
|
|
{% include cards/card.html title="Card with search form" options=options %}
|
|
</div>
|
|
<div class="col-lg-6">
|
|
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
|
|
</div>
|
|
<div class="col-lg-6">
|
|
{% include cards/card.html title="Card with alert" alert="Adding action was failed" alert-type="danger" %}
|
|
</div>
|
|
</div>
|
|
</div> |