Callout

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

An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
 
<div class="callout intent-gray flex gap-2.5">
    <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <div>
        <div class="callout-title text-sm">An error occured!</div>
        <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
        <a href="" class="callout-link text-sm">Details</a>
    </div>
</div>

Reference

Callout

The callout component have the following props

Prop
Type
Usage
intent
enum
intent-[intent]

Intents example

An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
An error occured!
New sales from the last subscribers - 20K USD in revenue.
Details
 
<div class="space-y-4">
    <div class="callout intent-primary flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-secondary flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-accent flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-danger flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-warning flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-success flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-info flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>

    <div class="callout intent-gray flex gap-2.5">
        <svg class="callout-title" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>
            <div class="callout-title text-sm">An error occured!</div>
            <div class="callout-description text-sm">New sales from the last subscribers - 20K USD in revenue.</div>
            <a href="" class="callout-link text-sm">Details</a>
        </div>
    </div>
</div>