next

.design-sync/ds-src/Heading.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 2 for a section headline, 3 for a block within it. Never skip a level. */
+  level?: 2 | 3;
+  id?: string;
+  children?: ReactNode;
+}
+
+/** A section headline. It may state a claim, but it never advertises. */
+export function Heading({ level = 2, id, children }: HeadingProps) {
+  const Tag = level === 3 ? 'h3' : 'h2';
+  return (
+    <Tag id={id} className={level === 3 ? 'h3' : 'h2'}>
+      {children}
+    </Tag>
+  );
+}