Section headings

A title with optional description and a bottom border to separate sections of content; optional right-aligned actions.

Preview

Job postings

Workcation is a property rental website. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Job postings

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Buttons, SectionHeadings}

<SectionHeadings.section_heading
  title="Job postings"
  description="Workcation is a property rental website."
/>

<SectionHeadings.section_heading title="Job postings">
  <:actions>
    <Buttons.button variant="secondary">Share</Buttons.button>
    <Buttons.button phx-click="create">Create</Buttons.button>
  </:actions>
</SectionHeadings.section_heading>

React (JSX)

import { Button, SectionHeading } from "../ui/index.mjs"

<SectionHeading
  title="Job postings"
  description="Workcation is a property rental website."
/>

<SectionHeading
  title="Job postings"
  actions={
    <>
      <Button variant="secondary">Share</Button>
      <Button>Create</Button>
    </>
  }
/>