x
1
2
3
4
5
6
7
<div data-controller="midwest-banner" class="midwest-banner visible position-sticky placement-top"> <div class="midwest-banner__content"> <div class="w-full"> <p>Adjust the parameters in the Lookbook UI to preview different configurations.</p> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% icon_val = params[:icon].presence&.to_sym %><% countdown_val = params[:countdown].presence&.to_i %><%= midwest_banner( position: (params[:position] || 'sticky').to_sym, placement: (params[:placement] || 'top').to_sym, icon: icon_val, striped: params[:striped] == true, animated: params[:animated] == true, closable: params[:closable] == true, alert: params[:alert] == true, countdown: countdown_val) do %> <p>Adjust the parameters in the Lookbook UI to preview different configurations.</p><% end %>Playground
This example uses dynamic preview parameters which can be edited live in the Lookbook UI
| Param | Description | Input |
|---|---|---|
|
How the banner is positioned: sticky (top/bottom of scroll container) or fixed (top/bottom of viewport) |
|
|
|
Which edge the banner attaches to |
|
|
|
Optional leading icon |
|
|
|
Diagonal stripe pattern overlay |
|
|
|
Animate in/out on show/hide |
|
|
|
Show the dismiss button |
|
|
|
Add role=alert for immediate screen reader announcement |
|
|
|
Auto-dismiss after this many seconds; replaces the close button with a countdown timer |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Banner/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."