# Card Group

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

{% tab title="Source Code" %}

```markup
<div class="card-group mb-8">

    <!-- Card -->
    <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">Card title</h2>
            <!-- Card Title-->

            <!-- 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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

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

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

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

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/plant.jpeg" alt="plant">
        <!-- /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 Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

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

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

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

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/coffee-cookies.jpeg" alt="Coffee">
        <!-- /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">
                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.
            </p>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

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

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

</div>
```

{% endtab %}
{% endtabs %}

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

{% tab title="Source Code" %}

```markup
<div class="card-deck mb-8">

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

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/asphalt-balancing.jpeg" alt="Balancing">
        <!-- /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">
                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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

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

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

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

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/sunset.jpeg" alt="sunset">
        <!-- /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 Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

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

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

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

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/person-walking.jpeg" alt="Person">
        <!-- /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">
                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.
            </p>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

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

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

</div>
```

{% endtab %}
{% endtabs %}

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

{% tab title="Source Code" %}

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

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

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

    <!-- Card Body -->
    <div class="card-body">
        <h2 class="card-title">Card title that wraps to a new line</h2>
        <p class="card-text">This is a longer card with supporting text below as a
            natural lead-in to
            additional
            content. This content is a little bit longer.</p>
    </div>
    <!-- /card body -->

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

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

    <!-- Blockquote -->
    <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
            a ante.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
    <!-- /blockquote -->

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

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

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

    <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">This card has supporting text below as a natural lead-in to
            additional
            content.</p>
        <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
        </p>
    </div>
</div>
<!-- /card -->

<!-- Card -->
<div class="card bg-primary text-center">

    <!-- Card Body -->
    <blockquote class="blockquote mb-0 text-white card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
            erat.</p>
        <footer class="blockquote-footer text-white">
            <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
    <!-- /card body -->

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

<!-- Card -->
<div class="card text-center">

    <!-- Card Body -->
    <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">This card has supporting text below as a natural lead-in to
            additional
            content.</p>
        <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
        </p>
    </div>
    <!-- /card body -->

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

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

    <!-- Card Image -->
    <img class="card-img" src="assets/images/card/doughnut.jpeg" alt="Doughnut">
    <!-- /card image -->

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

<!-- Card -->
<div class="card text-right">

    <!-- Card Body -->
    <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
            a ante.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
    <!-- /card body -->

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

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

    <!-- Card Body -->
    <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">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.</p>
        <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
        </p>
    </div>
    <!-- /card body -->

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

</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/card-group.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.