Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Interactive demo

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