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

# Cards

Cards inherit the same properties as bootstraps default cards. we have tuned it to match the scheme of admin panel

### Default card

```markup
<div class="card m-b-30">
    <div class="card-header">
        <h5 class="card-title m-b-0">Card title</h5>

    </div>
    <div class="card-body">

        <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>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
            nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>
    </div>
    <div class="card-footer">
        <a href="#!" class="btn btn-primary">Link</a>
    </div>
</div>

```

### Card with controls

```markup
 <div class="card">
    <div class="card-header">
        <h5 class="card-title m-b-0">Card title</h5>

        <div class="card-controls">

            <a href="#" class="js-card-fullscreen icon"></a>
            <a href="#" class="js-card-refresh icon"></a>
            <a href="#" class="js-card-close icon"></a>
            <div class="dropdown">
                <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
                        class="icon mdi  mdi-dots-vertical"></i> </a>

                <div class="dropdown-menu dropdown-menu-right">
                    <button class="dropdown-item" type="button">Action</button>
                    <button class="dropdown-item" type="button">Another action</button>
                    <button class="dropdown-item" type="button">Something else here</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">

        <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>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias
            nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>
    </div>
    <div class="card-footer">
        <a href="#!" class="btn btn-primary">Link</a>
    </div>
</div>

```

### Card with scrolling body

```markup
<div class="card ">
    <div class="card-header">
        <h5 class="card-title m-b-0">Scrollable Card</h5>
    </div>
    <div class="card-body card-scroll">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti
            dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi
            molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.
        </p>


    </div>
    <div class="card-footer text-md-right">
        <a href="#!" class="btn btn-secondary">Link</a>
    </div>
</div>

```

{% hint style="info" %}
for card scrolling to work you need to define height to `card-body` default is set to `350px` in`card.scss`
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.atomui.com/ui-elements/cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.