CalloutBanner is used to inform buyers about the details of a limited time offer. They differ from Banner which is used to report status.




optional = ?

Name Type Description
title? string Callout banners have an optional title. Use a title to grab the buyers attention with a short, concise message.
border? "none" | "block" Adds a top and bottom border to the callout banner @default 'block'
background? "secondary" | "transparent" Sets the background color of the callout banner @default 'secondary'
alignment? "leading" | "center" | "trailing" Sets the alignment of the title and children @default 'center'
spacing? "xtight" | "tight" | "loose" | "xloose" Sets the spacing between the title and children @default 'tight'


  • Never display more than one CalloutBanner
  • Place callout banners near the top of the page to bring the buyer's attention
  • The text should be written as concisely as possible
  • Be considerate and avoid anxiety provoking language:
  • Avoid exclamation points – “Wait! Before time runs out!”
  • Give it a feeling of personalization

On this page