Banners

Placement modes

Banner positions:
- TOP_FIXED: pinned to the top of the viewport
- BOTTOM_FIXED: pinned to the bottom of the viewport
- TOP_RELATIVE: rendered in page flow near the top
- BOTTOM_RELATIVE: rendered in page flow near the bottom

Fixed banners are overlays. They stay attached to the viewport and do not reserve space in page layout. Relative banners render in normal document flow, so surrounding content naturally sits below or above them.

Default template

<div class="spry-message spry-banner">
  {{body}}
</div>

The shipped banner template stays lean and only renders {{body}}. If you want a CTA button, icon, multi-part layout, or extra wrapper structure, use a custom banner template that includes those tokens explicitly.

SpryUI now ships a single default banner system template. If you want a richer banner layout, create a custom template and keep the runtime delivery rules the same.

Runtime rules

• Fixed banners own their top or bottom rail and suppress centered fixed toast rails in the same slot.
• Relative banners do not suppress centered fixed toast rails because they are not sharing the same fixed overlay rail.
• Banner layout overrides such as border color, border width, text color, background, padding, and dismiss visibility are still applied through runtime CSS scoping.