Callout

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

Usage

Add the Callout() component to your components list in your main.dart file:

ContentApp(
  components: [
    Callout(),
  ],
)

Then use the callout variants (<Info, <Warning>, <Error>, <Success>) in your content files to display the callout boxes.

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>