Email heading

Pro

The title of an EmailPreview on an app's page, at the level the page's outline gives it: headingLevel when set; else one below the nearest HeadingScope; else fallback. It is a client part because only a client component can read a HeadingScope; EmailPreview, EmailLayout and renderEmail stay free of "use client" so a mailer can render the email on the server. It carries the email's own inline style.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

5.1.0

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0, 4.2.0, 4.3.0, 4.4.0, 4.5.0 and 5.0.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/email-heading

Brings in: heading-level, heading-scope, tokens

Usage

TSX · The example above

"use client"

import { EmailHeading } from "@/components/candor/email-heading"
import { HeadingScope } from "@/lib/candor/heading-scope"

// EmailPreview draws its title with EmailHeading. Used on its own it takes the level from the page's outline: one below
// the nearest HeadingScope, else `fallback`.
export default function Example() {
  return (
    <div className="flex max-w-xl flex-col gap-4 text-sm">
      <h2 className="text-base font-semibold">Notification emails</h2>
      <HeadingScope level={2}>
        <EmailHeading fallback={3} style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>
          An approval is waiting for you
        </EmailHeading>
      </HeadingScope>
      <p className="text-muted-foreground">The title above is an h3, one below the scope's level 2; with no scope it would draw at the fallback, and headingLevel sets it outright.</p>
    </div>
  )
}

<EmailHeading>

Prop	Type	Default	Description
headingLevel	`HeadingLevel \| undefined`	—	The title's level, taking the scope's and the fallback's place.
fallbackrequired	`HeadingLevel`	—	The level outside any `HeadingScope`.
style	`React.CSSProperties \| undefined`	—	The email's inline style for the title.
children	`React.ReactNode \| undefined`	—	The title.

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

HeadingLevel from @/lib/candor/heading-level: A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.; 1 | 2 | 3 | 4 | 5 | 6