Context
We're migrating loewen-digital/sveltekit-ai-starter-template's design system onto @webtides/element-library (loewen-digital/sveltekit-ai-starter-template#4). Most of our bespoke components map onto an existing element (button → el-button, form fields → el-*-field, dialog → el-dialog, alert/toast → el-notification), but a couple have no equivalent yet.
Request
A themeable container/panel component — a bordered, elevated surface for grouping content (forms, settings sections, list items), with optional header and footer regions.
Suggested shape, modeled after the rest of the library's API (cf. dialog's slot layout):
- Element:
el-card (or el-panel)
- Slots: default (body),
header, footer
- Attribute:
padding (boolean, default true) to opt out of the default body padding
- Reads
--el-* tokens (--el-color-bg, --el-color-border, --el-radius-lg, --el-shadow-md) so it matches the rest of a themed page with no extra CSS
Workaround
Keeping our existing bespoke Card.svelte (Tailwind-styled <div>) in the template for now, marked // UPSTREAM: <this issue>.
Context
We're migrating loewen-digital/sveltekit-ai-starter-template's design system onto
@webtides/element-library(loewen-digital/sveltekit-ai-starter-template#4). Most of our bespoke components map onto an existing element (button →el-button, form fields →el-*-field, dialog →el-dialog, alert/toast →el-notification), but a couple have no equivalent yet.Request
A themeable container/panel component — a bordered, elevated surface for grouping content (forms, settings sections, list items), with optional header and footer regions.
Suggested shape, modeled after the rest of the library's API (cf.
dialog's slot layout):el-card(orel-panel)header,footerpadding(boolean, defaulttrue) to opt out of the default body padding--el-*tokens (--el-color-bg,--el-color-border,--el-radius-lg,--el-shadow-md) so it matches the rest of a themed page with no extra CSSWorkaround
Keeping our existing bespoke
Card.svelte(Tailwind-styled<div>) in the template for now, marked// UPSTREAM: <this issue>.