Callouts

Examples of the many different types of callouts. Additional CSS classes may be added to make the basic note and warning callouts more specific. For example:

@@@ note { .tip title="Applying an additional CSS class" }

Additional CSS classes can be applied to a callout directive by adding a dot `.`
followed by the class name inside the directive attribute section, e.g. `.tip`.

The special `.no-title` CSS class will hide the callout's title.

@@@

Will give

Applying an additional CSS class

Additional CSS classes can be applied to a callout directive by adding a dot . followed by the class name inside the directive attribute section, e.g. .tip.

The special .no-title CSS class will hide the callout’s title.

Notes

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

Note

With no-title class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

With summary class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

With info or todo class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

With tip, hint or important class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

With success, check or done class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

With question, help or faq class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

With quote or cite class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

Warnings

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

Failure

With failure, fail or missing class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

Error

With error or danger class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.

Bug

With bug class

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, mollis sed massa vel, ornare viverra ex. Mauris a ullamcorper lacus.