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.
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.
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.
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.
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();
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?
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?
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.
Was there a reason to use --lumo-shade-5pct (default) and --lumo-tint-10pct (elevated) for the background instead of one of the corresponding --lumo-contrast colors? The cards look very good on the non-default background colors used in the example or the documentation.
But e.g. in dark mode the default card background is indistinguishable from the default (page) background. And it’s basically the same for an elevated card in light mode; although here at least there’s still the drop shadow to outline the shape of the card.
The current styles are somewhat a compromise between light and dark mode, since I wanted to avoid specifying different colors for the card variants between light and dark mode, e.g., for the elevated variant, use tint-90% in light mode but tint-10% in dark mode. I wouldn’t want to introduce custom properties for the variants (i.e., --vaadin-card-elevated-background), but that might make it possible.
The light and dark palettes in Lumo aren’t very well balanced between the light and dark modes, unfortunately. It’s precisely the elevated variant in light mode and the default variant in dark mode that end up suffering because of that.
And to answer why I didn’t use the --lumo-contrast colors: the elevated variant should appear above the surface it’s on, so it should be lighter, not darker. In light mode, --lumo-contrast results in a darker color, but in dark mode it results in a lighter color. The tint colors result in lighter color in both light and dark mode. And lastly, the shade colors result in darker color in both modes.
So for the elevated effect you are of course totally right. Brighter means more elevated/closer to the viewer, darker means further way. That’s just the expectation, regardless of whether in light or dark mode. And I found the corresponding hint in the documentation, that the effect works better on non-white backgrounds. So that’s good.
But it’s still unfortunate that for dark mode the shape of the default card look just isn’t visible on the default background. Personally I think it’d be worth considering to just use a contrast color here instead. That way the default look would just always work.
And if the goal was to create a slightly sunken/inset look, that might be better suited as a dedicated theme instead (as counterpart to the elevated theme, with the caveat that it’s not ideal on black backgrounds etc).
Thank you 
