web-components icon indicating copy to clipboard operation
web-components copied to clipboard

Published 20 hours ago • verified publisher icon vaadin

Card component

Open tarekoraby opened this issue 2 years ago • 3 comments

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.

tarekoraby avatar Jan 20 '23 07:01 tarekoraby

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)

lkraav avatar Jan 20 '23 08:01 lkraav

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

web-padawan avatar Jan 20 '23 08:01 web-padawan

Scope:

Simple (can be released under feature flag):

  • [ ] Card styling (shadows, border, indentations etc.)
  • [ ] Default slot for everything

Complex (further iterations under feature flag):

  • [ ] Title
  • [ ] Image slot (theme variants: above | below title)
  • [ ] Content slot
  • [ ] a11y semantics (proper role, title)

Some inspiration:

  • https://m3.material.io/components/cards/guidelines

yuriy-fix avatar Oct 17 '24 08:10 yuriy-fix