Card headings

A bordered header strip for a card with title, optional description, optional leading avatar, and optional right-aligned actions.

Preview

Job postings

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Tom Cook

Software engineer

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Avatars, Buttons, CardHeadings}

<CardHeadings.card_heading title="Job postings" />

<CardHeadings.card_heading title="Job postings">
  <:actions>
    <Buttons.button phx-click="create_job">Create new job</Buttons.button>
  </:actions>
</CardHeadings.card_heading>

<CardHeadings.card_heading title="Tom Cook" description="Software engineer">
  <:leading>
    <Avatars.avatar size="md" src={@user.avatar_url} />
  </:leading>
  <:actions>
    <Buttons.button variant="secondary">Message</Buttons.button>
  </:actions>
</CardHeadings.card_heading>

React (JSX)

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

<CardHeading title="Job postings" />

<CardHeading title="Job postings" actions={<Button>Create new job</Button>} />

<CardHeading
  title="Tom Cook"
  description="Software engineer"
  leading={<Avatar size="md" src={user.avatarUrl} />}
  actions={<Button variant="secondary">Message</Button>}
/>