Cards

<div class="card w-100">
  <div class="card-header">
    <div class="titles">
      <h2 class="card-title">Card title</h2>
      <p class="card-subtitle">A line under the title</p>
    </div>
  </div>
  <div class="card-body">
    <p class="m-0 text-label-2">Cards hold one idea each. Keep them short.</p>
  </div>
</div>

<div class="card card-solid flex-grow-1">
  <div class="card-header">
    <div class="titles">
      <h2 class="card-title">Solid</h2>
    </div>
  </div>
  <div class="card-body"><span class="muted">No blur behind it.</span></div>
</div>
<div class="card card-thick flex-grow-1">
  <div class="card-header">
    <div class="titles">
      <h2 class="card-title">Thick</h2>
    </div>
  </div>
  <div class="card-body"><span class="muted">More frosting.</span></div>
</div>

<div class="card w-100">
  <div class="card-header">
    <div class="titles">
      <h2 class="card-title">Team</h2>
    </div>
    <div class="card-actions">
      <div class="dropdown">
        <button type="button" class="btn btn-ghost btn-icon" aria-label="More" data-bs-toggle="dropdown" aria-expanded="false"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="dropdown-menu glass dropdown-menu-end"><a class="dropdown-item" href="team.html"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Open</a><button class="dropdown-item" type="button" data-copy="page"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Share</button></div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="avatars">
      <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)" title="Maya Lindqvist">ML</span>
      <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)" title="Theo Okafor">TO</span>
      <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)" title="Ines Carvalho">IC</span>
      <span class="avatar more">+4</span>
    </div>
  </div>
  <div class="card-footer">
    <span class="muted fs-sm">Updated now</span>
    <a href="team.html" class="btn btn-gray btn-sm">Open</a>
  </div>
</div>

<div class="card card-link card-sample">
  <div class="card-media"><img class="pic" src="assets/images/placeholder.svg" alt="Designing for calm" loading="lazy"></div>
  <div class="card-body"><b>Designing for calm</b><span class="muted d-block fs-sm">Six minutes · Design</span></div>
</div>