search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
457 stars 83 forks source link

Card component #5340

Open tarekoraby opened 1 year ago

tarekoraby commented 1 year ago

Describe your motivation

There is no easy way to create a card component similar to other UI libraries (e.g., MUI card).

Describe the solution you'd like

Add a generic card component that contains content and actions about a single subject.

lkraav commented 1 year ago

Yep, we had to create our own: a collapsible card-element by extending AccordionPanel, and also a pure Lit card for "always on" summary display.

Source: https://github.com/conversionxl/aybolit/blob/master/packages/cxl-ui/src/components/cxl-accordion-card.js Demo: https://conversionxl.github.io/aybolit/?path=/story/cxl-ui-cxl-vaadin-accordion--cxl-vaadin-accordion-theme-archive

Source: https://github.com/conversionxl/aybolit/blob/master/packages/cxl-ui/src/components/cxl-card.js Demo: https://conversionxl.github.io/aybolit/?path=/story/cxl-ui-cxl-tabs-slider--cxl-tabs-slider (in a slider built on Tabs)

web-padawan commented 1 year ago

Related: #224 which is supposed to be used as a primitive for creating a card component, among others.

yuriy-fix commented 2 days ago

Scope:

Simple (can be released under feature flag):

Some inspiration: