x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="space-y-4 max-w-2xl"> <div class="relative flex gap-4 rounded-lg p-4 bg-accent border border-accent-foreground/20 text-foreground" data-controller="ui--banner" data-slot="banner"> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold mb-1">Now available: Advanced Analytics</h4> <p class="text-sm text-foreground/80"> Unlock powerful insights with our new analytics dashboard. Free for Pro plan users until June 30. </p> <div class="mt-3"> <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">Upgrade now →</a> </div> </div> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed absolute top-3 right-3 text-muted-foreground hover:text-foreground" aria-label="Dismiss" data-action="click->ui--banner#dismiss"><i data-lucide="x" class="inline-block shrink-0 w-3 h-3" aria-hidden="true"></i> </button> </div></div>1
2
3
4
5
6
7
8
9
<div class="space-y-4 max-w-2xl"> <%= render(UI::Banner.new(variant: :promotion)) do |banner| %> <% banner.with_title { "Now available: Advanced Analytics" } %> Unlock powerful insights with our new analytics dashboard. Free for Pro plan users until June 30. <% banner.with_action do %> <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">Upgrade now →</a> <% end %> <% end %></div>No notes provided.
No params configured.