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

canopy-hero-img

Standardize lg-hero-img component usage in Angular projects with imageUrl and overlap inputs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy Hero Image usage can be inconsistent across projects. This guide provides clear patterns to implement the lg-hero-img component consistently, including card overlays and image-led hero sections.

Core Features & Use Cases

  • Standardized usage of LgHeroImgComponent with imageUrl and overlap configurations.
  • Guidance on composing hero sections with LgHeroImgCard and related components.
  • Example scenarios for banner overlays, responsive layouts, and accessible headings.

Quick Start

Apply the canonical patterns for using the lg-hero-img component in your Angular project to create consistent hero sections with overlay cards.

Frequently Asked Questions about canopy-hero-img

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

FAQPage Schema
How do I implement a hero image banner in an Angular application?▼

Implement an Angular hero image banner using the lg-hero-img component with the imageUrl input, applying standardized patterns for responsive layouts and accessible headings.

What is the best way to overlay a card on a hero image in Angular?▼

Overlay a card on a hero image by composing the LgHeroImgCard component with the lg-hero-img element, using overlap configurations to ensure accessible, visually consistent layouts.

Can I configure hero image sections to overlap with other content?▼

Yes, you can configure hero image sections to overlap with other content by setting the overlap input on the lg-hero-img component for consistent UI patterns.

What guidelines exist for responsive hero image layouts in Canopy Angular apps?▼

Responsive hero image layout guidelines in Canopy Angular apps cover grid constraints, accessible heading structures, and input configurations to ensure consistent image-led section quality.

When should I avoid using a hero image component for layout?▼

Avoid using the hero image component when your layout requirements fall outside of banner overlays or image-led sections, as implementation constraints are specifically tailored for those UI patterns.

Related Skills

Explore More Software Engineering Skills→
BaoNguyen09BaoNguyen09
6

install-mac

Install Node.js and project dependencies on macOS for development.

Community
Intermediate
effiemincereffiemincer

adapt

Adapt user interfaces across mobile, tablet, and desktop contexts.

Community
Intermediate
manutejmanutej
61

responsive-design

Generate mobile-first responsive layouts with fluid grids and media queries.

Community
Basic
Legal-and-GeneralLegal-and-General
23

canopy-hero

Guides engineers to implement Canopy Hero sections with breadcrumbs and responsive layouts in Angular projects.

Official
Intermediate