canonical / canonical/vanilla-framework

[Component amendment]: Equal heights pattern (additional options)

Open
#5,726 3 comments 1 reaction 0 assignees View on GitHub
Priority: Low Tier: Sites WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

[Equal heights pattern](https://vanillaframework.io/docs/patterns/equal-heights)

There are some aspects of equal height pattern that are requested in BAU tasks, but not possible in current pattern implementation.

For example:
- using links in headings of items (currently only `item.title_text` is supported)
- option to disable "cover" on images (currently we can only add highlight or change aspect ratio)

To achieve above features developer can use the [equal heights row component](https://vanillaframework.io/docs/patterns/equal-height-row) directly, but it is more cumbersome and prone to errors. If the above features are considered edge cases (not to be covered by the pattern), maybe at least we could update the pattern documentation, to mention the direct use of component in such cases. Ideally Figma designs provided for BAU tasks could make this distinction as well.

## Visual

Image

## Context

Web developer not being able to complete BAU task with Vanilla patterns.

Contributor guide

Open the contributing guide

Research direction

Start with the Equal heights pattern documentation and compare it with the linked equal-height row component. Determine whether linked headings and disabling image cover should be supported by the pattern; if not, document the direct component approach and clarify the distinction in the pattern guidance.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
design, documentation, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.