Card
A bordered surface for a section of a page, with an optional title, header actions and a tinted footer.
A card that is one link
href: makes the whole card a link, for a row that opens a record. Nothing inside should be a link or button of its own.
<div class="w-80">
<%= card href: request.path do %>
<strong>Quarterly review</strong><br>
Due in 3 days · 4 of 6 sections complete
<% end %>
</div>Flush, with a table
flush: true drops the body's padding, so a table runs edge to edge.
Usage this month
| Metric | Value |
|---|---|
| Requests | 1,204 |
| Errors | 3 |
<%= card title: "Usage this month", flush: true do %>
<%= table_tag [ "Metric", "Value" ],
[ [ "Requests", { content: "1,204", class: "is-right is-numeric" } ],
[ "Errors", { content: "3", class: "is-right is-numeric" } ] ],
aligns: [ nil, :right ] %>
<% end %>A bar of your own
card.header { … } is a bar across the top in place of the title: a search field, a filter, a run of badges. panel puts a row of tabs in one.
A bar of your own across the top: a search field, a filter, a row of badges. The title and its actions
are for the plain case; this is for the rest.
<%= card do |card| %>
<% card.header do %>
<span class="text-sm font-medium">Renders</span>
<%= badge "3 queued", tone: :info %>
<span class="ml-auto text-xs text-neutral-500">Updated <%= local_time_tag @now, format: :relative %></span>
<% end %>
A bar of your own across the top: a search field, a filter, a row of badges. The title and its actions
are for the plain case; this is for the rest.
<% end %>