> 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoiusKuJg06gMd3nrVH%2F-Loivfg-m3jOYTTeOXtk%2Fexample-1.png?alt=media\&token=13c338b0-c867-4f19-848f-54a3d00de35f)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoiusKuJg06gMd3nrVH%2F-LoiwA3qMHNUJqxhPSiW%2Fexample-2.png?alt=media\&token=bfa0ba6d-2271-4e30-afd6-60975651e7df)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoiusKuJg06gMd3nrVH%2F-LoizkCsrz65jJS9ioSD%2Fexample-3.png?alt=media\&token=5ae4bf4f-b5e5-47ca-bc06-2c4ea55a554f)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LoiusKuJg06gMd3nrVH%2F-Loj7cD5XDm8Ydzvgm5e%2Fexample-4.png?alt=media\&token=9c6b2fe9-7320-4457-b0f2-48465e5c638d)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Lojn9bZv9PWnmWedW5y%2F-LojnWU0k59xSH_XQPMk%2Fexample-5.png?alt=media\&token=c7372230-2111-4273-9a1d-6efbf185543d)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LotIexTu0z5DGW_heFS%2F-LotJ1nQ2gyVDLwnfpV_%2Fexample-6.png?alt=media\&token=1f36a21c-25f4-4113-91da-9912f667ee5d)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LotIexTu0z5DGW_heFS%2F-LotJkn-ts1cYF3qV0Vx%2Fexample-7.png?alt=media\&token=a04b85ac-4820-40c0-83df-5b0a8020b7b4)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LotIexTu0z5DGW_heFS%2F-LotKB9LWIpMyYgeFqAF%2Fexample-8.png?alt=media\&token=41686448-5600-44d0-9536-2d79007a3e9d)
{% 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 %}