Card

Cards for Vaadin Flow

A Component that helps you to create Cards that can be found a lot in Applications that follow the Matieral design guidelines for Vaadin Flow. The cards fit by default the Lumo design since it relys on it's values.

By default there are 3 types of Cards:

• (Card) Cards that only display Content
• (ClickableCard) Cards that are Clickable
• (RippleClickableCard) Cards that are Clickable with a effect
• (StatefulCard) Cards that are Clickable and can be set to a visually selected state

Comes with some existing Components that are found a lot in the guidelines to help you creating cards faster.

• Title | a plain large title
• IconItem | a Image with Title / Title + Description beside it
• Item | Title / Title + Description
• ActionButton | borderless (or "tertiary") Button
• Actions( ActionButton ... ) | Component to list the Buttons
• StatefulCardGroup | Vertical Layout to fill with multiple StatefulCards that causes its children to behave similar to a Radio Button group

You need help, miss a feature or found a bug? Create an issue on Github!

Sample code

RippleClickableCard rcard = new RippleClickableCard(
        onClick -> {/* Handle Card click */},
        new TitleLabel("Example Title") // Follow up with more Components ...
);

ClickableCard ccard = new ClickableCard(
        onClick -> {/* Handle Card click */},
        new TitleLabel("Example Title") // Follow up with more Components ...
);

Card card = new Card(
        // if you don't want the title to wrap you can set the whitespace = nowrap
        new TitleLabel("Example Title").withWhiteSpaceNoWrap(),
        new PrimaryLabel("Some primary text"),
        new SecondaryLabel("Some secondary text"),
        new IconItem(getIcon(), "Icon Item title", "Icon Item description"),
        new Item("Item title", "Item description"),
        new Image("/frontend/bg.png", "bg.png"),
        new Actions(
                new ActionButton("Action 1", event -> {/* Handle Action*/}),
                new ActionButton("Action 2", event -> {/* Handle Action*/})
        )
);

Links

• Issue tracker
• Online Demo
• Source Code

Compatibility