x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="space-y-4 max-w-2xl"> <div class="relative flex gap-4 rounded-lg p-4 bg-primary/10 border border-primary/20 text-foreground" data-controller="ui--banner" data-slot="banner"> <div class="shrink-0"> <img src="https://placehold.co/64x64/7c3aed/white?text=VK" alt="" class="h-16 w-16 rounded-lg" /> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold mb-1">Introducing Velvet Kit</h4> <p class="text-sm text-foreground/80"> A modern component library for Rails. Build beautiful interfaces faster with pre-built, accessible components. </p> <div class="mt-3"> <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">View docs →</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
10
11
12
<div class="space-y-4 max-w-2xl"> <%= render(UI::Banner.new(variant: :introduction)) do |banner| %> <% banner.with_illustration do %> <img src="https://placehold.co/64x64/7c3aed/white?text=VK" alt="" class="h-16 w-16 rounded-lg" /> <% end %> <% banner.with_title { "Introducing Velvet Kit" } %> A modern component library for Rails. Build beautiful interfaces faster with pre-built, accessible components. <% banner.with_action do %> <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">View docs →</a> <% end %> <% end %></div>No notes provided.
No params configured.