Wd 31301 card dev by Skazitron · Pull Request #5782 · canonical/vanilla-framework

Skazitron · 2026-03-27T03:36:59Z

Done

Implemented the Card pattern (.p-content-card).
Created a flexible Jinja macro (vf_card) supporting configurable elements: headings, images, author/date metadata, and a footer with Vanilla icons and status chips.
Built 3 responsive layout variants using a mobile-first SCSS approach:
- 2-column: Default vertical layout.
- 4-column: Horizontal layout (collapses to 2-col on small screens < 768px).
- 6-column: Expansive horizontal layout (collapses to 2-col on medium screens < 1024px).
Implemented a CSS pseudo-element overlay trick to make the entire card a clickable link while maintaining valid HTML (no nested <a> tags) and preserving the clickability of nested elements (like the author link).
Applied a CSS mask-image gradient to the footer to gracefully fade out overflowing chips/text.
Wrote comprehensive documentation and added embedded Jinja examples for all layout variations.

QA

Open demo
Check Layouts: Verify the 2-column, 4-column, and 6-column examples render correctly with and without images.
Check Responsiveness: Resize your browser window. Verify the 4-column card snaps to a vertical 2-column layout below 768px, and the 6-column card snaps to vertical below 1024px.
Check Links: - Click anywhere on the card's background or image to ensure it triggers the main heading link.
- Hover and click the Author name to ensure the nested link works independently of the main card link.
Check Overflow: Shrink the card width or add long text to the footer to verify the horizontal scroll and transparent fade-out mask work as expected.
Review updated documentation:
- docs/patterns/content-card/index.md (Check that the macro API table and examples are accurate).
Cross reference with figma doc

Fixes

https://warthogs.atlassian.net/browse/WD-31301

webteam-app · 2026-03-27T03:37:03Z

Demo

Jenkins

demos.haus

samhotep · 2026-03-27T14:45:55Z

scss/_patterns_content-card.scss

+    border: 1px solid var(--color-border-low-contrast, rgba(0, 0, 0, 0.1));
+    display: flex;
+    flex-direction: column;
+    height: 376px;


The values for height: and width: here, and elsewhere, should be set to variables, and should also be in rem

samhotep · 2026-03-27T14:47:57Z

scss/_patterns_content-card.scss

+        align-items: flex-start;
+        align-self: stretch;
+        flex-direction: row;
+        gap: 16px;


gap should also use rem, and probably a variable if it will be reused

mattea-turic · 2026-03-27T14:50:35Z

Thank youu @Skazitron !

General:
Heading

Could the heading pls not be linked, so it's just plain text H2
I realise the 2-col cards wouldn't work great on mobile – is it possible for these to occupy the full-width of the page, similar to our other patterns like the basic section
Similar to the above, if we apply a 4-col or a 2-col card to the tablet, which has 4-columns anyway – these will also resize to occupy 100% or 50% (respectively) of the screen, right?

Footer

Icon + Category: Could the icon and category be closer together? I understand that there is baked-in padding, so can we remove any other spacing/gutter aside from this?
Would it also be possible to see different icons, as center-alignment might look more balanced rather than baseline
I wonder if it's worth adding some space to the right of the container holding the tag and chip, so the elements can be pushed further to the left, avoiding the fade-out upon swiping to the end of the footer
More of a design question – @eliman11 dyt it would look nicer to have more spacing between the tag and chip? The 8 px I intended is a little claustrophobic

4-Column Card Without Image:
Heading

There seems to be excess bottom padding here

Could we see this as part of a mockup, so e.g. like in the Figma here:

Just to see how it would look in practice, especially important for the animation (here I mean the border, if not the desc.)or with varying content length – and for better understanding as to how it'll look on mobile and tablet

samhotep · 2026-03-27T14:58:22Z

scss/_patterns_content-card.scss

+        flex-direction: row;
+        gap: 16px;
+        height: 187.25px;
+        padding: 16px 16px 0;


should use default padding e.g $spv--large

samhotep · 2026-03-27T14:58:52Z

scss/_patterns_content-card.scss

