Card

<div>

A surface container for organizing related content. Cards create visual hierarchy by lifting a section off the page background.

Overview

Preview

API Usage

85%

Monthly quota — resets in 6 days

8,540 requests10,000 limit

All systems operational

Basic card

Preview

Card title

Card description or body content goes here.

<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6">
  <h3 class="text-sm font-semibold text-zinc-100">Card title</h3>
  <p class="mt-1 text-sm text-zinc-400">Card description or body content goes here.</p>
</div>

With header and footer

Preview

Team members

Manage access for your workspace.

Body content goes here.

<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden">
  <div class="border-b border-zinc-800 px-5 py-4">
    <h3 class="text-sm font-semibold text-zinc-100">Team members</h3>
    <p class="mt-0.5 text-xs text-zinc-500">Manage access for your workspace.</p>
  </div>
  <div class="px-5 py-4 text-sm text-zinc-400">Body content goes here.</div>
  <div class="border-t border-zinc-800 px-5 py-3 flex justify-end gap-2">
    <button class="... border border-zinc-700 ...">Cancel</button>
    <button class="... bg-[#D40C37] ...">Save</button>
  </div>
</div>

With icon

Preview

Secure by default

All data is encrypted at rest and in transit. We never store your credentials.

<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-5">
  <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#D40C37]/10 ring-1 ring-inset ring-[#D40C37]/20 mb-4">
    <!-- icon svg -->
  </div>
  <h3 class="text-sm font-semibold text-zinc-100">Secure by default</h3>
  <p class="mt-1.5 text-xs leading-relaxed text-zinc-400">All data is encrypted at rest and in transit.</p>
</div>

Stat card

Preview

Total requests

48,295

+12.5%vs last month

<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-5">
  <p class="text-[10px] font-semibold uppercase tracking-widest text-zinc-500">Total requests</p>
  <p class="mt-2 text-3xl font-bold tracking-tight text-zinc-100 tabular-nums">48,295</p>
  <div class="mt-1.5 flex items-center gap-1">
    <span class="text-xs font-medium text-emerald-400">+12.5%</span>
    <span class="text-xs text-zinc-600">vs last month</span>
  </div>
</div>

Interactive / clickable

Preview

📊

Channel Stats

View subscriber counts, banner, and full channel data.

Try it →

<a href="/tools/channel" class="group block rounded-xl border border-zinc-800 bg-zinc-900/50 p-5 transition-all hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-black/30">
  <div class="flex items-start gap-4">
    <div class="...">📊</div>
    <div>
      <h3 class="text-sm font-semibold text-zinc-100">Channel Stats</h3>
      <p class="mt-1 text-xs text-zinc-500">View subscriber counts, banner, and channel data.</p>
      <p class="mt-2 text-xs font-medium text-[#D40C37] transition-transform group-hover:translate-x-0.5">Try it →</p>
    </div>
  </div>
</a>

Horizontal card

Preview

Deployment complete

3 files updated — oxide-ui.dev

2m ago

<div class="flex items-center gap-4 rounded-xl border border-zinc-800 bg-zinc-900/50 px-5 py-4">
  <!-- icon -->
  <div class="min-w-0 flex-1">
    <p class="text-sm font-semibold text-zinc-100 truncate">Deployment complete</p>
    <p class="text-xs text-zinc-500 truncate">3 files updated</p>
  </div>
  <span class="shrink-0 text-xs text-zinc-600">2m ago</span>
</div>

Accessibility notes

• Interactive cards using <a> or <button> get hover/focus styles automatically
• If wrapping a card in <a>, ensure there is descriptive text inside for screen readers
• Non-interactive cards need no ARIA role