Page header

A fixed page-level heading sequence with optional context and one typed action group.

Source
NitroKit::PageHeader owns eyebrow → h1 → description → actions ordering and the narrow responsive collapse.
API
Supply title, eyebrow, and description through constructor text or matching compound methods; title is required. actions accepts at most one NitroKit::ButtonGroup.

Content and action pressure

Fixed h1 ordering from the smallest title through long copy and grouped actions.

Title only

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/page_header_page.rb
render NitroKit::PageHeader.new(title: "Audit log", id: "gallery-page-header-title-only")

Complete

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/page_header_page.rb
render 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
end

Long copy

ViewportFull width
Rubytest/dummy/app/components/gallery/blocks/page_header_page.rb
render 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
end

Nested in a narrow container

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/page_header_page.rb
render 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
end