ANVIL COMPONENTS
Live examples of all Anvil Design System components
ComicDetailCardComponent
Custom Love Song
A personalized song crafted from your story
- check_circle Personalized lyrics based on your story
- check_circle Professional recording and production
- check_circle Delivered in 7 days or less
$299.00
<%= render ComicDetailCardComponent.new(
title: "Custom Love Song",
show_price: true,
price: 29900
) do |c| %>
<% c.with_sidebar do %>
<!-- Price display -->
<% end %>
<!-- Content -->
<% end %>AddonCardComponent
Rush Processing
Get your song in 3 days instead of 7
$99.00
Extra Verse
Add another verse to tell more of your story
$49.00
Professional Mix
Studio-quality mixing and mastering
$79.00
Instrumental Track
Get the instrumental version too
$29.00
<%= render AddonCardComponent.new(
addon: addon,
selectable: true
) %>ComicFooterComponent
<%= render ComicFooterComponent.new(
message: "100% Satisfaction Guaranteed",
current_user: current_user
) %>ComicButtonComponent
Signature comic-styled button with rounded shape, bold colors, and press animation
Primary (Red with Yellow Text)
Secondary (Yellow with Black Text)
Outline (White with Black Text)
Full Width
Checkout Button (Submit Type)
<%= render ComicButtonComponent.new(
text: "SECURE CHECKOUT!",
type: "submit",
variant: :primary,
size: :large
) %>
<!-- Variants: :primary, :secondary, :outline -->
<!-- Sizes: :small, :medium, :large -->
<!-- Types: "button", "submit", "reset" -->
<!-- full_width: true/false -->Badges
<span class="inline-block border-3 border-comic-black
bg-comic-red px-4 py-2 font-headline text-sm
font-bold uppercase text-comic-white shadow-comic">
Popular
</span>ComicAudioPlayerComponent
Audio player with download and share options, supports locked state
<%= render ComicAudioPlayerComponent.new(
title: "YOUR SONG",
audio_url: "https://example.com/song.mp3",
mp3_url: "/downloads/song.mp3",
wav_url: "/downloads/song.wav",
share_url: "https://example.com/share/song",
locked: false
) %>ComicVideoPlayerComponent
Video player with purchase and download options, supports unavailable state
<%= render ComicVideoPlayerComponent.new(
title: "YOUR PREMIER VIDEO",
video_url: "https://example.com/video.mp4", # nil for unavailable
mp4_url: "/downloads/video.mp4", # nil to disable
purchase_url: "/purchase/video", # nil to hide
locked: false
) %>ComicProgressBarComponent
Progress bar with configurable steps and icons, shows completion status
In Progress (Step 3 of 5)
SONG STATUS
INTAKE
DRAFT
APPROVED
RECORDING
DELIVERED
Completed (Final Step)
SONG STATUS
INTAKE
DRAFT
APPROVED
RECORDING
DELIVERED
<%= render ComicProgressBarComponent.new(
title: "SONG STATUS",
steps: [
{ label: "INTAKE", icon: "edit_note" },
{ label: "DRAFT", icon: "auto_awesome" },
{ label: "APPROVED", icon: "thumb_up" },
{ label: "RECORDING", icon: "mic" },
{ label: "DELIVERED", icon: "celebration" }
],
current_step: 2 # Zero-based index
) %>YouTubeShortsComponent
Embeds YouTube Shorts videos with proper 9:16 aspect ratio and Anvil styling.
Props:
url(required) - YouTube Shorts URLtitle(optional) - Video title for accessibility (defaults to "YouTube Short")
Default Example
Without Custom Title
<%= render YouTubeShortsComponent.new(
url: "https://youtube.com/shorts/jruhldNzJPc?feature=share",
title: "Don't Give Bad Gifts"
) %>📝 Features:
- Automatically extracts video ID from various YouTube Shorts URL formats
- Maintains 9:16 portrait aspect ratio (same as mobile screens)
- Anvil design styling with border-5, shadow-comic-hard, and rounded-none
- Fully responsive and supports fullscreen playback
- Accessible with proper iframe title attributes