Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-31 15:34:39 +04:00
Code Issues Projects Releases Wiki Activity

remove examples plugin, new examples

Browse Source
This commit is contained in:
codecalm
2020-02-13 22:09:47 +01:00
parent 1969d44512
commit d41457f0b5
37 changed files with 552 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/cards.md
+24 -16
View File
@@ -10,28 +10,31 @@ The `.card` element is simply a container with a shadow, a border, a radius, and
### Default card
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html body="This is some text within a card body." %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Card with title and image
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Blog post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
{% example html columns=1 %}
{% capture code %}
{% include cards/blog-single.html type="image" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Row deck
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
{% example html columns=3 %}
{% capture code %}
<div class="row row-deck">
<div class="col-md-4">
<div class="card">
@@ -49,19 +52,21 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Post card with aside image
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
{% example html columns=3 %}
{% capture code %}
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Color variations
{% example html columns=3 %}
{% capture code %}
<div class="row row-deck">
<div class="col-md-6">
{% include cards/card.html status-top="danger" title="Card with top status" %}
@@ -70,17 +75,20 @@ You can also add the image on the left side of the card. All you need do to is:
{% include cards/card.html status-left="green" title="Card with side status" %}
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Stacked card
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
## Tabbed card
{% example html columns=2 %}
{% capture code %}
{% include cards/card-tabs.html count=4 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}