Playground — canvakit.sh

Loaded from gallery: mrr-card

Template

.canvakit.html source

---
template: true
name: mrr-card
version: 1.1.0
description: Reusable MRR stat card — self-contained, binds to stripe.mrr. Reads designkit tokens so it retones with whatever DESIGN.md is active. Uses Tailwind classes via the canvakit-designkit Tailwind bridge.
author: canvakit
variables:
  period: "this month"
sources:
  stripe:
    kind: tool
    ref: stripe.mrr
---
{{!--
  Tailwind utility classes resolve to designkit CSS vars via the
  `tailwindBridgeExtension` (see @canvakit/designkit). When the active
  DESIGN.md is changed, the canvas re-themes without touching this
  template. Tokens unavailable in the bridge's default theme map are
  reached via arbitrary-value syntax (`text-[var(--color-accent-soft)]`)
  or fall through to the var() fallback baked into the bridge config.
--}}
<div class="rounded-lg border border-border bg-surface text-ink font-body p-md">
  <p class="m-0 text-[0.7rem] uppercase tracking-[0.08em] text-ink-muted">
    MRR — {{period}}
  </p>
  <p class="my-1 text-[2.25rem] font-heading tracking-tight text-accent"
     style="font-weight: var(--font-h1-weight, 700);">
    ${{stripe.amount}}
  </p>
  <p class="m-0 font-medium text-[var(--color-accent-soft,#0a7d30)]">
    +{{stripe.delta}} MoM
  </p>
</div>

Context

JSON map of tool-ref → value (fixtures for kind: tool)

Rendered body

live

Theme (designkit bridge):

Sources

per-source resolution report