> For the complete documentation index, see [llms.txt](https://docs-drift.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-drift.g-axon.work/components/cards.md).

# Cards

{% tabs %}
{% tab title="Example 1" %}
![](/files/-Loivfg-m3jOYTTeOXtk)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card">

    <!-- Card Image -->
    <img class="card-img-top" src="assets/images/card/skateboard.jpeg" alt="Skateboard">
    <!-- /card image -->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title">Card title</h2>
        <!-- Card Title-->

        <!-- Card Text-->
        <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the
            card's content.
        </p>
        <!-- /card text-->

        <!-- Card Button-->
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
        <!-- /card button-->

    </div>
    <!-- /card body -->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 2" %}
![](/files/-LoiwA3qMHNUJqxhPSiW)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card">

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Text-->
        <p class="card-text">
            This is some text within a card body. Use it wisely :)
        </p>
        <!-- /card text-->

    </div>
    <!-- /card body -->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 3" %}
![](/files/-LoizkCsrz65jJS9ioSD)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card">

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title">Titles &amp; Links</h2>
        <!-- Card Title-->

        <!-- Card Sub Title-->
        <h4 class="card-subtitle">Subtitle text</h4>
        <!-- /card sub title-->

        <!-- Card Text-->
        <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the
            card's content.
        </p>
        <!-- /card text-->

        <!-- Card Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <a href="javascript:void(0)" class="card-link">Another Link</a>
        <!-- /card link-->

    </div>
    <!-- /card body -->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 4" %}
![](/files/-Loj7cD5XDm8Ydzvgm5e)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card">

    <!-- Card Image -->
    <img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
    <!-- /card image -->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title">Kitchen Sink</h2>
        <!-- Card Title-->

        <!-- Card Text-->
        <p class="card-text lead">
            Mix and match multiple content types...
        </p>

    </div>
    <!-- /card body -->

    <!-- List Group -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
    </ul>
    <!-- /list group-->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Button-->
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
        <a href="javascript:void(0)" class="card-link">Card Link</a>
        <!-- /card button-->

    </div>
    <!-- /card body -->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 5" %}
![](/files/-LojnWU0k59xSH_XQPMk)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card">

    <!-- Card header -->
    <div class="card-header">
        <ul class=" card-header-pills nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#tab-pane3" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab-pane4" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
            </li>
            <li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
        </ul>
    </div>
    <!-- /card header -->

    <!-- Tab Content-->
    <div class="tab-content">

        <!-- Tab panel -->
        <div id="tab-pane3" class="tab-pane active">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Tabs In Button Style</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Mix and match multiple content types to create the card you need, or
                    throw everything in there.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div id="tab-pane4" class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Tabs In Button Style</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk
                    of the card's content.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Tabs In Button Style</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk
                    of the card's content.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

    </div>
    <!-- /tab content-->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 6" %}
![](/files/-LotJ1nQ2gyVDLwnfpV_)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card">

    <!-- Card header -->
    <div class="card-header card-nav">
        <ul class="card-header-tabs nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#tab-pane1" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab-pane2" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
            </li>
            <li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
        </ul>
    </div>
    <!-- /card header -->

    <!-- Tab Content-->
    <div class="tab-content">

        <!-- Tab panel -->
        <div id="tab-pane1" class="tab-pane active">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Card With Tabs</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk
                    of the card's content.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div id="tab-pane2" class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Card With Tabs</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Mix and match multiple content types to create the card you need, or
                    throw everything in there.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Card With Tabs</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk
                    of the card's content.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

    </div>
    <!-- /tab content-->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 7" %}
![](/files/-LotJkn-ts1cYF3qV0Vx)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card text-white">

    <!-- Card Image -->
    <img class="card-img" src="assets/images/card/person-walking.jpeg" alt="Person">
    <!-- /card image -->

    <!-- Card Overlay -->
    <div class="card-img-overlay">

        <!-- Card Header -->
        <h2 class="card-title text-white">Card title</h2>
        <!-- /card header -->

        <!-- Card Text -->
        <p class="card-text">
            This is a wider card with supporting text below as a natural lead-in to
            additional content. This content is a little bit longer.
        </p>
        <p class="card-text">Last updated 3 mins ago</p>
        <!-- /card text -->

    </div>
    <!-- /card overlay -->

</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 8" %}
![](/files/-LotKB9LWIpMyYgeFqAF)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="card text-white bg-primary">

    <!-- Card Header -->
    <h4 class="card-header text-white">Header</h4>
    <!-- /card header -->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title text-white">Header &amp; Footer</h2>
        <!-- Card Title-->

        <!-- Card Text-->
        <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the
            card's content.
        </p>
        <!-- /card text-->

    </div>
    <!-- /card body -->

    <!-- Card Footer -->
    <div class="card-footer">2 days ago | footer content</div>
    <!-- /card footer -->

</div>
```

{% endtab %}
{% endtabs %}