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

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

Related Skills

Explore More Design & Creative Skills→
Legal-and-GeneralLegal-and-General
23

canopy-pipes-kebab-case

Transform strings to kebab-case in Angular templates with Canopy's LgKebabCasePipe.

Official
Basic
afonsolelisafonsolelis

acessibilidade

Ensure HTML pages conform to WCAG 2.1 AA accessibility guidelines.

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

canopy-link-menu

Guide Angular developers in implementing accessible Canopy Link Menu components.

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

canopy-spacing-margin

Guide Angular developers to apply Canopy spacing with lgMargin directives.

Official
Basic