Page headings

A large page title with optional inline meta items and right-aligned action buttons.

Preview

Back End Developer

Full-time

Remote

$120k – $140k

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Buttons, PageHeadings}

<PageHeadings.page_heading title="Back End Developer">
  <:meta>
    <.icon name="hero-briefcase-mini" class="mr-1.5 size-5 text-gray-400" /> Full-time
  </:meta>
  <:meta>
    <.icon name="hero-map-pin-mini" class="mr-1.5 size-5 text-gray-400" /> Remote
  </:meta>
  <:action>
    <Buttons.button variant="secondary">Edit</Buttons.button>
  </:action>
  <:action>
    <Buttons.button phx-click="publish">Publish</Buttons.button>
  </:action>
</PageHeadings.page_heading>

React (JSX)

import { BriefcaseIcon, MapPinIcon } from "@heroicons/react/20/solid"
import { Button, PageHeading } from "../ui/index.mjs"

<PageHeading
  title="Back End Developer"
  meta={[
    <><BriefcaseIcon className="mr-1.5 size-5 text-gray-400" /> Full-time</>,
    <><MapPinIcon className="mr-1.5 size-5 text-gray-400" /> Remote</>,
  ]}
  actions={[
    <Button key="edit" variant="secondary">Edit</Button>,
    <Button key="publish">Publish</Button>,
  ]}
/>