Version:

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-card-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.card.Card;
import com.vaadin.flow.component.card.CardVariant;

Variants ​

No media ​

java
Card card = new Card();
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

No media horizontal ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.HORIZONTAL);
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

Cover media ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.COVER_MEDIA);
card.setMedia(new Image("/image.jpg", "Alt text"));
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

Cover media horizontal ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.COVER_MEDIA, CardVariant.HORIZONTAL);
card.setMedia(new Image("/image.jpg", "Alt text"));
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

Full ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.COVER_MEDIA);
card.setMedia(new Image("/image.jpg", "Alt text"));
card.setHeaderPrefix(new Image("/image.jpg", "Alt text"));
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));
card.add(new Div("Text content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."));
card.addToFooter(new Button("Button 1"), new Button("Button 2"), new Button("Button 3"));