Callout

Callout elements are meant to draw attention to important information or provide additional context to the user.

Note

The note callout is a subtle callout used to provide supplementary information or tips. It helps users gain additional insights without distracting from the main content.

<Callout variant="note" title="Note">...</Callout>
Info

The info callout is a blue callout designed to capture more attention from the user than a simple note. It highlights important information that users should be aware of.

<Callout variant="info" title="Info">...</Callout>
Tip

The tip callout is used to offer helpful advice or recommendations. It provides users with useful suggestions or shortcuts that can enhance their experience.

<Callout variant="tip" title="Tip">...</Callout>
Warning

The warning callout is an orange callout used to alert users about potential issues or cautionary details. It draws attention to situations that require careful consideration.

<Callout variant="warning" title="Warning">...</Callout>
Danger

The danger callout is a red callout intended to warn users of critical errors or urgent issues. Its striking appearance ensures users address these problems immediately.

<Callout variant="danger" title="Danger">...</Callout>

Created by Valdemaras, designed by Domas. Source code available on GitHub.