Callout

A Callout is a component that showcases an important message at the uppermost part of the display.

Storage almost full!
New sales from the last subscribers - 20K USD in revenue.
Details
 
<div class="callout variant-warning flex gap-2.5">
  <svg class="text-body size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
      <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
  </svg>
  <div>
      <div class="callout-title">Storage almost full!</div>
      <div class="callout-description text-sm mb-5">New sales from the last subscribers - 20K USD in revenue.</div>
      <a href="" class="btn variant-outlined sz-xs w-fit"><span class="btn-label">Details</span></a>
  </div>
</div>

Reference

Callout

The callout component have the following props

Prop
Type
Usage
variant
enum
intent-[intent]

Variants

Storage almost full!
New sales from the last subscribers - 20K USD in revenue.
View Details
Storage almost full!
New sales from the last subscribers - 20K USD in revenue.
Update Plan
Storage almost full!
New sales from the last subscribers - 20K USD in revenue.
Learn More
 
<div class="space-y-4">
  <div class="callout variant-warning flex gap-2.5">
      <svg class="text-warning-700 dark:text-warning-300 size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
      </svg>
      <div>
          <div class="callout-title">Storage almost full!</div>
          <div class="callout-description text-sm mb-5">New sales from the last subscribers - 20K USD in revenue.</div>
          <a href="" class="btn variant-outlined sz-xs w-fit"><span class="btn-label">Details</span></a>
      </div>
  </div>

  <div class="callout variant-danger flex gap-2.5">
      <svg class="text-danger-700 dark:text-danger-300 size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
      </svg>
      <div>
          <div class="callout-title">Storage almost full!</div>
          <div class="callout-description text-sm mb-5">New sales from the last subscribers - 20K USD in revenue.</div>
          <a href="" class="btn variant-outlined sz-xs w-fit"><span class="btn-label">Details</span></a>
      </div>
  </div>

  <div class="callout variant-neutral flex gap-2.5">
      <svg class="text-body size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
      </svg>
      <div>
          <div class="callout-title">Storage almost full!</div>
          <div class="callout-description text-sm mb-5">New sales from the last subscribers - 20K USD in revenue.</div>
          <a href="" class="btn variant-outlined sz-xs w-fit"><span class="btn-label">Details</span></a>
      </div>
  </div>
</div>