+
+        &:not(.p-content-card__has-image) .p-content-card__hr {
+          margin-left: -16px;
+          margin-right: -16px;


should use default margin

should use default margin

@samhotep I've spoken to design about the rule element that it's being applied to and they seem to be okay with it.

@Skazitron I see, okay then maybe worth adding variables for these values

samhotep · 2026-03-27T15:03:47Z

templates/_macros/vf_card.jinja

+            {%- endif -%}
+        </div>
+        <div>
+            {%- if footer -%}


this should include the div on line 57

samhotep · 2026-03-27T15:05:13Z

scss/_patterns_content-card.scss

+      padding-bottom: var(--spacing-vertical-large, 16px);
+      width: 284px;
+
+      @media screen and (min-width: 768px) {


should use default breakpoint variables

eliman11 · 2026-03-27T16:59:26Z

Thanks @Skazitron! Noting that tooltips on hover and the description on hover are pending. Other than that -

Headings in the card are cropped unexpectedly. For example in the first screenshot it crops the top of the title, and in the second it shows the top of the next line

Headings shouldn't be links per design
At the moment scrolling to the end of the "footer" in the card still shows the white gradient on the right, giving the impression there is more content on the side when there isn't. Spoke to @mattea-turic about this, I think she had a solution in mind

Researched keyboard navigation a bit more and found we'll need to make the following changes:

The whole card should be clickable - pressing "Enter" should take you to the link
Instead of separating the various elements in the card, the tab order should be: 1) Focus lands on the card, 2) Focus lands on the author name, which should take you to the link and 3) focus moves completely out of the card and onto the next element on the page (could be the next card or the next title, etc)

Skazitron · 2026-03-30T10:44:53Z

@eliman11 Thanks for your suggestions. One thing to note: there is no way to make the footer clickable without losing scrollability due to limitations with HTML and CSS. I've implemented the other changes though.

eliman11 · 2026-03-30T15:05:53Z

Thanks @Skazitron! Not sure I understand - I've recorded this Loom to explain what I meant https://www.loom.com/share/c85d39673dcb4b48bc3a59b937f7941e

mattea-turic · 2026-03-31T12:10:38Z

Thank you @Skazitron ! Animation looks super cool :D

This is prob a dumb q, but say for tablet, would we be able to use the 4 col cards, or switch variants from e.g. 2 col card on desktop -> 4 col card on tablet, as tablet uses the 4 col grid

Just a quick question for the 4 col card here:

Is there a reason that "MLOps..." seems to wrap early? As there seems to be space following the previous word

Skazitron · 2026-03-31T12:56:10Z

Fixed the text wrap issue

As for turning the 2-col cards into 4 col cards we may able to do it but we'll have to hide the author and the title.

mattea-turic · 2026-04-01T11:33:37Z

Thanks @Skazitron for the quick changes!

Another question – when we specify e..g 2 col, 4 col, etc. – those are technically 25% and 50%, respectively (for tablet). But, when adjusting the window size, they remain a fixed width. Could you make sure they comply with our grid, so are responding to the containers there.

E.g. equal heights

Skazitron added 3 commits March 25, 2026 11:14

added 2 col card

9550b53

implemented all cards

7fde3ec

added responsiveness

9e06c72

Skazitron added the Feature 🎁 New feature or request label Mar 27, 2026

Skazitron added Review: Design needed Review: QA needed Review: Code needed Review: UX needed labels Mar 27, 2026

revert commit

8cfa65e

Skazitron force-pushed the WD-31301-card-dev branch from e50f9f7 to 8cfa65e Compare March 27, 2026 03:57

Skazitron and others added 6 commits March 27, 2026 06:59

Merge branch 'main' into WD-31301-card-dev

7981192

formatting changes

bf901fa

fix relases

3df0986

fix scss issues

2f7a0c7

parker update

07ca6da

refined margins

b38fe61

samhotep reviewed Mar 27, 2026

View reviewed changes

animation on hover + minor fixes

5965503

fix text-wrap issue

415e7b9

mattea-turic assigned mattea-turic and eliman11 Apr 1, 2026

Skazitron added 3 commits April 2, 2026 11:12

fix line-clamp artifacts + add animation on tab

c955de1

remove description tooltip

77d175b

minor height patch

b03ca58

Conversation

Skazitron commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Done

QA

Fixes

Uh oh!

webteam-app commented Mar 27, 2026

Uh oh!

samhotep Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mattea-turic commented Mar 27, 2026 • edited by Skazitron Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Skazitron Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eliman11 commented Mar 27, 2026 • edited by Skazitron Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Skazitron commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eliman11 commented Mar 30, 2026

Uh oh!

mattea-turic commented Mar 31, 2026

Uh oh!

Skazitron commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattea-turic commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Skazitron commented Mar 27, 2026 •

edited

Loading

samhotep Mar 27, 2026 •

edited

Loading

mattea-turic commented Mar 27, 2026 •

edited by Skazitron

Loading

Skazitron Mar 30, 2026 •

edited

Loading

eliman11 commented Mar 27, 2026 •

edited by Skazitron

Loading

Skazitron commented Mar 30, 2026 •

edited

Loading

Skazitron commented Mar 31, 2026 •

edited

Loading