AccessibleChartSummary

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AccessibleChartSummary
  eyebrow="eyebrow"
  title="title"
  description="description"
  href="href"
  actionLabel="Learn more"
/>

Legacy mount name: data-component="AccessibleChartSummary".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AccessibleChartSummary.wrn

component AccessibleChartSummary {
  props {
    eyebrow = ""
    title = ""
    description = ""
    href = ""
    actionLabel = "Learn more"
    image = ""
    alt = ""
    class = ""
  }
  view {
        <article class="wire-card wire-catalog-card {class}">
        <div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
        <div class="flex items-center gap-2 text-sm font-bold">
        <span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true">
        </span>Chart summary</div>
        <dl class="grid gap-3">
        <div class="flex items-center justify-between gap-4">
        <dt class="text-sm text-slate-500">Delivered</dt>
        <dd class="font-bold">96.8%</dd>
        </div>
        <div class="flex items-center justify-between gap-4">
        <dt class="text-sm text-slate-500">Engaged</dt>
        <dd class="font-bold">42.1%</dd>
        </div>
        <div class="flex items-center justify-between gap-4">
        <dt class="text-sm text-slate-500">Converted</dt>
        <dd class="font-bold">8.7%</dd>
        </div>
        </dl>
        </div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
    }
}