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; @Route @CssImport(value = "./styles/cards.css") public class MainView extends VerticalLayout { @Autowired private Datastore datastore; private PropertyListing listing; @PostConstruct public void init() { setSizeFull(); listing = Components.listing.properties(Product.PRODUCT) .dataSource(datastore, Product.TARGET) .build(); add(addToCard("Form", Components.input .form(Product.PRODUCT) .build().getComponent())); 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)); container.add(component); container.setClassName("container"); card.add(container); card.setClassName("card"); card.setWidthFull(); 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.