CalloutBanner
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