Card

Basic With Image

{% component "Card" %}
              {% component "CardImg" src="https://placehold.net/600x400.png" alt="Card image" position="top" / %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Card title{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
                <a href="#" class="btn btn-primary">Go somewhere</a>
              {% endcomponent %}
            {% endcomponent %}

Preview:

Card image
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
{% component "Card" text_align="center" %}
              {% component "CardHeader" %}
                Featured
              {% endcomponent %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Special title treatment{% endcomponent %}
                {% component "CardText" %}With supporting text below as a natural lead-in to additional content.{% endcomponent %}
                <a href="#" class="btn btn-primary">Go somewhere</a>
              {% endcomponent %}
              {% component "CardFooter" %}
                2 days ago
              {% endcomponent %}
            {% endcomponent %}

Preview:

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago

With Image Cap

{% component "Card" %}
              {% component "CardImg" src="https://placehold.net/600x400.png" alt="Card image" position="top" / %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Card title{% endcomponent %}
                {% component "CardText" %}This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.{% endcomponent %}
                {% component "CardText" %}<small class="text-body-secondary">Last updated 3 mins ago</small>{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Card image
Card title

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

Last updated 3 mins ago

Body Only

{% component "Card" %}
              {% component "CardBody" %}
                This is some text within a card body.
              {% endcomponent %}
            {% endcomponent %}

Preview:

This is some text within a card body. 
{% component "Card" %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Card title{% endcomponent %}
                {% component "CardSubtitle" %}Card subtitle{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
              {% endcomponent %}
            {% endcomponent %}

Preview:

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

With Image Bottom

{% component "Card" %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Card title{% endcomponent %}
                {% component "CardText" %}This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.{% endcomponent %}
                {% component "CardText" %}<small class="text-body-secondary">Last updated 3 mins ago</small>{% endcomponent %}
              {% endcomponent %}
              {% component "CardImg" src="https://placehold.net/600x400.png" alt="Card image" position="bottom" / %}
            {% endcomponent %}

Preview:

Card title

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

Last updated 3 mins ago

Card image

Bg Primary

{% component "Card" bg="primary" attrs={"class": "mb-3", "style": "max-width: 18rem;"} %}
              {% component "CardHeader" %}Header{% endcomponent %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Primary card title{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Bg Secondary

{% component "Card" bg="secondary" attrs={"class": "mb-3", "style": "max-width: 18rem;"} %}
              {% component "CardHeader" %}Header{% endcomponent %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Secondary card title{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Bg Success

{% component "Card" bg="success" attrs={"class": "mb-3", "style": "max-width: 18rem;"} %}
              {% component "CardHeader" %}Header{% endcomponent %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Success card title{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Bg Danger

{% component "Card" bg="danger" attrs={"class": "mb-3", "style": "max-width: 18rem;"} %}
              {% component "CardHeader" %}Header{% endcomponent %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Danger card title{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Border Primary

{% component "Card" border="primary" attrs={"class": "mb-3", "style": "max-width: 18rem;"} %}
              {% component "CardHeader" %}Header{% endcomponent %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Primary card title{% endcomponent %}
                {% component "CardText" %}Some quick example text to build on the card title and make up the bulk of the card's content.{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Text Align Center

{% component "Card" text_align="center" attrs={"class": "mb-3", "style": "width: 18rem;"} %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Special title treatment{% endcomponent %}
                {% component "CardText" %}With supporting text below as a natural lead-in to additional content.{% endcomponent %}
                <a href="#" class="btn btn-primary">Go somewhere</a>
              {% endcomponent %}
            {% endcomponent %}

Preview:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Text Align End

{% component "Card" text_align="end" %}
              {% component "CardBody" %}
                {% component "CardTitle" %}Special title treatment{% endcomponent %}
                {% component "CardText" %}With supporting text below as a natural lead-in to additional content.{% endcomponent %}
                <a href="#" class="btn btn-primary">Go somewhere</a>
              {% endcomponent %}
            {% endcomponent %}

Preview:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere