Colophon

An optional line naming the materials (typefaces, locale), set as a plain mono caption. Use it at the foot of long-form documents such as reports; marketing and app pages don't need it.

jsx

<Colophon note="Composed in en-GB." />
<Colophon onDark>Set in Cormorant Garamond and IBM Plex Mono.</Colophon>

Props: children (the line; sensible default), note (second line), onDark.

Don't: set it in italic, centre it under a diamond, or stack it with the seal and a slogan. See readme · Guardrails.

Preview

Declarations

TypeScript

export interface ColophonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Optional second line, e.g. "Composed in en-GB." */
  note?: string | null;
  onDark?: boolean;
  className?: string;
  /** The line. Defaults to "Set in Cormorant Garamond, IBM Plex Mono and IBM Plex Sans." */
  children?: React.ReactNode;
}

/**
 * Optional materials line (typefaces, locale) for the foot of long-form
 * documents. Upright mono caption, no ornament. Not required on every page.
 */
export function Colophon(props: ColophonProps): React.JSX.Element;