---
title: Cards
page-header: Cards
menu: base.cards.base
---
{% assign cards-stack = 'First,Second,Third' | split: ',' %}
{% assign cards-stack-colors = 'red,green,blue' | split: ',' %}
Card with header background
Card title
Card without border
Card with title and subtitle
This is a card with active state.
This is some text inactive state.
{% include ui/icon.html icon="bell" %}
Card with icon bg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
Card with primary light background
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
{% include ui/icon.html icon="star" %}
Card with background and icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
{% include cards/card.html status-top="danger" title="Card with top status" %}
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
{% include cards/card.html status-left="primary" title="Card with side status" %}
{% include ui/icon.html icon="star" %}
Card with top ribbon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
NEW
Card with text ribbon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
{% include cards/card.html progress=true title="Card with progress bar" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/card-image.html title="Card with left side image" %}
{% include cards/card-image.html title="Card with right side image" right=true img-id=3 %}
{% include cards/card.html img-top=true title="Card with top image" %}
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
Card with footer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.
Card with transparent footer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.
{% include cards/card.html title="Card with footer button" footer-button=true %}
{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
{% include cards/card.html footer-elements="more,>switch" %}
{% include cards/card.html footer-elements=">avatars" %}
{% include cards/card.html header-tabs=true %}
{% include cards/card.html header-pills=true %}
{% include cards/card-tabs.html count=4 %}
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
{% for i in cards-stack %}
{% include cards/body-placeholder.html %}
{% endfor %}
{% for i in cards-stack %}
{% include cards/body-placeholder.html %}
{% endfor %}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
{% include cards/card.html empty=true %}
{% include cards/credit-card.html %}