Flash Messages

4 min read

Canvas provides legacy flash message classes (such as ic-flash-info) that visually emphasise information, success states, and warnings. These examples show how those classes render in this Canvas instance, followed by modern inline-style alternatives that do not rely on Canvas' legacy CSS.

Useful references

Canvas legacy flash message classes

These examples use Canvas' built-in ic-flash-* classes with icons. They are part of an older design system but still work in current Canvas content.

Info: This is an ic-flash-info message.
Success: This is an ic-flash-success message.
<div class="ic-flash-info" role="status">
  <div class="ic-flash__icon" aria-hidden="true">
    <i class="icon-info"></i>
  </div>
  <div class="ic-flash__content">
    <strong>Info:</strong> This is an info message.
  </div>
</div>
<div class="ic-flash-success" role="status">
  <div class="ic-flash__icon" aria-hidden="true">
    <i class="icon-check"></i>
  </div>
  <div class="ic-flash__content">
    <strong>Success:</strong> This is a success message.
  </div>
</div>
<div class="ic-flash-warning" role="alert">
  <div class="ic-flash__icon" aria-hidden="true">
    <i class="icon-warning"></i>
  </div>
  <div class="ic-flash__content">
    <strong>Warning:</strong> This is a warning message.
  </div>
</div>

Modern inline-style flash messages

You can recreate the flash message pattern using only inline CSS. This makes your design independent of Canvas' legacy CSS while keeping a clear icon + text layout. The examples use a simple two-column flex layout.

Info: This is an informational flash message using inline styles only.
Success: Your changes have been saved successfully.
<div role="status" style="padding: 1rem; border-radius: 0.375rem; background: #e8f2ff; border-left: 6px solid #4c9dcd;">
  <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
    <div aria-hidden="true" style="width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #4c9dcd; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0;">
      i
    </div>
    <div>
      <strong>Info:</strong> This is an informational flash message.
    </div>
  </div>
</div>
<div role="status" style="padding: 1rem; border-radius: 0.375rem; background: #e8f8ea; border-left: 6px solid #2d8a3b;">
  <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
    <div aria-hidden="true" style="width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #2d8a3b; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0;">
      ✓
    </div>
    <div>
      <strong>Success:</strong> Your changes have been saved successfully.
    </div>
  </div>
</div>
<div role="alert" style="padding: 1rem; border-radius: 0.375rem; background: #fff7e6; border-left: 6px solid #cc7a00;">
  <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
    <div aria-hidden="true" style="width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #cc7a00; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0;">
      !
    </div>
    <div>
      <strong>Warning:</strong> Please review this information before continuing.
    </div>
  </div>
</div>

Accessibility notes

  • Use role="status" for neutral or positive updates that should be announced politely by assistive technologies.
  • Use role="alert" only for urgent issues that need immediate attention (for example, errors that block progress).
  • Icon elements in these examples are marked aria-hidden="true" so that screen readers do not announce them twice; the meaningful label is in the text (for example, Warning:).
  • Ensure colour contrast between text and background meets at least WCAG AA for the text size used.
  • Do not rely on colour alone to convey meaning. Include a text label such as "Info", "Success", or "Warning" at the start of each message.