Directory

← Back

Card

Cards for Vaadin Flow

Author

Rating

Popularity

1100+

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*/})
        )
);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • added proper material theme support
  • updated paper-ripple dependency
  • updated iron-collapse dependency
Released
2020-09-14
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 10+ in 0.6.1
Browser
Firefox
Opera
Safari
Google Chrome
Microsoft Edge

Card - Vaadin Add-on Directory

Cards for Vaadin Flow Card - Vaadin Add-on Directory
A Component that helps you to create Cards that can be found a lot in Applications that follow the [Matieral design guidelines](https://material.io/design/components/cards.html) 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!](https://github.com/appreciated/card/issues)
Online