# 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: 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.atomui.com/ui-elements/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.