Page header
The top of a page: a back link, the title with its badges, a description, and the page's actions on the right.
Deploy keys
3 activeBetaKeys that can pull from this repository. Anyone holding one can read every branch, so revoke a key as soon as the machine using it is retired.
<%= page_header title: "Deploy keys", back: { text: "Settings", path: request.path },
description: "Keys that can pull from this repository. Anyone holding one can read every branch, " \
"so revoke a key as soon as the machine using it is retired." do |header| %>
<% header.badge "3 active", tone: :good %>
<% header.badge "Beta", tone: :info %>
<%= tag.button "Add key", type: "button", class: button_classes(:primary) %>
<% end %>With something before the title
header.leading takes markup for an avatar or icon; title and description take blocks too.
AL
Ada Lovelace
Admin Engineer · London · joined 10 December 1815
<%= page_header back: { text: "People", path: request.path } do |header| %>
<% header.leading do %>
<span class="flex size-12 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-700">AL</span>
<% end %>
<% header.title { "Ada Lovelace" } %>
<% header.description do %>
Engineer · London · joined <strong>10 December 1815</strong>
<% end %>
<% header.badge "Admin", tone: :accent %>
<%= menu do |menu| %>
<% menu.link "Edit", request.path %>
<% menu.link "Send a message", request.path %>
<% end %>
<% end %>