Skip to content

Layout Heading

Anatomy

Page headings with title, subtitle, and actions.

Title only

Page Title

    <.layout_heading class="layout-heading">
  <:title>Page Title</:title>
</.layout_heading>

Title and subtitle

Page Title

Controller View

    <.layout_heading class="layout-heading">
  <:title>Page Title</:title>
  <:subtitle>Controller View</:subtitle>
</.layout_heading>

With actions

Page Title

Controller View

    <.layout_heading class="layout-heading">
  <:title>Page Title</:title>
  <:subtitle>Controller View</:subtitle>
  <:actions>
    <.navigate to={~p"/"} type="href" class="button">
      <.heroicon name="hero-arrow-left" class="icon" /> Back
    </.navigate>
  </:actions>
</.layout_heading>