Fern | Highlight content with the Callout component

The Callout component is used when you want to visually highlight important content for the user. There are different props available to design callout component properly.

Note: it is helpful to add a <br /> after the callout component to ensure that the next component is not too close to the callout.

Callout Prop:

intent: ‘info’ | ‘success’ | ‘warn’

Info

1
<Callout intent="info">
2
This is an info callout. 
3
</Callout>

Success

1
<Callout intent="success">
2
This is a success callout. 
3
</Callout>

Warning

1
<Callout intent="warn">
2
This is a warn callout. 
3
</Callout>