Toast

Use the toast when you need a fixed bottom banner for short promotional or contextual messages.

AEM publisher guidelines

View the component in Figma

Live demo

Visitors see a small floating panel near the bottom of the screen for brief messages they can close. The page can remember a dismissal so the same toast does not reappear on every load. It stays out of the way of the main reading flow.

Authors add Toast from the Concordia Special group. The component is not a system-wide emergency banner; for that pattern see Alert. Toast is suited to optional, non-blocking messages where dismissal and repeat suppression matter.

Anatomy

Toast anatomy

  1. Root: Wrapper class c-toast (from _cq_htmlTag); fixed positioning and animation come from toast.less.
  2. Surface: <aside id="{instanceId}" class="c-toast__container"> with inline background (hex or image URL), optional border, optional background-position from horizontal and vertical pickers.
  3. Content: c-toast__text-block with optional h2.c-toast__title, div.c-toast__text (overview), optional a.btn.btn-simple (CTA).
  4. Close: Bootstrap-style button.btn-close (hidden in edit mode so authors always see the component).

(Placeholder asset: desktop vs mobile, dark vs light background.)

Content

Tab / area Field Purpose
Text Title Plain text; drives h2 and edit-mode placeholder “Toast component” when empty.
Text Overview Rich text (limited RTE: bold, italic, links; no lists). Dialog recommends ~75 characters (about two lines on desktop).
Call to action Button text, Link to, Link target, ARIA label CTA renders only when both button text and link are set. ARIA label is exposed on the anchor for assistive technology.
Call to action Colour (buttonColor) Dialog offers Default and Black; toast.jsp also maps burgundy styles if the property is set outside the default options.
Settings Title style Default vs Small (c-toast__title--default / --small).
Settings Title colour Black or Burgundy; may be overridden when background is pale or dark (see Style).
Settings Background colour Colour picker hex list aligned with the design palette.
Settings Show border Optional 1px translucent border on the container.
Settings Horizontal / vertical position Applied as CSS background-position for image backgrounds.
Settings Additional class Extra classes on c-toast__container.
Image Adaptive image If present, replaces solid background with background-image from the smart image URL.
Script Script Textarea in the dialog is not output by toast.jsp; do not rely on it unless a custom extension reads ./script.

Behaviour (publish)

  • Show delay: cToast.init waits 300 ms before showing the toast (load and scroll stability).
  • Cookie: Closing the toast stores an entry in a browser cookie (concordia-toast) keyed by instance id (derived from the full resource path so different pages do not collide). Entries include an expiry time; the script suppresses the toast until the entry expires (24 hours from close in closeAndSetCookie).
  • Footer: While scrolling, if the toast would sit over the footer (.c-footer or .custom-footer-top), it is hidden (opacity / visibility); scrolling back up restores it.
  • Edit mode: Cookie logic is skipped; close button is hidden in the JSP so the toast remains visible for authoring.

When to use

  • Short calls to action, announcements, or reminders that should not block the page.
  • Cases where dismiss + don’t show again for a day (per instance) is acceptable.

When not to use

  • Critical or legal notices that must always be visible; consider Alert or in-page content.
  • Long reading tasks; keep overview short (see mobile behaviour below).

Guidelines

Do

  • Fill in ARIA label when the button text alone is not descriptive.
  • Pick background colours from the approved picker; the JSP forces contrasting title, CTA, and close-button styles for known dark and pale values (same idea as the Card colour list in the design rules).
  • Test on mobile: the overview block is hidden below 768px (toast.less), so the title and button must carry the message alone.

Don't

  • Don’t stack multiple toasts without a UX review; each instance has its own cookie key but layout is fixed.

Related

Resource
AlertFull-width emergency / breaking news banner; different semantics and visibility rules.
CardAlternative surface for persistent promotional content in the flow.

Positioning and animation

.c-toast is fixed, z-index: 10, bottom-aligned with responsive width (about 25 rem on larger viewports, full width minus margins on small screens). It starts translated down and transparent, then cToast.renderToast sets opacity and transform for the reveal.

The container uses flex, padding, optional cover background image, and box shadow.

Automatic contrast (JSP)

For selected pale background hex values, the component forces black title and black simple button / link treatment. For white (FFFFFF), author title colour is preserved. For other values (typically dark brand colours), it forces white title, white CTA, and white close affordance.

Design tokens

SourceRole
--cds-font-family-brand, --cds-font-size-175 / 150 / 125Title sizes for default and small styles.
--cds-font-size-075, body line heightOverview typography.

Variants

  • Title: c-toast__title--default vs --small.
  • Title colour: c-toast__title--black, --burgundy, --white (after automatic overrides).
  • Overview: c-toast__text--black vs --white depending on title colour branch in the JSP.
  • Landmark: The toast uses <aside>, which can expose a complementary landmark; keep the title meaningful so the region has a clear name.
  • Close control: Native aria-label="Close" on the dismiss button (English string in toast.jsp).
  • CTA: Authors should set ariaLabel in the dialog when the visible button text is generic.
  • New tab: When Link target opens a new tab, the JSP adds an aria-label fragment on target="_blank" using buttonText (not ariaLabel) in one branch; verify combined aria-label on the element meets your copy standards.

Mobile

  • Overview is not shown below 768px width. Users only see title and button (if present). Do not rely on overview-only information for small screens.

Motion

  • The toast animates in after load and hides when overlapping the footer; respect prefers-reduced-motion if you extend the script (not implemented in the default toast.js).

Testing

TestStatus
Keyboard: close button and CTARecommended
Screen reader: aside, labels, new-tab announcementRecommended
Mobile: message still understandable without overviewRequired

WCAG / guidelines

Related

  Resource
!AEM Component: apps/concordia/components/toast; clientlibs: apps.concordia.toast, apps.concordia.toast-author.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/toast/toast.jsp']
  • Resource type: concordia/components/toast.
  • Component group: Concordia Special (allowedParents include parsys).
  • Clientlibs: apps.concordia.toast (included from toast.jsp); apps.concordia.toast-author in edit mode only.

Implementation

File Purpose
apps/concordia/components/toast/toast.jsp Markup, colour logic, adaptive image background, inline cToast.init.
apps/concordia/components/toast/dialog.xml Tabs: Text, Settings, Image, Script.
apps/concordia/components/toast/_cq_htmlTag/.content.xml Root class c-toast.
etc/designs/concordia/clientlibs/toast/less/toast.less Fixed layout, typography, close button, responsive rules.
etc/designs/concordia/clientlibs/toast/js/toast.js cToast: cookie, footer check, animation, close handler.
apps/concordia/components/toast/clientlibs/toast.author/ Author-only clientlib category apps.concordia.toast-author.

Dependencies

  • jQuery ($(document).ready in toast.jsp).
  • js-cookie (Cookies in toast.js) for concordia-toast.
  • Foundation adaptive image when the image tab is used.

Instance id and cookie

The id attribute is a sanitized copy of the full resource path (slashes and special characters normalized) so each placement has a unique key in the JSON cookie payload.