canopy-banner

Guide consistent Canopy lg-banner messages across Angular pages.

23|46|Updated Sep 7, 2020

Search Tags:#accessibility #angular #ui-design #design-system #banner #best-practice #canopy

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy's banner messages can vary in placement, tone, and accessibility, leading to inconsistent user experiences. This skill provides best-practice guidance to ensure banners are used correctly and consistently across pages.

Core Features & Use Cases

Guidance on when to use the lg-banner component (full-width banners, site-wide notices, or top-of-page warnings) and how to structure content for clarity.
Accessibility recommendations (ARIA roles, focus management, contrast) to ensure banners are perceivable and usable by all users.
Real-world use case: displaying a maintenance alert across all pages without breaking layout.

Quick Start

Create a full-width banner example using the lg-banner component with a warning status on a page to verify layout, accessibility, and tone.

Frequently Asked Questions about canopy-banner

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

FAQPage Schema

How do I implement a consistent full-width banner in Angular?▼

Use the lg-banner component in your Angular project to display full-width banners, site-wide notices, or top-of-page warnings, applying Canopy best practices for consistent tone, layout constraints, and status variations.

What are the accessibility requirements for Canopy banner messages?▼

Canopy banner messages require ARIA roles, focus management, and proper contrast to ensure perceivable and usable alerts. Following these accessibility recommendations guarantees banners meet compliance standards for all users.

When should I use the lg-banner component for site-wide notices?▼

Use the lg-banner component for site-wide notices when you need to display maintenance alerts or top-of-page warnings across all pages. It enforces layout constraints and status variations to prevent breaking page structure.

Does the Canopy design system support different status variations for banners?▼

The Canopy design system supports different status variations for banners, allowing you to display warnings and notices. Usage rules enforce predictable banner behavior and consistent visual cues across Angular pages.

What is the best way to display a maintenance alert without breaking layout?▼

The best way to display a maintenance alert without breaking layout is using the lg-banner component with a warning status. Canopy best practices enforce layout constraints to ensure the full-width banner integrates predictably.