Sitelet https://github.com/canonical/vanilla-framework/pull/5832
Skip to content

Card pattern title height - #5832

Merged
petesfrench merged 7 commits into
mainfrom
card-pattern-title-height
Aug 21, 2026
Merged

petesfrench merged 7 commits into
mainfrom
card-pattern-title-height

Conversation

@petesfrench

@petesfrench petesfrench commented Aug 19, 2026 •

Copy link
Copy Markdown
Contributor

Done

  • enforce equal height of title sections for cards on the same row

fly-by:

  • remove active links from examples
  • add more cards to examples to demo responsiveness
  • remove description about responsiveness (this can be assumed for all patterns)

QA

  • Open demo
  • See that the cards for '4-Column Card with Image Top' have equal height p-content-card__body sections despite differing lengths of hover text.
  • Using dev tools change the title length, description length - the body height should remain the same across both cards, based on the tallest content.

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

  • PR should have one of the following labels to automatically categorise it in release notes:
    • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
  • Vanilla version in package.json should be updated relative to the most recent release, following semver convention
    • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
    • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
    • see the wiki for more details
  • Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

Screenshots

[if relevant, include a screenshot or screen capture]

@webteam-app

Copy link
Copy Markdown

@petesfrench
petesfrench force-pushed the card-pattern-title-height branch from ca31fc8 to 50e7224 Compare August 19, 2026 08:11
Comment thread releases.yml

@Skazitron Skazitron left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your work on this @petesfrench. It looks alright except for a small issue.

For the 4 column card, the spacing between the description text and the rule doesn't look correct.

Let me know what you think.

Image

@petesfrench

Copy link
Copy Markdown
Contributor Author

@Skazitron

For the 4 column card, the spacing between the description text and the bottom border doesn't look correct.

This replicate the current behavior when the title takes less vertical space than the description:
image
image

@Skazitron

Copy link
Copy Markdown
Contributor

@mattea-turic what do you think?

@mattea-turic

Copy link
Copy Markdown

@Skazitron @petesfrench Hi! Referencing the 4-col card that doesn't use the image, would it be possible to use that same spacing? Right now, there seems to be too much space above the title, and too little below.

Screenshot 2026-08-20 at 9 15 20 AM Screenshot 2026-08-20 at 9 16 54 AM

@mattea-turic

Copy link
Copy Markdown

LGTM @petesfrench !

@petesfrench
petesfrench requested a review from Skazitron August 21, 2026 13:06
Comment thread tests/parker.js

@Skazitron Skazitron left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me for the most part. I've left a small comment about the threshold -- which needs to be updated.

@Skazitron Skazitron left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@petesfrench
petesfrench merged commit b83c558 into main Aug 21, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants