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

canopy-link

Standardize Canopy link styling for Angular anchor elements and external links.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy link styles can be inconsistently applied across projects, leading to non-uniform appearance and behavior. This guide helps developers apply Canopy link styling consistently for all anchor elements, icons, and external links.

Core Features & Use Cases

  • Standardizes anchor tag styling and icon-enhanced links across teams.
  • Provides clear rules for external links, including accessibility indicators.
  • Includes guidance on removing Canopy link styles with the lg-unstyled-link mixin when needed.

Quick Start

Apply Canopy link styles by applying the standard link classes to anchor tags in your Angular templates.

Frequently Asked Questions about canopy-link

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

FAQPage Schema
How do I standardize anchor tag styling in Angular applications?▼

To standardize anchor tag styling in Angular applications, apply standard Canopy link classes to anchor elements in your templates. This ensures uniform appearance and behavior for plain links, icon-enhanced links, and external links across teams.

What is the best way to add accessibility indicators to external links in Angular?▼

Adding accessibility indicators to external links involves applying Canopy link styles, which provide clear usage rules and accessibility considerations for external anchor elements to ensure consistent behavior across Angular projects.

How do I remove Canopy link styles from an anchor element?▼

To remove Canopy link styles from an anchor element, use the lg-unstyled-link mixin. This allows you to opt out of standard styling when needed for specific custom components or project requirements.

Does Canopy link styling work with links that contain icons?▼

Yes, Canopy link styling works with icon-enhanced links across Angular applications. The guidance standardizes appearance and behavior for both plain anchor tags and links that include icons within component libraries.

Why do my Angular links look inconsistent across different component libraries?▼

Angular links look inconsistent when Canopy link styles are not uniformly applied across projects. Standardizing anchor tag styling with predefined link classes resolves non-uniform appearance and behavior issues across teams.

Related Skills

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

canopy-details

Guide Angular projects on implementing Canopy LGDetailsComponent with accessible collapsible sections.

Official
Intermediate
dodygdodyg

markdown-accessibility

Audit markdown files for WCAG accessibility violations with severity scores.

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

canopy-forms-checkbox

Implement Canopy checkbox components in Angular forms with best practices.

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

canopy-utils

Document and apply Canopy CSS utility classes in Angular templates.

Official
Basic