Callout — Cider UI

Selectors

.callout: Neutral informational container.

No variant classes — apply tone via Tailwind utilities on headings (e.g. text-destructive, text-primary).

Default

Software Update

A new version of macOS is available. Update now to get the latest features and security improvements.

HTML

<div class="callout">
  <h5>Software Update</h5>
  <p>A new version of macOS is available. Update now to get the latest features and security improvements.</p>
</div>

With Icon

iCloud Backup

Your last backup was completed 2 hours ago. Backups run automatically when connected to Wi-Fi and power.

HTML

<div class="callout flex gap-3 items-start">
  <svg class="size-5 shrink-0 text-primary mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  <div>
    <h5>iCloud Backup</h5>
    <p>Your last backup was completed 2 hours ago. Backups run automatically when connected to Wi-Fi and power.</p>
  </div>
</div>

Destructive Tone

Threat Notification

Apple sent you a threat notification via email and iMessage on July 9, 2024.

HTML

<div class="callout flex gap-3 items-start">
  <svg class="size-5 shrink-0 text-destructive mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  <div>
    <h5 class="text-destructive">Threat Notification</h5>
    <p>Apple sent you a threat notification via email and iMessage on July 9, 2024.</p>
  </div>
</div>

Success Tone

Verification Complete

Your Apple ID has been verified. Two-factor authentication is now active on this device.

HTML

<div class="callout flex gap-3 items-start">
  <svg class="size-5 shrink-0 text-green mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
  <div>
    <h5 class="text-green">Verification Complete</h5>
    <p>Your Apple ID has been verified. Two-factor authentication is now active on this device.</p>
  </div>
</div>