Callout

<x-ui.callout>
    This component require JS. By default we're using our own Interactive Component Library
</x-ui.callout>

<x-ui.callout type="note" variant="outline" intent="gray">
    <x-ui.callout.description>The data export you requested is ready!</x-ui.callout.description>
    <div>
        <x-ui.button intent="gray" size="sm" aria-label="View data in modal">
            View the Data
        </x-ui.button>
    </div>
</x-ui.callout>

<x-ui.callout variant="soft" type="important" radius="none" class="border-l-2 border-danger">
    <x-ui.callout.title text="There was a problem with your submission"/>
    <x-ui.callout.description>
        <p>
            Must include at least 1 number
        </p>
        <p>
            Must include at least 2 uppercase letters
        </p>
    </x-ui.callout.description>
    <div class="pt-1">
        <x-ui.button variant="outline" intent="gray" size="sm">
            <span class="iconify ph--arrows-clockwise mr-2"></span>
            Try again
        </x-ui.button>
    </div>
</x-ui.callout>