Using cards in Vaadin

Yes, I know it is difficult to write CSS styles for a java programmer. All, he can do is, google and copy some styles that fits for him. So, I did the same. Here is the css file for cards.

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;

And, how to use this in Java …

import com.holonplatform.core.datastore.Datastore;
import com.holonplatform.vaadin.flow.components.Components;
import com.holonplatform.vaadin.flow.components.Input;
import com.holonplatform.vaadin.flow.components.PropertyListing;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Emphasis;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import org.springframework.beans.factory.annotation.Autowired;

import javax.annotation.PostConstruct;

@CssImport(value = "./styles/cards.css")

public class MainView extends VerticalLayout {

    private Datastore datastore;

    private PropertyListing listing;

    public void init() {

        listing =
                .dataSource(datastore, Product.TARGET)

        add(addToCard("Form", Components.input

        add(addToCard("Grid", listing.getComponent()));


    private Div addToCard(String text, Component component) {

        Div card = new Div();
        Div container = new Div();

        Emphasis emphasis = new Emphasis(text);
        container.add(new H4(emphasis));


        return card;


There are several card types available but achieving all from Java is not only super complex but also needs time & patience. So, I wish Vaadin makes some cards components in the future.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.