Banner

UI::Banner

A dismissible strip across the top of a page.

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

bin/rails generate velvetkit:add banner

Also adds: Icon Spinner Button
Stimulus: ui--banner
Installs: Nothing

Examples

Introduction

Welcome to your workspace

Invite your team, connect your data and publish your first report.

Get started →

introduction.html.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>

Promotion

Now available: Advanced Analytics

Unlock powerful insights with our new analytics dashboard. Free for Pro plan users until June 30.

Upgrade now →

promotion.html.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>

With Illustration

Introducing Velvet Kit

A modern component library for Rails. Build beautiful interfaces faster with pre-built, accessible components.

View docs →

with_illustration.html.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>

API

Arguments

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