> For the complete documentation index, see [llms.txt](https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/components/cards.md).

# Card

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#cards-wrapper)

Cards are a useful UI component for grouping several related pieces of information together for providing a linked entry point to further details on that content. Cards work especially well in contexts where they provide summaries of many different kinds of content, rather than when simply used as a modern-looking replacement for a list of content.

### Examples

<div align="left"><img src="/files/-MZRFbi7ORL08qVMzZQ7" alt=""></div>

<div align="left"><img src="/files/-MZRFkvO6PPrfJTuPo5R" alt=""></div>

```html
<div class="row">
      <div class="col-xl-3 col-lg-6 col-md-12 mb-3">
        <div class="card has-icon">
          <div class="card-header text-start"><span class="jds-tag has-success ">Tag/Badge</span></div>
          <div class="card-body">
            <div class="card-icon"><span><i class="fal fa-briefcase"></i></span></div>
            <h4 class="card-title">Card title</h4>
            <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>
          </div>
          <div class="card-footer">
            <button type="button" class="btn btn-primary">Action</button>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-12">
        <div class="card has-list has-options text-start h-auto  mb-2">
          <div class="card-header"> <span class="jds-tag has-primary-light">Step 1</span>
            <h5 class="card-title">Card with list items</h5>
          </div>
          <div class="card-body">
            <div class="card-item d-flex">
              <h5>Tan Ah Kow</h5>
              <button type="button" class="btn btn-primary btn-small me-auto">Add Signature</button>
              <span data-bs-toggle="modal" data-bs-target="#add_signature">
              <button type="button" class="btn icon-only  me-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fal fa-edit"></i></button>
              </span>
              <button type="button" class="btn icon-only" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fal fa-trash-alt"></i></button>
            </div>
            <div class="card-item d-flex">
              <h5>Natash Wen hao Tien</h5>
              <button type="button" class="btn btn-primary btn-small me-auto">Add Signature</button>
              <span data-bs-toggle="modal" data-bs-target="#add_signature">
              <button type="button" class="btn icon-only me-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fal fa-edit"></i></button>
              </span>
              <button type="button" class="btn icon-only" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fal fa-trash-alt"></i></button>
            </div>
          </div>
          <div class="card-footer justify-content-center">
            <button type="button" class="btn btn-primary me-1">Action</button>
            <button type="button" class="btn btn-outline-primary">Action</button>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-12 mb-3">
        <div class="card has-icon has-link" onClick="location.href='#'">
          <div class="card-header text-start"><span class="jds-tag has-warning ">Tag/Badge</span></div>
          <div class="card-body">
            <div class="card-icon"><span><i class="fal fa-briefcase"></i></span></div>
            <h4 class="card-title">Clickable Card (Stretched Link)</h4>
            <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>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-12 mb-3">
        <div class="card has-options text-start">
          <div class="card-header">
            <h6>Date</h6>
            <h5 class="card-title">Card with Menu</h5>
            <div class="dropdown cards-dropdown"><a href="#" class="dots dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-v"></i><span class="sr-only">Dropdown</span></a>
              <div class="dropdown-menu" style=""> <a class="dropdown-item" href="#">Item 1</a> <a class="dropdown-item" href="#">Item 2</a> <a class="dropdown-item" href="#">Item 3</a> </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>
          </div>
          <div class="card-footer"> <span class="jds-tag has-warning me-auto">Tag/Badge</span>
            <button type="button" class="btn btn-link me-3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fal fa-arrow-to-bottom"></i></button>
            <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="top" title="" data-original-title="Calendar"><i class="fal fa-calendar-alt"></i></button>
          </div>
        </div>
      </div>
    </div>
```

### Cards with image

<div align="left"><img src="/files/-MZRFqttOselv7C4FJwH" alt=""></div>

```html
<div class="row">
      <div class="col-xl-4 col-lg-6 col-md-12 mb-3">
        <div class="card has-image">
          <div class="card-header"><img class="card-img-top  img-fluid" src="images/img1.jpg" alt="Card image"> </div>
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <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>
          </div>
          <div class="card-footer">
            <button type="button" class="btn btn-primary">Action</button>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-12 mb-3">
        <div class="card has-image">
          <div class="card-header"><img class="card-img-top  img-fluid" src="images/img2.jpg" alt="Card image"> </div>
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <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>
          </div>
          <div class="card-footer">
            <button type="button" class="btn btn-primary">Action</button>
          </div>
        </div>
      </div>
    </div>
```

### Horizontal Card

<div align="left"><img src="/files/-MZpNBxzPlBChB0AEGe-" alt=""></div>

```
<div class="card">
      <div class="card-horizontal">
        <div class="img-circle-wrapper"> <i class="fal fa-briefcase"></i> </div>
        <div class="card-body"> <span class="jds-tag has-warning">Pending</span>
          <h4 class="card-title">Card title</h4>
          <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>
          <button type="button" class="btn btn-primary">Action</button>
        </div>
      </div>
    </div>
```


---

# 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:

```
GET https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/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.