# VelvetKit

## Banner (`UI::Banner`)

A dismissible strip across the top of a page.

Add it: `bin/rails generate velvetkit:add banner`

Also adds: `icon`, `spinner`, `button`

Stimulus: `ui--banner`

### Arguments

```ruby
UI::Banner.new(variant: :introduction, dismissible: true, full_width: false, dismiss_icon: "x", class: nil, **html_attrs)
```

Slots: `with_illustration`, `with_leading_icon`, `with_title`, `with_action`

### Example: Introduction

```erb
<div class="space-y-4 max-w-2xl">
  <%= render(UI::Banner.new(variant: :introduction)) do |banner| %>
    <% banner.with_title { "Welcome to your workspace" } %>
    Invite your team, connect your data and publish your first report.
    <% banner.with_action do %>
      <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">Get started →</a>
    <% end %>
  <% end %>
</div>
```

### Example: Promotion

```erb
<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>
```

### Example: With Illustration

```erb
<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>
```