Canopy Separator — Best Practices
SkillDev toolsBest practices for the Canopy Separator component. Trigger when visually dividing content sections or grouping items in an Angular project using Canopy.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Canopy Separator — Best Practices skill
What this skill tells your AI
The instructions your AI receives, as published by legal-and-general/canopy in skills/best-practice/separator/SKILL.md and read by ahel’s review.
This skill provides usage guidance, dos and don'ts, and input reference for the Canopy lg-separator component from @legal-and-general/canopy.
Apply this skill whenever you use LgSeparatorComponent or lg-separator.
Import
import { LgSeparatorComponent } from '@legal-and-general/canopy';
Basic Usage
<lg-separator></lg-separator>
With a dotted style:
<lg-separator variant="dotted"></lg-separator>
With a semantic separator role for accessibility:
<lg-separator [hasRole]="true"></lg-separator>
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'dotted' | 'solid' | Visual style of the separator. |
hasRole | boolean | false | When true, adds role="separator" to the element. |
Dos and Don'ts
Do
- Do use a separator to group related items, such as within a list.
- Do use a separator to divide content into clear, manageable sections.
Design Constraints
- The separator can be positioned at full or partial width.
- This component is pending brand modernisation.
Signals
- GitHub stars
- 23
- Forks
- 46
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
canopy-separator- Source
- github.com/legal-and-general/canopy