Docs

Docs

Card

Styling API reference for the Card components.

Style Variants

The Card component supports the following style variants:

Open in a
new tab
Card cardDefault = new Card();

Card cardOutlined = new Card();
cardOutlined.addThemeVariants(CardVariant.LUMO_OUTLINED);        

Card cardElevated = new Card();
cardElevated.addThemeVariants(CardVariant.LUMO_ELEVATED);

Horizontal

Place all card content on the side of the media element, if provided.

Open in a
new tab
Card card = new Card();
card.addThemeVariants(CardVariant.LUMO_HORIZONTAL);

card.setMedia(new Avatar("Lapland"));
card.setTitle(new Div("Lapland"));
card.setSubtitle(new Div("The Exotic North"));
card.add("Lapland is the northern-most region of Finland and an active outdoor destination.");

Stretch Media

Stretches the media element as wide – or tall, if combined with the horizontal variant – as the card, if the media element is an image, video, or an icon.

Open in a
new tab
// Card with stretched image
Card imageCard = new Card();
imageCard.addThemeVariants(CardVariant.LUMO_STRETCH_MEDIA);

StreamResource imageResource = new StreamResource("lapland.avif",
        () -> getClass().getResourceAsStream("/images/lapland.avif"));
Image image = new Image(imageResource, "");
imageCard.setMedia(image);

imageCard.setTitle(new Div("Lapland"));
imageCard.setSubtitle(new Div("The Exotic North"));
imageCard.add("Lapland is the northern-most region of Finland and an active outdoor destination.");

// Card with stretched icon
Card iconCard = new Card();
iconCard.addThemeVariants(CardVariant.LUMO_STRETCH_MEDIA);

Icon icon = LumoIcon.PHOTO.create();
icon.getStyle()
        .setColor("var(--lumo-primary-color)")
        .setBackgroundColor("var(--lumo-primary-color-10pct)");
iconCard.setMedia(icon);

iconCard.setTitle(new Div("Lapland"));
iconCard.setSubtitle(new Div("The Exotic North"));
iconCard.add("Lapland is the northern-most region of Finland and an active outdoor destination.");

Cover Media

Similar to the stretch-media variant, but this variant allows the media element to also cover the padding area of the card. This variant overrides the stretch-media variant.

Open in a
new tab
// Card with cover image
Card imageCard = new Card();
imageCard.addThemeVariants(CardVariant.LUMO_COVER_MEDIA);

StreamResource imageResource = new StreamResource("lapland.avif",
        () -> getClass().getResourceAsStream("/images/lapland.avif"));
Image image = new Image(imageResource, "");
imageCard.setMedia(image);

imageCard.setTitle(new Div("Lapland"));
imageCard.setSubtitle(new Div("The Exotic North"));
imageCard.add("Lapland is the northern-most region of Finland and an active outdoor destination.");

// Card with cover icon
Card iconCard = new Card();
iconCard.addThemeVariants(CardVariant.LUMO_COVER_MEDIA);

Icon icon = LumoIcon.PHOTO.create();
icon.getStyle()
        .setColor("var(--lumo-primary-color)")
        .setBackgroundColor("var(--lumo-primary-color-10pct)");
iconCard.setMedia(icon);

iconCard.setTitle(new Div("Lapland"));
iconCard.setSubtitle(new Div("The Exotic North"));
iconCard.add("Lapland is the northern-most region of Finland and an active outdoor destination.");

Combine Variants

You can combine all style variants together.

Open in a
new tab
Card card = new Card();
card.addThemeVariants(
        CardVariant.LUMO_OUTLINED,
        CardVariant.LUMO_ELEVATED,
        CardVariant.LUMO_HORIZONTAL,
        CardVariant.LUMO_COVER_MEDIA
);

StreamResource imageResource = new StreamResource("lapland.avif",
        () -> getClass().getResourceAsStream("/images/lapland.avif"));
Image image = new Image(imageResource, "");
image.setWidth("200px");
card.setMedia(image);

card.setTitle(new Div("Lapland"));
card.setSubtitle(new Div("The Exotic North"));
card.add(new Div("Lapland is the northern-most region of Finland and an active outdoor destination."));

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Common Properties

Feature Property Default Value

Background

--vaadin-card-background

--lumo-shade-5pct

Box Shadow

--vaadin-card-box-shadow

none

Border Width

--vaadin-card-border-width

0

Border Color

--vaadin-card-border-color

--lumo-contrast-20pct

Border Radius

--vaadin-card-border-radius

--lumo-border-radius-l

Padding

--vaadin-card-padding

--lumo-space-m

Gap

--vaadin-card-gap

--lumo-space-m

Media Aspect Ratio

--vaadin-card-media-aspect-ratio

16/9, when the stretch-media or cover-media style variant is used without the horizontal style variant.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-card

Parts

Media

vaadin-card::part(media)

Header

vaadin-card::part(header)

Content

vaadin-card::part(content)

Footer

vaadin-card::part(footer)

Title

vaadin-card [slot="title"]

Style Variants

Outlined

vaadin-card[theme~="outlined"]

Elevated

vaadin-card[theme~="elevated"]

Horizontal

vaadin-card[theme~="horizontal"]

Stretch Media

vaadin-card[theme~="stretch-media"]

Cover Media

vaadin-card[theme~="cover-media"]