hb-dashboard-card1 — dashboard-card1

Category: data | Tags: data, dashboard

What it does

Bulma card shell for dashboards: JSON header supplies optional Bootstrap Icon name, title label, and right-aligned tag; JSON body can remove inner padding with noborder. Slots let you inject markup (header_content, content). Bootstrap Icons are loaded from the CDN in svelte:head for bi classes on the optional header icon.

Custom element

hb-dashboard-card1

Attributes / props (snake_case)

| Property | Type | Notes | | --- | --- | --- | | id | string (optional) | Element identifier. | | style | string (optional) | Inline style string. | | header | object (optional) | JSON { icon?: string; label: string; badge?: string }. | | body | object (optional) | JSON { noborder?: boolean }. |

Bulma --bulma-* theme vars (see extra/docs.ts). Parts: text_placeholder, badge, card. Slots: header_content, content.

Events (CustomEvent names)

None declared in types (Events is an empty object).

Styling (Bulma)

The component uses Bulma card, card-header, card-header-title, card-content, and tag. Theme defaults are applied on :host via Bulma’s light theme and setup-theme. Override card look with public --bulma-* properties (for example --bulma-card-background-color, --bulma-card-shadow, --bulma-card-header-color). Bootstrap Icons remain a separate stylesheet for header.icon.

Usage notes

• header.icon should be a bootstrap-icons icon name string (without the bi- prefix).
• Use ::part(card) and related parts for host-level theming inside shadow root.
• No i18n in docs.ts.

Minimal HTML example

<hb-dashboard-card1
  header='{"label":"Revenue","icon":"graph-up","badge":"+12%"}'
  body='{"noborder":false}'
></hb-dashboard-card1>