A layout heading component for page titles, subtitles, and actions.

Examples

Basic

Use the :title and :subtitle slots for the main heading content. Use the :actions slot for buttons or links on the right.

<.layout_heading>
  <:title>Page Title</:title>
  <:subtitle>Optional subtitle or context</:subtitle>
  <:actions>
    <.action phx-click="save">Save</.action>
  </:actions>
</.layout_heading>

Title and subtitle only

Omit the :actions slot when no action buttons are needed.

<.layout_heading>
  <:title>Settings</:title>
  <:subtitle>Manage your preferences</:subtitle>
</.layout_heading>

Styling

The e2e demo includes static Anatomy and Style pages (/layout-heading/anatomy, /layout-heading/style) built from E2eWeb.Demos.LayoutHeadingDemo. Use the layout-heading root class, optional layout-heading--* modifiers for semantic ink on the title and subtitle (same pattern as other primitives), Tailwind max-w-* on the root for width, and typography utilities on the :title / :subtitle slots when you need scale beyond default h1 / h2.

Target elements with data attributes:

• [data-scope="layout-heading"][data-part="root"] – root container
• [data-scope="layout-heading"][data-part="content"] – title/subtitle wrapper
• [data-scope="layout-heading"][data-part="title"] – main title
• [data-scope="layout-heading"][data-part="subtitle"] – subtitle
• [data-scope="layout-heading"][data-part="actions"] – actions wrapper