WorkflowCanvasPreview

Usage

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

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

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

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/WorkflowCanvasPreview.wrn

component WorkflowCanvasPreview {
  props {
    eyebrow = ""
    title = ""
    description = ""
    href = ""
    actionLabel = "Learn more"
    image = ""
    alt = ""
    class = ""
  }
  view {
        <article class="wire-card wire-catalog-card {class}">
      {#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60">
        <div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900">
        <span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true">
        </span>
        <strong class="text-sm">Event received</strong>
        <span class="text-xs text-slate-500">Order shipped</span>
        </div>
        <span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true">
        </span>
        <div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3">
        <span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true">
        </span>
        <strong class="text-sm">Smart route</strong>
        <span class="text-xs text-slate-500">Consent + availability</span>
        </div>
        <span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300">
        <span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true">
        </span>Delivered</span>
        </div>{/if}
      {#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>
    }
}