A fixed page-level heading sequence with optional context and one typed action group.
NitroKit::PageHeader owns eyebrow → h1 → description → actions ordering and the narrow responsive collapse.Supply title, eyebrow, and description through constructor text or matching compound methods; title is required. level: picks the heading level 1..6 and actions accepts at most one NitroKit::ButtonGroup.Fixed h1 ordering from the smallest title through long copy and grouped actions.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(title: "Audit log", id: "gallery-page-header-title-only")Administration
Manage roles, invitations, and active access from one place.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(
title: "Workspace members",
eyebrow: "Administration",
description: "Manage roles, invitations, and active access from one place.",
id: "gallery-page-header-complete"
) do |header|
header.actions NitroKit::ButtonGroup.new(label: "Member actions") do |actions|
actions.button("Export", href: "#export")
actions.button("Invite teammate", href: "#invite", variant: :primary)
end
endLong content pressure
Review every access grant, invitation, service credential, and inherited project permission before the quarterly compliance export closes for all regional administrators.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(
title: "International Research, Production, and Reliability Engineering workspace",
eyebrow: "Long content pressure",
description: "Review every access grant, invitation, service credential, and inherited project permission before the quarterly compliance export closes for all regional administrators.",
id: "gallery-page-header-long"
) do |header|
header.actions NitroKit::ButtonGroup.new(label: "Compliance actions") do |actions|
actions.button("Download current report", href: "#download")
actions.button("Start quarterly review", href: "#review", variant: :primary)
end
endEyebrow, title, and description accept deferred blocks; level: keeps a nested header out of the page h1.
Billing
Every invoice issued since remains downloadable.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(level: 2, id: "gallery-page-header-compound") do |header|
header.eyebrow("Billing")
header.title do
plain "Invoices for "
strong { "Analytical Engines" }
end
header.description do
plain "Every invoice issued since "
time(datetime: "2026-01-01") { "January 2026" }
plain " remains downloadable."
end
header.actions NitroKit::ButtonGroup.new(label: "Invoice actions") do |actions|
actions.button("Download all", href: "#download-invoices")
end
endEyebrow, title, and description keep the leading column; the action group aligns with the header's top edge.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(
title: "Deployment history",
description: "Every release recorded for this environment.",
id: "gallery-page-header-actions-alignment"
) do |header|
header.actions NitroKit::ButtonGroup.new(label: "Deployment actions") do |actions|
actions.button("Compare", href: "#compare")
actions.button("Deploy", href: "#deploy", variant: :primary)
end
endRotate secrets without widening the page header API.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::Container.new(size: :sm, id: "gallery-page-header-container") do
render NitroKit::PageHeader.new(
title: "API credentials",
description: "Rotate secrets without widening the page header API.",
id: "gallery-page-header-nested"
) do |header|
header.actions NitroKit::ButtonGroup.new(label: "Credential actions") do |actions|
actions.button("Create credential", href: "#create", variant: :primary)
end
end
endLeave the eyebrow out unless it carries information the title cannot. A restated section name above every title is noise, so the eyebrow is styled as quiet supporting text rather than a label.
The navigation already says where the reader is, so an "Administration" eyebrow would only repeat it.
Manage roles, invitations, and active access from one place.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(
title: "Workspace members",
description: "Manage roles, invitations, and active access from one place.",
id: "gallery-page-header-eyebrow-omitted"
)Here the eyebrow names the parent record the title belongs to, which the title itself never repeats.
Analytical Engines
Issued 4 July 2026 and paid in full.
test/dummy/app/components/gallery/components/page_header_page.rbrender NitroKit::PageHeader.new(
eyebrow: "Analytical Engines",
title: "Invoice 2026-114",
description: "Issued 4 July 2026 and paid in full.",
id: "gallery-page-header-eyebrow-earned"
)Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.
docs/component_contracts.md · NitroKit::PageHeader
title: nil, eyebrow: nil, description: nil, level: 1, id: nilheader[data-nk=page-header]; title levels 1..6title through constructor text or its matching compound method. eyebrow, title, and description each accept text or a rich-content block exactly once and retain fixed eyebrow → heading → description order; at most one ButtonGroup through actions.Application conventions this component belongs to. Each summary is the leading section of its pattern document.
docs/patterns/crud_resource.md
Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.
test/dummy/app/components/gallery/agent_rules.rb
render NitroKit::Button.new("Save", variant: :primary).ArgumentError; this component's accepted options are in the contract above.html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.--nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.data-state when styling or behavior also needs it.