Heading

Usage

• Use Heading to break page content into named sections and establish the content outline. It renders the native semantic tags <h1>–<h6>.
• Prefer Heading over Text whenever the content is a heading.
• Never pick a heading level for its appearance. Set the level (level) for semantics, then adjust styling with size, weight, or text.
• Use heading levels in sequential order. Never skip a level — a level 2 is followed by a level 3, not a level 4.
• Limit each page to one level 1 (level="1") heading as the page title. Major sections use level 2, subsections use level 3, and so on.

Appearance

• Level (level) — accepts "1" through "6", mapping to <h1>–<h6>. Levels 1 through 4 each have their own typography style; levels 5 and 6 share the level 4 style.
• Color (color) — defaults to the base text color, which adapts automatically to the background for contrast. Override only where the color carries semantic meaning.
• Font family (family) — sans-serif is the default. Use "mono" in code-related contexts.
• Font style (fontStyle) — use "italic" for visual emphasis without changing the heading's semantic level.
• Size (size) — override the font size independently of the level when the default style doesn't fit, keeping the level intact.
• Weight (weight) — override the font weight to increase or reduce contrast against surrounding text, keeping the level intact.
• Text style (text) — apply a predefined typography style (font size, weight, line height, letter spacing) to any level, e.g. "product-h1", "product-label", "product-link", "product-ps".

Behaviors

• Headings wrap automatically when the container resizes. The wrapping algorithm avoids widows — single words on the last line.

Content

• Keep headings to six or fewer words. Put supplemental information in a Paragraph below the heading.
• Never write a heading that reads like a full sentence.
• Use sentence case.
• Omit end punctuation, except a question mark on a heading that confirms an action (e.g. "Delete this workspace?").

Implementation Notes

• Heading extends Text and inherits every Text prop (text, size, weight, color, family, fontStyle) plus Box layout and sprinkle props.
• level defaults to "2" when omitted.
• The text prop is derived from level by default ("1" → "product-h1", "2" → "product-h2", "3" → "product-h3", and "4", "5", "6" → "product-h4"). Setting text explicitly overrides the mapping.
• Levels "5" and "6" render the "product-h4" style, so they are visually identical to level 4 by default.
• The element is polymorphic via as, which overrides the tag derived from level. Setting it decouples the rendered tag from the level — leave it unset so the semantics match.
• React: pass content as children — <Heading level="2">Campaign overview</Heading>.
• Ember: pass content via {{yield}} (default block) — <PlumaHeading @level="2">Campaign overview</PlumaHeading>.