Card

<div class="card max-w-sm">
  <div class="flex items-center gap-3">
    <span class="avatar">
      <svg class="size-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 .75-7.425A4.502 4.502 0 0 0 14.25 7.5a4.5 4.5 0 0 0-4.39 3.51A3 3 0 0 0 8.25 15h-6Z"/></svg>
    </span>
    <div>
      <h4>iCloud Storage</h4>
      <p class="text-sm text-tertiary-foreground">5 GB of 50 GB used</p>
    </div>
  </div>
  <div class="mt-4">
    <progress value="10" max="100" aria-label="iCloud storage usage"></progress>
    <p class="mt-2 text-xs text-tertiary-foreground">Manage your storage plan and see what's using space.</p>
  </div>
</div>

<div class="card p-0 max-w-sm">
  <div class="p-6 pb-0">
    <h4>AirDrop</h4>
    <p class="text-sm text-tertiary-foreground">Share files wirelessly with nearby Apple devices.</p>
  </div>
  <div class="p-6">
    <span class="inline-flex items-center gap-1 text-xs text-tertiary-foreground">
      <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
      Contacts Only
    </span>
  </div>
  <hr class="my-0">
  <div class="px-6 py-3">
    <button class="btn-plain btn-small">Change Setting</button>
  </div>
</div>

macOS Sequoia

New

Your Mac. Elevated.

Learn More

<div class="card p-0 max-w-xs">
  <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop" alt="Mountain landscape" class="w-full h-40 object-cover">
  <div class="p-6">
    <div class="flex items-center gap-2">
      <h4>macOS Sequoia</h4>
      <span class="badge">New</span>
    </div>
    <p class="text-sm text-tertiary-foreground mt-1">Your Mac. Elevated.</p>
    <button class="btn-tinted btn-small mt-3">Learn More</button>
  </div>
</div>

<div class="card max-w-sm">
  <h4>Software Update</h4>
  <p class="text-sm text-tertiary-foreground">macOS Sequoia 15.3 is available. This update includes bug fixes and security improvements.</p>
  <progress class="mt-4" value="65" max="100" aria-label="Update progress"></progress>
  <div class="flex items-center justify-between mt-3">
    <span class="text-xs text-tertiary-foreground">65% complete</span>
    <div class="flex gap-2">
      <button class="btn-plain btn-small">Pause</button>
      <button class="btn-filled btn-small">Update Now</button>
    </div>
  </div>
</div>

<div class="card p-0 max-w-sm">
  <div class="px-6 pt-6 pb-2">
    <h4>Network</h4>
  </div>
  <div class="list">
    <div>
      <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0"/><circle cx="12" cy="18" r="0.75" fill="currentColor"/></svg>
      <div>
        <h3>Wi-Fi</h3>
        <p>Connected</p>
      </div>
      <label class="inline-flex cursor-pointer"><input type="checkbox" role="switch" checked aria-label="Wi-Fi"></label>
    </div>
    <div>
      <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg>
      <div>
        <h3>Ethernet</h3>
        <p>Not Connected</p>
      </div>
    </div>
    <div>
      <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-6-3V4.25A2.25 2.25 0 0 1 12 2h0a2.25 2.25 0 0 1 2.25 2.25v1.5m-4.5 0h4.5m-4.5 0H6.75A2.25 2.25 0 0 0 4.5 8v10.5A2.25 2.25 0 0 0 6.75 20.75h10.5A2.25 2.25 0 0 0 19.5 18.5V8a2.25 2.25 0 0 0-2.25-2.25h-3"/></svg>
      <div>
        <h3>VPN</h3>
        <p>Off</p>
      </div>
      <label class="inline-flex cursor-pointer"><input type="checkbox" role="switch" aria-label="VPN"></label>
    </div>
  </div>
</div>

<div class="card max-w-xs">
  <div class="flex flex-col items-center text-center">
    <span class="avatar size-16 text-2xl">TK</span>
    <h4 class="mt-3">Tim Cook</h4>
    <p class="text-sm text-tertiary-foreground">CEO, Apple Inc.</p>
    <div class="avatar-group mt-3">
      <span class="avatar size-7 text-xs">CF</span>
      <span class="avatar size-7 text-xs">JS</span>
      <span class="avatar size-7 text-xs">AL</span>
    </div>
    <p class="text-xs text-tertiary-foreground mt-1">3 mutual connections</p>
  </div>
  <hr>
  <div class="flex gap-2">
    <button class="btn-filled btn-small flex-1">Message</button>
    <button class="btn-gray btn-small flex-1">Follow</button>
  </div>
</div>

<div class="card p-0 max-w-sm">
  <div class="px-6 pt-6 pb-2">
    <h4>Display</h4>
    <p class="text-sm text-tertiary-foreground">Adjust brightness and appearance.</p>
  </div>
  <div class="px-6 py-4 space-y-4">
    <label>
      <span class="text-sm font-medium">Brightness</span>
      <input type="range" class="slider mt-2" value="75">
    </label>
    <label class="flex items-center justify-between cursor-pointer">
      <div>
        <p class="text-sm font-medium">True Tone</p>
        <p class="text-xs text-tertiary-foreground">Adapt display to ambient lighting</p>
      </div>
      <input type="checkbox" role="switch" checked>
    </label>
    <label class="flex items-center justify-between cursor-pointer">
      <div>
        <p class="text-sm font-medium">Night Shift</p>
        <p class="text-xs text-tertiary-foreground">Scheduled: Sunset to Sunrise</p>
      </div>
      <input type="checkbox" role="switch">
    </label>
  </div>
  <hr class="my-0">
  <div class="px-6 py-3 flex justify-end">
    <button class="btn-tinted btn-small">Advanced Settings</button>
  </div>
</div>

<div class="card max-w-sm">
  <div class="flex items-start gap-3">
    <span class="relative">
      <span class="avatar">
        <svg class="size-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
      </span>
      <span class="badge-dot absolute top-0 right-0" role="img" aria-label="Unread"></span>
    </span>
    <div class="flex-1 min-w-0">
      <div class="flex items-center justify-between">
        <h4 class="text-sm font-semibold">System Update</h4>
        <span class="text-xs text-tertiary-foreground">2m ago</span>
      </div>
      <p class="text-sm text-tertiary-foreground mt-0.5">Your Mac was updated to macOS Sequoia 15.3 successfully.</p>
      <div class="flex gap-2 mt-3">
        <button class="btn-gray btn-small">View Details</button>
        <button class="btn-plain btn-small">Dismiss</button>
      </div>
    </div>
  </div>
</div>