skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

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
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-page
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-content-area

Implement Canopy Content Area layouts in Angular projects with best practices.

Official
Intermediate
jiaiyanjiaiyan
8

n-page-header

Render reusable page header UI with title, subtitle, and action slots for Naive UI pages.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-grid

Enforce Canopy grid directive order and responsive breakpoint usage in Angular components.

Official
Intermediate
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced