Callouts

Use one of the callout components to draw attention to important information on your page, such as a success, warning, information or error message.

Examples

Displays a soft blue box with an info icon, useful for information based information.

This draws attention to useful page information.

<Info>This draws attention to useful page information.</Info>

Displays a yellow box with a warning icon, useful for warning the user about something.

This draws attention to a warning they should take notice of.

<Warning>This draws attention to a warning they should take notice of.</Warning>

Displays a red box with an error icon, useful for loud pieces of information.

This draws attention to an error the user might run into if they don't pay attenion.

<Error>This draws attention to an error the user might run into if they don't pay attenion.</Error>

Displays a green box with a check icon, useful for showing the user they did something right.

This draws attention to a successful action the user has taken.

<Success>This draws attention to a successful action the user has taken.</Success>