Card in Vaadin

Hi guys,
How are you creating a Card ? Using pure CSS or created any custom component for it ? I’m trying to mimic the one available in a bootstrap site? Any recommendations ?

I am using the one from start.vaadin.com

I’ve implemented my own

Nvm, I just looked at the boostrap cards, they are different than my paper cards. They look simple though, shouldn’t be too hard to create a div and assign a background color and border to make it look similar

Should be doable with literally 2-3 Lumo utility classes

Card is trivial to compose with Div and H3 and some CSS. You can do it fully with Java as Knoobie says. It is overkill to import Bootstrap, jQuery and what not due that.

Let me try to find this how. The examples available for Bootstrap are very much catchy and pleasing so thought of mimicking the same in Vaadin

this is frm a bootstramp example
image.png

Here’s the reference documentation for Lumo Utility Classes https://vaadin.com/docs/latest/styling/lumo/utility-classes

For cards I’d probably go with something like a combo of Background.BASE, BoxShadow.MEDIUM, BorderRadius.LARGE

Yes this one worked. I added some padding css values as well and here is the code public static String[] cardStyles() { return new String[]{LumoUtility.Background.BASE,LumoUtility.BoxShadow.MEDIUM ,LumoUtility.BorderRadius.LARGE,LumoUtility.Padding.Horizontal.LARGE ,LumoUtility.Padding.Vertical.XLARGE}; }

image.png