Canopy Heading — Best Practices

This skill provides usage guidance for the Canopy LgHeadingComponent from @legal-and-general/canopy.

Apply this skill whenever you need to render a heading at a programmatically-determined level.

---

Import

import { LgHeadingComponent } from '@legal-and-general/canopy';

---

Basic Usage

LgHeadingComponent should only be used inside other components — for example, inside an accordion panel heading or a card title — where the heading level must be configurable by the consumer. Do not use it directly in application templates for static headings.

<!-- Inside a wrapper component that accepts a headingLevel input -->
<lg-heading [level]="headingLevel">{{ title }}</lg-heading>

---

Inputs

Input	Type	Default	Required	Description
level	number	undefined	Yes	The semantic heading level (1–6).

---

Design Constraints

• Always pass a level value that maintains a logical document outline.
• Consumers of components that wrap lg-heading must supply a headingLevel input that reflects the correct hierarchy for their page context.