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.

Add the Callout() component to the components list of ContentApp:

import 'package:jaspr_content/components/callout.dart';

// ...

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 displaying informational messages.

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

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

<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.

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

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

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