tabler/pages/_docs/cards.md

title, menu, description

title	menu	description
Cards	docs.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.

The .card element is simply a container with a shadow, a border, a radius, and some padding. 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=3 %}

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=3 %} {% include cards/blog-single.html type="aside" liked=1 %} {% endexample %}

Color variations

{% example html columns=3 %}

{% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}

{% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}

{% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}

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

Card with badge on image

{% example html columns=3 %}

NATURE

It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes What Not To Wear: The Hats, Scarves In History

Feb 28, 10:54 am

{% endexample %}

Card with badge

{% example html columns=3 %}

Fashion

What Not To Wear: The Hats, Scarves In History

Feb 26, 1:49 am

{% endexample %}

Card with aside image

{% example html columns=3 %}

MUSIC

Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film What Not To Wear: The Hats, Scarves In History

Feb 22, 11:38 am

{% endexample %}

Card with image

{% example html columns=1 %}

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Feb 28, 10:54 am

{% endexample %}

Quote card

{% example html columns=1 %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

{% endexample %}

Another Card

{% example html columns=3 %}

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

{% endexample %}

Image card

{% example html columns=1 %}

{% endexample %}

Card with options

{% example html columns=1 %} {% include cards/card.html title="This is a standard card" show-footer=true %} {% endexample %}

Card with fullscreen

{% example html columns=1 %} {% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %} {% endexample %}

Card with search

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

Card with search

{% example html columns=3 %}

{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}

{% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}

{% endexample %}