Phoenix

Cards

Hummingbird’s cards provide a flexible and extensible content container with multiple variants and options.

Basic Example

<div class="card max-w-80">
  <img class="card-img-top" src="../../assets/img/generic/66.jpg" alt="..." />
  <div class="card-body">
    <h5 class="card-title">Title goes here</h5>
    <p class="card-text">Here is the example of the Multiple Container Sortable feature of the </p>
    <button class="btn btn-primary">Go somewhere</button>
  </div>
</div>

Title goes here

Here is the example of the Multiple Container Sortable feature of the

Card with list

<div class="card p-4 max-w-80">
  <a class="dropdown-item font-bold text-warning" href="#!">
    <span class="fas fa-crown me-1"></span>
    <span>Go Pro</span>
  </a><a class="dropdown-item" href="#!">Set status</a>
  <a class="dropdown-item" href="#!">Profile &amp; account</a>
  <a class="dropdown-item" href="#!">Feedback</a>
  <a class="dropdown-item" href="#!">Settings</a>
  <a class="dropdown-item" href="#!">Logout</a>
</div>

Image overlays

<div class="card card-img-overlay text-white overflow-hidden max-w-120">
  <img class="card-img-top" src="../../assets/img/generic/46.png" alt="..." />
  <div class="card-body flex items-end">
    <div>
      <h4 class="card-title text-white">Card title</h4>
      <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>
    </div>
  </div>
</div>

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Horizontal

<div class="card max-w-128">
  <div class="row g-0">
    <div class="md:col-4">
      <img class="img-fluid h-full rounded-s-md" src="../../assets/img/generic/36.png" alt="..." />
    </div>
    <div class="md:col-8">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <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>
        <p class="card-text"> <small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Groups

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="../../assets/img/generic/54.png" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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>
      <p class="card-text">
        <small class="text-muted">Last updated 45 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../../assets/img/generic/44.png" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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>
      <p class="card-text">
        <small class="text-muted">Last updated 45 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../../assets/img/generic/46.png" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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>
      <p class="card-text">
        <small class="text-muted">Last updated 45 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="../../assets/img/generic/45.png" alt="..." />
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 45 mins ago</small>
      </p>
    </div>
  </div>
</div>

First card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 45 mins ago

First card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 45 mins ago

First card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 45 mins ago

First card title

This is a wider card with supporting text below as a natural lead-in a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 45 mins ago