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 use priority to decide which matching banner should render first.
• Relative banners render in page flow and do not reserve a fixed viewport rail.
• Banner layout overrides such as border color, border width, text color, background, padding, and dismiss visibility are still applied through runtime CSS scoping.