x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="max-w-sm"> <div class="rounded-xl border bg-card text-card-foreground shadow"> <div class="p-6 pt-0 first:pt-6"> <p class="text-sm text-muted-foreground">Card with body content and a footer containing actions.</p> </div> <div class="flex items-center p-6 pt-0"> <div class="flex gap-2"> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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:bg-muted! disabled:text-muted-foreground! h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false">Save</button> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false">Cancel</button> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="max-w-sm"> <%= render(UI::Card.new) do |card| %> <% card.with_content do %> <p class="text-sm text-muted-foreground">Card with body content and a footer containing actions.</p> <% end %> <% card.with_footer do %> <div class="flex gap-2"> <%= render(UI::Button.new(variant: :primary, size: :sm)) { "Save" } %> <%= render(UI::Button.new(variant: :outline, size: :sm)) { "Cancel" } %> </div> <% end %> <% end %></div>No notes provided.
No params configured.