Callouts (Astro)

Callouts are used to convey information to a user that needs to stand out from the rest of the information on the page.

Examples

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.

NOTE

A basic callout: This is used for general notes.

SUCCESS

A success callout: Use this to report successful actions or enforce good practices.

WARNING

A warning callout: This is best suited for content that is important for the user to read.

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.

NOTE

The <Callout /> Component lives in the choco-astro repository in the Components folder.

Callout Types

To initialize a <Callout />, you may pass in one of the following types:

none - Creates a grey callout with no header. This is to be used sparingly and with caution.
info - Creates a "INFO" callout (blue).
success - Creates a "SUCCESS" callout (green).
warning - Creates a "WARNING" callout (yellow).
danger - Creates a "DANGER" callout (red).

Basic Usage (Default Heading)

To initialize a <Callout /> with a default heading, only the type is required to be passed in.

import Callout from '@choco/components/Callout.astro'; 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: This is used for general 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.

Advanced Usage (Custom Heading)

If there is a need to pass in a custom header, it is possible to pass in an object to the <Callout /> with the specified information.

import Callout from '@choco/components/Callout.astro'; export const callout1 = { title: 'Custom title for info callout', type: 'info' }; A basic callout: This is used for general notes. export const callout2 = { title: 'Custom title for success callout', type: 'success' }; A success callout: Use this to report successful actions or enforce good practices. export const callout3 = { title: 'Custom title for warning callout', type: 'warning' }; A warning callout: This is best suited for content that is important for the user to read. export const callout4 = { title: 'Custom title for danger callout', type: '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.


<div class="callout">
    <p>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.</p>
</div>
<div class="callout callout-info">
    <div class="callout-header">NOTE</div>
    <p>A basic callout: This is used for general notes.</p>
</div>
<div class="callout callout-success">
    <div class="callout-header">SUCCESS</div>
    <p>A success callout: Use this to report successful actions or enforce good practices.</p>
</div>
<div class="callout callout-warning">
    <div class="callout-header">WARNING</div>
    <p>A warning callout: This is best suited for content that is important for the user to read.</p>
</div>
<div class="callout callout-danger">
    <div class="callout-header">DANGER</div>
    <p>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.</p>
</div>

Best Practices

DON'T

Callout headers are not allowed to be used without accompanying body content. The header is also too long.

Lorem ipsum Proin commodo, ligula sit amet pulvinar dignissim, arcu ligula fermentum sapien, vel porta sapien magna eget arcu.

The callout header is 1-2 words and has body content. A header can also be a short sentence.

Lorem ipsum

Proin commodo, ligula sit amet pulvinar dignissim, arcu ligula fermentum sapien, vel porta sapien magna eget arcu.

On This Page