Card component

General
1

I’ve been working on the Card component for a while now, and it feels like this could be pretty close to what we might want to ship eventually.

Screenshot 2024-12-05 at 15.14.54
Screenshot 2024-12-05 at 15.14.541792×1218 99.9 KB

I recorded a short video that demonstrates the web component, which goes over the current features (sorry for the low audio volume): card-prototype-demo.mov - Google Drive

I’m hoping to gather early feedback before you can actually use it for real in your projects, so feel free to comment on anything related to this: features, visuals, API, how you would envision the Flow or React API working, or something else that comes to mind.

A couple of features I still have on the table:

  • A slot where you can put a link or a button which is hidden but allows the card itself to act as a click target.
  • CSS container query that triggers the card layout from horizontal to vertical when there’s not enough space.
20 Likes
2

Looks awesome :raised_hands: Thank you @Jouni1 :100:

1 Like
3

Very nice!
I also liked the video demonstrating the versatility of it (very impressive by the way), but it’s a shame I couldn’t hear you over my laptop fans spinning, and I was not willing to put on my headphones.

4

Nice work! A card component is long overdue. People always start out thinking it’s going to be as simple as slapping a couple of class names on a div, but as you show, there’s more to it if you want something that’s nice looking and flexible.

2 Likes
5

Yes, this is one of the most awaited component and everytime we create ones by ourselves or copy from the forum

Instead of using different custom variants it is better to have one official component.

6

Looks stunning! This was what i needed some days before :D

7

Note: Jouni also needs feedback on potential API, your usages… missing things and so on :)

Now the your time to add things to the wish list

8

As far as I am concerned, I see it quite well, very different from starting from scratch.

Documenting it in the Docs would be ideal along with its css as it is being done with the other components.

hahaha Jouni’s components have been used for years, always improving…

9

If there is any easy provisions to set like this

image
image712×493 29.3 KB

and also something like this

image
image704×357 24.2 KB

that would be awesome

2 Likes
10

Yes, you can put cards in a CSS grid layout like that. But the Card component itself doesn’t give you that layout. The Card component is only the layout of a single card.

1 Like
11

Jouni great work.

Maybe adding the ability to change the scale on mouseover would be great?

12

and the next thing is Kanban board component :rofl:


var kanbanBoard = new KanbanBoard("my board", "backgroud-aurora-theme");
var kanbanColumn = new KanbanColumn("to do list");
var card = new Card("my task", "backgroud-photo-Snow-Reindeer");

kanbanColumn.addCard(card);
kanbanBoard.addColumn(kanbanColumn);
kanbanBoard.refresh();
2 Likes
13

We are making extensive use of “tiles” in our application, which is exactly what you are showing, but less fancy and with mimimum configuration options, so we would be so glad to adopt the official component. We use our tiles in combination with the board, so we overcome the space issue with the board folding. As for the additional feature to make the card act as a click target, we definitely upvote that.
Is it available in some prereleased version?
Could we have an example of how the component would be used in Flow?

14

The rudimentary version (just a simple container, no slots) is available in 24.6 behind a flag. The version with the slots which I show in the video is in code review. But that’s only the web component.

Could we have an example of how the component would be used in Flow?

The Flow API hasn’t been implemented yet. Follow this issue.

1 Like
15

This one can also be considered ( expandable cards ) Prism UI

16

Thanks, that looks great! I’m not sure how we should support that kind of a pattern. It’s a combination of Card and Details, but I’m not sure how those should be composed together.