canopy-spacing-padding
OfficialConsistent Canopy padding across components.
AuthorLegal-and-General
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This guide provides best-practice guidance for applying Canopy padding via the lgPadding directive in Angular projects, ensuring consistent spacing across components.
Core Features & Use Cases
- Clear usage references for the lgPadding inputs (lgPadding, lgPaddingTop, lgPaddingRight, lgPaddingBottom, lgPaddingLeft, lgPaddingHorizontal, lgPaddingVertical) and breakpoint-aware options like NoneAt to maintain responsive layouts.
- Real-world scenarios showing all-sides, per-side, and breakpoint-based padding adjustments for Canopy components such as cards, panels, and grids.
- Practical examples that help teams align with the Canopy spacing scale and avoid custom CSS padding.
Quick Start
Integrate Canopy spacing by applying the lgPadding directive to components in your Angular app.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: canopy-spacing-padding Download link: https://github.com/Legal-and-General/canopy/archive/main.zip#canopy-spacing-padding Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.