canopy-page

Guide Angular developers to implement full-page layouts with the Canopy lg-page component.

23|46|Updated Sep 7, 2020

Search Tags:#accessibility #layout #angular #best-practices #page #canopy

Ready to run

npx skills add https://github.com/Legal-and-General/canopy --skill canopy-page

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canopy-page
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/page
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides Angular teams to implement reliable full-page layouts using the Canopy lg-page component, ensuring consistent structure with header, content area, and footer.

Core Features & Use Cases

Provides a structured page container (lg-page) with header and footer slots.
Enforces responsive layout using the canopy grid directives (lgContainer, lgRow, lgCol).
Includes accessibility enhancements like skip-to-content links and predictable focus order.

Quick Start

Import the Canopy Page module and wrap your page content in an lg-page element with header and footer slots to bootstrap a full-page layout.

Frequently Asked Questions about canopy-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a responsive full-page layout in Angular with a header and footer?▼

Build a responsive full-page layout in Angular by wrapping your content in the lg-page element, which provides dedicated header and footer slots alongside a central content area that adapts for desktop and mobile.

What is the best way to structure consistent page layouts using Canopy grid directives?▼

Structure consistent page layouts using Canopy grid directives by applying lgContainer, lgRow, and lgCol to organize content within the lg-page wrapper, ensuring predictable alignment and responsive behavior across different screen sizes.

How do I add accessibility features like skip-to-content links to an Angular page layout?▼

Add accessibility features to an Angular page layout by using the lg-page component, which includes built-in enhancements like skip-to-content links and predictable focus order to ensure keyboard navigation and screen reader compatibility.

Does the Canopy lg-page component support both desktop and mobile responsive layouts?▼

Yes, the Canopy lg-page component supports desktop and mobile responsive layouts by combining the page container with grid directives, ensuring the central content area scales appropriately across different device viewports.

Why should I use lg-page instead of manually structuring Angular page containers?▼

Use lg-page instead of manually structuring containers to guarantee consistent structure and behavior, leveraging built-in accessibility enhancements and enforced responsive grid alignment rather than managing custom layout logic.