Callout
Subtle alert variant for less urgent messages.
Markup
Section titled “Markup”
Primary Callout: Subtle alert variant.
Success Callout: Success message.
Info Callout: Informational message.
<div class="af-callout af-is-primary" role="status">
<strong>Primary Callout:</strong>
Subtle alert variant.
</div>
<div class="af-callout af-is-success" role="status">
<strong>Success Callout:</strong>
Success message.
</div>
<div class="af-callout af-is-info" role="status">
<strong>Info Callout:</strong>
Informational message.
</div>Accessibility
Section titled “Accessibility”- Polite messages:
role="status" - Errors and urgent messages:
role="alert" - Decorative icons:
aria-hidden="true"