Cards

<div class="rounded-xl border border-border bg-surface p-5">
  <h3 class="text-base font-semibold text-heading">Card title</h3>
  <p class="mt-1.5 text-sm text-muted">
    Some quick example text to build on the card title and make up the
    bulk of the card's content.
  </p>
</div>

<div class="overflow-hidden rounded-xl border border-border bg-surface">
  <div class="flex items-center justify-between gap-3 border-b border-border px-5 py-3.5">
    <h3 class="text-base font-semibold text-heading">Card Header</h3>
    <span class="flex items-center gap-2 text-sm text-muted">Status:
      <i class="ph-fill ph-check-circle text-lg text-success"></i>
    </span>
  </div>
  <p class="px-5 py-4 text-sm leading-relaxed text-muted">…</p>
  <div class="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
    <button class="… border border-border bg-surface …">Save</button>
    <button class="… bg-primary text-on-primary …">New Post</button>
  </div>
</div>

<div class="overflow-hidden rounded-xl border border-border bg-surface">
  <!-- no border-b on the header -->
  <div class="px-5 pt-4">
    <h3 class="text-base font-semibold text-heading">Card Header</h3>
  </div>
  <p class="px-5 py-4 text-sm leading-relaxed text-muted">…</p>
  <!-- no border-t on the footer -->
  <div class="flex items-center gap-2 px-5 pb-4">
    <button class="… border border-border bg-surface …">Save</button>
    <button class="… bg-primary text-on-primary …">New Post</button>
  </div>
</div>

<div class="rounded-xl bg-surface p-5 shadow-sm ring-1 ring-black/5 dark:ring-white/10">
  <h3 class="text-base font-semibold text-heading">Card title</h3>
  <p class="mt-1.5 text-sm text-muted">
    Some quick example text to build on the card title and make up the
    bulk of the card's content.
  </p>
</div>

<div class="overflow-hidden rounded-xl border border-border bg-surface">
  <div class="border-b border-border px-5 py-3.5">
    <h3 class="text-base font-semibold text-heading">Card Header</h3>
  </div>
  <!-- bodyClass adds text-center -->
  <p class="px-5 py-4 text-center text-sm leading-relaxed text-muted">…</p>
  <div class="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
    <button class="… border border-border bg-surface …">Save</button>
    <button class="… bg-primary text-on-primary …">New Post</button>
  </div>
</div>

<!-- an <a> keeps the whole card keyboard-reachable -->
<a
  href="#"
  class="block w-full max-w-[260px] cursor-pointer rounded-xl border border-border bg-surface p-5 transition-colors hover:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
  <h3 class="text-base font-semibold text-heading">Card title</h3>
  <p class="mt-1.5 text-sm text-muted">
    Some quick example text to build on the card title and make up the
    bulk of the card's content.
  </p>
</a>

AI Powered Automation

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.

Kristen Fisher

Sep 23, 2021

<div class="w-full max-w-[260px] overflow-hidden rounded-xl border border-border bg-surface">
  <div class="aspect-video w-full overflow-hidden bg-subtle">
    <img src="cover.jpg" alt="…" class="h-full w-full object-cover" />
  </div>
  <div class="p-4">
    <h3 class="text-base font-semibold text-heading">AI Powered Automation</h3>
    <p class="mt-1.5 text-sm leading-relaxed text-muted">…</p>
    <div class="mt-4 flex items-center gap-2.5 border-t border-border-subtle pt-3">
      <img src="user1.png" alt="" class="h-8 w-8 shrink-0 rounded-full" />
      <div class="min-w-0">
        <p class="truncate text-sm font-medium text-heading">Kristen Fisher</p>
        <p class="text-xs text-muted">Sep 23, 2021</p>
      </div>
    </div>
  </div>
</div>