Skip to main content

Heading Levels

Intent​

Validate that the six HTML-style heading level variants (h1 through h6) render with progressively smaller font sizes, matching the semantic document hierarchy expected by LLM-generated wireframes.

What is being tested​

  • variant: h1 through h6 are all valid enum values
  • Each heading level maps to a distinct font size in the renderer
  • h1 is visually the largest, h6 the smallest

Acceptance criteria​

✓ No errors ✓ 6 heading lines visible with clearly decreasing size ✓ h1 is approximately double the size of h6 ✓ A Separator between the heading block and the body text is visible

Example​

Open in playground →

Screen {
  width: 700
  height: 600
  padding: 32

  Column {
    gap: 6
    Text { text: "Heading 1 — h1"  variant: h1 }
    Text { text: "Heading 2 — h2"  variant: h2 }
    Text { text: "Heading 3 — h3"  variant: h3 }
    Text { text: "Heading 4 — h4"  variant: h4 }
    Text { text: "Heading 5 — h5"  variant: h5 }
    Text { text: "Heading 6 — h6"  variant: h6 }
    Separator {}
    Text { text: "Body text below the headings for scale reference"  variant: body }
  }
}

Preview​

ut-f2-09-text-heading-levels