Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

cards documentation

Browse Source
This commit is contained in:
chomik
2018-02-21 16:51:21 +01:00
parent bd3bc468bd
commit 54efaaaf81
2 changed files with 59 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_docs/blog.md
-45
View File
@@ -1,45 +0,0 @@
---
title: Blog components
---
Tabler is a great choice when it comes to the blog management. It allows you to create advanced systems with which you'll be able to administrate your posts without the mess. With our components, your blog will be transparent and really nice-looking.
### 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 %}
{% include cards/blog-single.html type="image" %}
{% endexample %}
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=2 %}
<div class="row row-cards row-deck">
<div class="col-md-4">
<div class="card">
<div class="card-body">Short content</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">Short content</div>
</div>
</div>
</div>
{% endexample %}
### 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=2 %}
{% include cards/blog-single.html type="aside" liked=1 %}
{% endexample %}
See more live examples [here]({{ site.base }}/blog.html).
_docs/cards.md
+59 -1
View File
@@ -2,6 +2,10 @@
title: Cards
---
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
### Default card
{% example html columns=1 %}
@@ -12,4 +16,58 @@ title: Cards
{% example html columns=1 %}
{% include cards/card.html show-buttons=true show-footer=true %}
{% endexample %}
{% endexample %}
### 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 %}
{% include cards/blog-single.html type="image" %}
{% endexample %}
### 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=2 %}
<div class="row row-cards row-deck">
<div class="col-md-4">
<div class="card">
<div class="card-body">Short content</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">Short content</div>
</div>
</div>
</div>
{% endexample %}
### 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=2 %}
{% include cards/blog-single.html type="aside" liked=1 %}
{% endexample %}
### Color variations
{% example html columns=2 %}
<div class="row row-cards row-deck">
<div class="col-md-6">
{% include cards/card.html title="Card status" hide-options=true status="purple" %}
</div>
<div class="col-md-6">
{% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}
</div>
</div>
{% endexample %}