Canopy Hide At — Best Practices
SkillDev toolsBest practices for the Canopy Hide At directive. Trigger when using lgHideAt or LgHideAtDirective to hide elements at specific breakpoints 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 Hide At — 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/hide-at/SKILL.md and read by ahel’s review.
This skill provides usage guidance for the Canopy lgHideAt directive from @legal-and-general/canopy.
Apply this skill when you need to hide an element at certain breakpoints.
See also: the
show-atskill for showing elements at breakpoints.
Import
import { LgHideAtDirective } from '@legal-and-general/canopy';
Basic Usage
<!-- Hide at the lg breakpoint and above -->
<p lgHideAt="lg">Hidden on large screens and above</p>
Inputs
Available breakpoints: sm, md, lg, xl, xxl.
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
lgHideAt | Breakpoints | null | No | The breakpoint at which the element is hidden. |
Signals
- GitHub stars
- 23
- Forks
- 46
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
canopy-hide-at- Source
- github.com/legal-and-general/canopy