On This Page
Introduction
A card is a component with several placeholders, which arranges them in order to build a card:
The way to declare it is as follows:
- Fluent
- Declarative
Card.builder()
.title(new Text("Cover media"))
.subtitle(new Text("Subtitle"))
.content(new Text("Some content, bla, bla, bla"))
.media(new Image("https://picsum.photos/seed/picsum/200/300"))
.variants(List.of(CardVariant.coverMedia))
.build()
copy
@Title("Title")
@Subtitle("Subtitle")
@Media(image="https://picsum.photos/seed/picsum/200/300")
@Variants({
CardVariant.coverMedia
})
class MyCard implements Card {
@RawContent
String content = "Some content, bla, bla, bla";
}
copyor
@Variants({
CardVariant.coverMedia
})
class MyCard implements Card {
@Title
Text title = new Text("Title");
@Subtitle
Text subtitle = new Text("Subtitle");
@Media
String image = "https://picsum.photos/seed/picsum/200/300";
@RawContent
String content = "Some content, bla, bla, bla";
}
copyAvailable properties
This is the list of available properties for a card:
| Property | Description | Notes |
|---|---|---|
| id | id for this component | |
| cssClasses | list of css classes | content of the css attribute |
| style | inline style attributes | content of the style attribute |
| title | content to be placed in the title slot | |
| subtitle | content to be placed in the subtitle slot | |
| media | content to be placed in the media slot | |
| header | content to be placed in the header slot | |
| headerPrefix | content to be placed in the header prefix slot | |
| headerSuffix | content to be placed in the header suffix slot | |
| content | content to be placed in the card | |
| footer | content to be placed in the footer slot |
This is the list of available variants for a card:
| Property | Description | Notes |
|---|---|---|
| outlined | draws a border around the card | |
| elevated | draws a shadow around the card | |
| horizontal | puts the media on the left | |
| stretchMedia | adjusts the media size | |
| coverMedia | the media fits the border of the card |
You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/card