Elements

Section title

An optional tagline, title, description, and up to two action slots, stacked with size-aware spacing.

Install

npx shadcn@latest add @alix/sectionTitle

Preview

Pricing

Plans for every team

Start free, upgrade when you grow.

Usage

<SectionTitle
  tagline="Pricing"
  title="Plans for every team"
  description="Start free, upgrade when you grow."
  primaryAction={<Button>Get started</Button>}
  secondaryAction={<Button variant="outline">Contact sales</Button>}
/>

Examples

Size scale

Choose the size by section prominence while keeping the same data and action contract.

Enterprise transformation

Large section leads for major page moments.

Performance improvement

Default section leads for most content bands.

Transaction services

Medium section leads for tighter page groups.

Risk review

Small section leads for compact supporting content.

<div className="grid w-full max-w-4xl gap-8 md:grid-cols-2">
  <SectionTitle
    size="xl"
    title="Enterprise transformation"
    description="Large section leads for major page moments."
    align="start"
  />
  <SectionTitle
    size="lg"
    title="Performance improvement"
    description="Default section leads for most content bands."
    align="start"
  />
  <SectionTitle
    size="md"
    title="Transaction services"
    description="Medium section leads for tighter page groups."
    align="start"
  />
  <SectionTitle
    size="sm"
    title="Risk review"
    description="Small section leads for compact supporting content."
    align="start"
  />
</div>

Rich description

Pass block content when a CMS renderer returns multiple paragraphs instead of one string.

Work with senior operators

Our teams join clients when the choices are urgent and the operating facts are still moving.

The model keeps leadership close to the work from diagnosis through delivery.

<SectionTitle
  title="Work with senior operators"
  description={
    <>
      <p>
        Our teams join clients when the choices are urgent and the
        operating facts are still moving.
      </p>
      <p>
        The model keeps leadership close to the work from diagnosis
        through delivery.
      </p>
    </>
  }
  primaryAction={<Button>Meet our people</Button>}
  secondaryAction={<Button variant="outline">View open roles</Button>}
  align="start"
/>

Insight row recipe

Lead a card row with SectionTitle when the section needs one action pair above repeated content.

Latest insights

Briefings for leaders working through liquidity, diligence, and operational change.

Liquidity decisions need one operating rhythm

How leadership teams connect cash, margin, and working capital in the same cadence.

Diligence that survives day one

What deal teams can carry from findings into action without losing momentum.

Supply shocks are finance events

A practical view of translating disruption into inventory and cash decisions.

<div className="w-full max-w-5xl space-y-8">
  <SectionTitle
    title="Latest insights"
    description="Briefings for leaders working through liquidity, diligence, and operational change."
    primaryAction={
      <Button rightIcon={<ArrowRight />}>View all insights</Button>
    }
    secondaryAction={
      <Button variant="outline">Subscribe</Button>
    }
    align="start"
  />
  <Grid columns={3} gap="lg">
    <ContentCard
      media={{
        type: "image",
        src: "/brand/editorial-1.jpg",
        alt: "Consultants reviewing project notes at a table",
      }}
      title="Liquidity decisions need one operating rhythm"
      excerpt="How leadership teams connect cash, margin, and working capital in the same cadence."
      href="/insights/liquidity-rhythm"
    />
    <ContentCard
      media={{
        type: "image",
        src: "/brand/editorial-2.jpg",
        alt: "Printed materials arranged for a project review",
      }}
      title="Diligence that survives day one"
      excerpt="What deal teams can carry from findings into action without losing momentum."
      href="/insights/diligence-day-one"
    />
    <ContentCard
      media={{
        type: "image",
        src: "/brand/ship.webp",
        alt: "Container ship underway",
      }}
      title="Supply shocks are finance events"
      excerpt="A practical view of translating disruption into inventory and cash decisions."
      href="/insights/supply-shocks-finance"
    />
  </Grid>
</div>

When to use it

Use it for

Major page sections where the heading, description, and one action pair should share one spacing system.
CMS rich text descriptions that may render multiple paragraphs beneath a heading.
Action slots that need real Buttons, links, or custom controls without a config object.

Reach for something else

Compact dashboard card headings — use Panel instead.
Text inside interactive controls — use Button, Tabs, or the owning control's typography instead.
A standalone label or chip above unrelated content — use Tagline instead.
Fully locked CMS section templates — use TextAndTextBlock or TextAndMediaBlock instead.

Props

Prop	Type	Default	Description
tagline	ReactNode	—	Eyebrow. A string renders the default Tagline chip; pass a <Tagline> for a variant.
title	ReactNode	—	The heading.
description	ReactNode	—	Body copy. A string renders a <p>; rich/block content renders a spaced <div>.
primaryAction / secondaryAction	ReactNode	—	Action slots — pass a Button, Link, or any node.
size	"xl" \| "lg" \| "md" \| "sm"	"lg"	Drives the title's heading variant and spacing.
align	"start" \| "center" \| "end" \| "stretch"	"center"	Cross-axis alignment of the stack.