tabler/_docs/cards.md

title

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 %} {% include cards/card.html hide-options=true %} {% endexample %}

Advanced card

{% example html columns=1 %} {% include cards/card.html show-buttons=true show-footer=true %} {% 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 %}

Short content

Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Short content

{% 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 %}

{% include cards/card.html title="Card status" hide-options=true status="purple" %}

{% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}

{% endexample %}

Card with switch

{% example html columns=1 %} {% include cards/card.html title="Card with switch" show-switch=true %} {% endexample %}

Card with loader

{% example html columns=1 %} {% include cards/card.html title="Card with loader" hide-options=true show-loader=true %} {% endexample %}