Callouts
Callouts
Callout are used to convey information to a user that needs to stand out from the rest of the information on the page. There are four callout types.
Basic Callouts in HTML
A default callout: This callout type should be used sparingly and only when other callout types do not reflect the content. This callout can not be used with a callout header.
A basic callout: There is no added callout-${color} class. This is used for notes.
A success callout: Use this to report successful actions or enforce good practices.
A warning callout: This is best suited for content that is important for the user to read.
A danger callout: Use this to inform users of possibly destructive or breaking information. This can also be used to inform users of a failed action.
Callouts with Headers in HTML
A basic callout: There is no added callout-${color} class. This is used for notes.
A success callout: Use this to report successful actions or enforce good practices.
A warning callout: This is best suited for content that is important for the user to read.
A danger callout: Use this to inform users of possibly destructive or breaking information. This can also be used to inform users of a failed action.
Callouts in Markdown
Callouts can also be created in markdown by using the <blockquote> tag. The severity (color) of the callout will be issued based on the first contained emoji. If there is no emoji, the default callout will be used.
A default callout: This callout type should be used sparingly and only when other callout types do not reflect the content. This callout can not be used with a callout header.
:choco-info: NOTE
A basic callout: There is no added
callout-$class. This is used for notes.
:choco-success: SUCCESS
A success callout: Use this to report successful actions or enforce good practices.
:choco-warning: WARNING
A warning callout: This is best suited for content that is important for the user to read.
:choco-danger: DANGER
A danger callout: Use this to inform users of possibly destructive or breaking information. This can also be used to inform users of a failed action.
Markdown
> A default callout: This callout type should be used sparingly and only when other callout types do not reflect the content. This callout can not be used with a callout header.
> :choco-info: **NOTE**
>
> A basic callout: There is no added callout-${color} class. This is used for notes.
> :choco-success: **SUCCESS**
>
> A success callout: Use this to report successful actions or enforce good practices.
> :choco-warning: **WARNING**
>
> A warning callout: This is best suited for content that is important for the user to read.
> :choco-danger: **DANGER**
>
> A danger callout: Use this to inform users of possibly destructive or breaking information. This can also be used to inform users of a failed action.
Best Practices
Callout headers are not allowed to be used without accompanying body content. The header is also too long.
The callout header is 1-2 words and has body content. A header can also be a short sentence.
Proin commodo, ligula sit amet pulvinar dignissim, arcu ligula fermentum sapien, vel porta sapien magna eget arcu.