Callouts | Isomer Help Center

Callouts help draw attention to information that users may otherwise miss, such as notes, tips, recommended actions and warnings.

Isomer provides five Callout styles, each intended for a different type of message.

Choose the right Callout

Choose a Callout based on the type of information you want to communicate and how much attention it needs.

🗒️ Grey: for additional information

Use the grey callout for neutral, supplementary information that is useful to know but does not require immediate attention.

Best for:

Notes
Background information, “Did you know”s
Minor reminders

Example:

“Note: Applications usually take about five working days to process.”

➡️ Blue: for helpful information

Use the blue callout to draw attention to useful information that can help users complete a task or understand your content.

Best for:

Tips
Helpful guidance
Key information or takeaways

Example:

“Applications typically open around July each year. Sign up for our mailing list to receive updates.”

✅ Green: for recommended actions or positive updates

Use the green callout to highlight actions that users are encouraged to follow, or positive updates.

Best for:

Recommended actions
Good practices
Things users should do to achieve the intended outcome

Example:

“Do: Bring your original identification document to your appointment.”
“Applications are now processed immediately, instead of 12-14 working days.”

⚠️ Yellow: for cautions

Use the yellow callout for important conditions, exceptions or consequences that users should pay close attention to.

Best for:

Important conditions or exceptions
Deadlines or requirements that may affect users
Common mistakes that could prevent users from completing what they need to do

Example:

“Caution: Applications received after 31 March will only be considered in the next intake.”

🛑 Red: for critical warnings

Use the red callout only for serious warnings or risks that users should not miss.

Best for:

Safety or security warnings
Things users must not do
Actions that could have serious consequences

Example:

“Warning: Government officers will never ask you to transfer money to a personal bank account.”

Best practices for using Callouts

Use clear and concise language

Keep the message short and to the point. Users should be able to understand the key message quickly.

If you need to explain something at length, keep the detailed information in the main body of the page and use the Callout only to highlight the most important point.

Match the emphasis to the message

Use the least prominent Callout that communicates your message effectively.

For example, a useful reminder usually does not need a yellow or red Callout. Reserve stronger Callouts for information that genuinely requires more attention so that they remain meaningful when they are used.

Position Callouts close to relevant content

Place a Callout near the content or action it relates to.

For example, if users need to know something important before completing a form, place the Callout immediately before the relevant instructions or link rather than elsewhere on the page.

Do not overuse Callouts

Too many Callouts can make it difficult for users to tell what is actually important.

Keep Callouts for information that genuinely benefits from additional emphasis. Avoid using multiple Callouts on one page. Where several Callouts appear close together, consider whether some of the information can instead be presented as normal page content.