Cards
To create cards you can use any Vaadin Layout, add one (or more) of the listed styles from the bottom, and then add the components the card is supposed to contain. Make sure it has enough margin (in Vaadin instead padding) to present the card shadow.
Cards have by default a padding if you don't want this you can add an additional style to the elevation style, which will remove the padding (see CARD_NO_PADDING at the bottom).
Adding the style "ripple" will result in having the typical material "dripping" effect when clicking on the card.
HorizontalLayout layout = new HorizontalLayout();
layout.addStyleName(MaterialTheme.CARD_1);
layout.addComponent(new Label("I contain text"));
| Description | Java Constant | Stylename |
|---|---|---|
| Card with no Elevation | CARD_0 | "card-0" |
| Card with a 0.5 Elevation | CARD_0_5 | "card-0-5" |
| Card with a 1 Elevation | CARD_1 | "card-1" |
| Card with a 1.5 Elevation | CARD_1_5 | "card-1-5" |
| Card with a 2 Elevation | CARD_2 | "card-2" |
| Card with a 3 Elevation | CARD_3 | "card-3" |
| Card with a 4 Elevation | CARD_4 | "card-4" |
| Card with a 5 Elevation | CARD_5 | "card-5" |
| Card with a varying Elevation level on hovering * | CARD_HOVERABLE | "card-hoverable" |
| Card with a ripple effect (Can be combined with any other style) | RIPPLE | "ripple" |
- Note: on mobile devices instead of :hover, :active will cause the change in elevation
| Description | Java Constant | Stylename |
|---|---|---|
| Card without default Padding (Can be combined with any other card-* style) | CARD_NO_PADDING | "card-no-padding" |