Callouts

Enhance your content with eye-catching callouts to provide important context. Each callout type is designed to convey a specific tone and importance level, making it easier for users to grasp key points at a glance.

Attributes

type string required

The type of Callout to be used, including: info, success, warning, danger, note, support and training.

title string
Title displayed in the Callout.

description string
Detail text displayed below the title in the Callout preview.

Code for Callouts

<Callout type="info" title="My Info">
This adds an Info Callout to the content. 
</Callout>

Code for Callouts without Title

<Callout type="info">
This adds a Info Callout without title.
</Callout>

Callout Types

Note

Use the Note Callout to share supplementary information or side remarks that are helpful but not critical to the main content.

Note

This adds a Note Callout to the content.

This adds a Note Callout without title.

Info

Use the Info Callout to highlight important information that is neutral or instructional.

Info

This adds an Info Callout to the content.

This adds a Info Callout without title.

Success

Use the Success Callout to share helpful tips or best practices that can assist users.

Success

This adds a Success Callout to the content.

This adds a Success Callout without title.

Warning

Use the Warning Callout to alert users about potential issues or important cautions.

Warning

This adds a Warning Callout to the content.

This adds a Warning Callout without title.

Danger

Use the Danger Callout to emphasize critical warnings or risks that require immediate attention.

Danger

This adds a Warning Callout to the content.

This adds a Danger Callout without title.

Training

Use the Training Callout to highlight learning materials, tutorials, or resources aimed at skill-building.

Training

This adds a Training Callout to the content.

This adds a Training Callout without title.

Support

Use the Support Callout to guide users to resources or assistance when they encounter issues or need help.

Support

This adds a Support Callout to the content.

This adds a Support Callout without title.