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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift.g-axon.work/components/cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.