Callout

<div class="callout callout-info">
  <div class="callout-icon">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
  </div>
  <div class="callout-content">
    <h4 class="callout-title">Did you know?</h4>
    <p class="callout-text">This is an informational callout. Use it to highlight important notes in your documentation.</p>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex items-start gap-4 p-6 rounded-box border border-info/20 border-l-4 border-l-info my-6" style="background-color: color-mix(in oklch, var(--color-info) 8%, transparent)">
  <svg class="size-6 text-info shrink-0" ...></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-info m-0 mb-1">Did you know?</h4>
    <p class="text-sm text-base-content/60 m-0">This is an informational callout.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for basic callout
// To dismiss: add callout-dismissed class

<div class="callout callout-success mb-4">
  <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
  <div class="callout-content">
    <h4 class="callout-title">Success</h4>
    <p class="callout-text">Your changes have been saved.</p>
  </div>
</div>

<div class="callout callout-warning mb-4">
  <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 9v4M12 17h.01"/></svg></div>
  <div class="callout-content">
    <h4 class="callout-title">Warning</h4>
    <p class="callout-text">This action cannot be undone.</p>
  </div>
</div>

<div class="callout callout-error mb-4">
  <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg></div>
  <div class="callout-content">
    <h4 class="callout-title">Error</h4>
    <p class="callout-text">Something went wrong. Please try again.</p>
  </div>
</div>

<div class="callout callout-neutral">
  <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg></div>
  <div class="callout-content">
    <h4 class="callout-title">Note</h4>
    <p class="callout-text">This is a neutral callout for general notes.</p>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex items-start gap-4 p-6 rounded-box border border-success/20 border-l-4 border-l-success mb-4 my-6" style="background-color: color-mix(in oklch, var(--color-success) 8%, transparent)">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-success shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-success m-0 mb-1">Success</h4>
    <p class="text-sm text-base-content/60 m-0">Your changes have been saved.</p>
  </div>
</div>

<div class="relative flex items-start gap-4 p-6 rounded-box border border-warning/20 border-l-4 border-l-warning mb-4 my-6" style="background-color: color-mix(in oklch, var(--color-warning) 8%, transparent)">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-warning shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 9v4M12 17h.01"/></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-warning m-0 mb-1">Warning</h4>
    <p class="text-sm text-base-content/60 m-0">This action cannot be undone.</p>
  </div>
</div>

<div class="relative flex items-start gap-4 p-6 rounded-box border border-error/20 border-l-4 border-l-error mb-4 my-6" style="background-color: color-mix(in oklch, var(--color-error) 8%, transparent)">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-error shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-error m-0 mb-1">Error</h4>
    <p class="text-sm text-base-content/60 m-0">Something went wrong. Please try again.</p>
  </div>
</div>

<div class="relative flex items-start gap-4 p-6 rounded-box border border-base-300 border-l-4 border-l-base-content/40 my-6" style="background-color: var(--color-base-200)">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-base-content/60 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-base-content m-0 mb-1">Note</h4>
    <p class="text-sm text-base-content/60 m-0">This is a neutral callout for general notes.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for colors

<!-- Small -->
<div class="callout callout-info callout-sm callout-dismissible mb-4">
  <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg></div>
  <div class="callout-content">
    <h4 class="callout-title">Small callout</h4>
    <p class="callout-text">Compact size with less padding.</p>
  </div>
  <button class="callout-close">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>

<!-- Large -->
<div class="callout callout-success callout-lg callout-dismissible">
  <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
  <div class="callout-content">
    <h4 class="callout-title">Large callout</h4>
    <p class="callout-text">More prominent with extra padding and larger text.</p>
  </div>
  <button class="callout-close">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>

Requires: ux.min.css

<!-- Small -->
<div class="relative flex items-start gap-2 p-4 pr-12 rounded-box border border-info/20 border-l-4 border-l-info mb-4 my-6" style="background-color: color-mix(in oklch, var(--color-info) 8%, transparent)">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-info shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-info text-sm m-0 mb-1">Small callout</h4>
    <p class="text-xs text-base-content/60 m-0">Compact size with less padding.</p>
  </div>
  <button class="absolute top-2 right-2 flex items-center justify-center w-7 h-7 bg-transparent border-none text-base-content/40 cursor-pointer rounded-field">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>

<!-- Large -->
<div class="relative flex items-start gap-6 p-8 pr-14 rounded-box border border-success/20 border-l-4 border-l-success my-6" style="background-color: color-mix(in oklch, var(--color-success) 8%, transparent)">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-7 text-success shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
  <div class="flex-1">
    <h4 class="font-semibold text-success text-lg m-0 mb-2">Large callout</h4>
    <p class="text-base text-base-content/60 m-0">More prominent with extra padding and larger text.</p>
  </div>
  <button class="absolute top-2 right-2 flex items-center justify-center w-7 h-7 bg-transparent border-none text-base-content/40 cursor-pointer rounded-field">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>

Requires: tw.min.css

// Dismiss:
// closeBtn.addEventListener('click', () => {
//   callout.classList.add('callout-dismissed');
// });