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

canopy-footer

Guide Canopy footer component usage with lg-footer attribute and Angular inputs.

23|46|Updated Sep 7, 2020
Search Tags:#angular#navigation#footer#logo#canopy#lg-footer
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-footer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-footer
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/footer
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-footer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Canopy Footer Best Practices skill provides usage guidance and input references for the Canopy footer components, helping teams implement consistent footers in Angular projects using Canopy.

Core Features & Use Cases

  • Guidance on applying the lg-footer attribute to a footer element and composing it with the LgFooterNavComponent and LgFooterLogoComponent.
  • Clear inputs and usage patterns for LgFooterNavComponent and LgFooterLogoComponent, including constraints and recommended props.
  • Design constraints and best practices to ensure accessibility and consistent behavior across footers.

Quick Start

Apply the lg-footer attribute to a footer element and compose it with LgFooterLogoComponent and LgFooterNavComponent.

Frequently Asked Questions about canopy-footer

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

FAQPage Schema
How do I add a footer to an Angular project using Canopy?▼

The Canopy footer requires composing the LgFooterNavComponent for navigation links and the LgFooterLogoComponent for branding, both wrapped in a footer element with the lg-footer attribute applied.

What inputs are available for the Canopy footer logo component?▼

The LgFooterLogoComponent accepts specific inputs for logo sizing and branding assets, with design constraints enforced to maintain visual consistency and accessibility across Canopy footer implementations.

How do I configure navigation links in a Canopy Angular footer?▼

Configure navigation links in a Canopy Angular footer using the LgFooterNavComponent, which provides specific inputs for link structure and enforces anchor rel behavior constraints for accessibility.

Does the Canopy footer component enforce anchor rel attributes for accessibility?▼

Yes, the Canopy footer components enforce design constraints including specific anchor rel behavior to ensure accessibility and consistent link behavior across footer implementations in Angular projects.

Can I use Canopy footer components without prior Angular dependencies?▼

No, the Canopy footer components are designed specifically for Angular projects using the Canopy design system, requiring an existing Angular environment to implement the lg-footer attribute and related components.

Related Skills

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

canopy-page

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

Official
Intermediate
deomiarndeomiarn

footer-configuration

Configure Next.js footer navigation links with i18n resources and sitemap data.

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-banner

Guide consistent Canopy lg-banner messages across Angular pages.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-colour-foundation

Apply Canopy colour tokens and WCAG contrast rules to Angular projects.

Official
Intermediate