Playground — canvakit.sh

Loaded from gallery: mrr-card

Template

.canvakit.html source

---
template: true
name: mrr-card
version: 1.0.0
description: Reusable MRR stat card — self-contained, binds to stripe.mrr. Reads designkit tokens so it retones with whatever DESIGN.md is active.
author: canvakit
variables:
  period: "this month"
dataSources:
  stripe:
    kind: tool
    ref: stripe.mrr
---
<div class="ck-card"
     style="
       padding: 1.25rem;
       background: var(--color-surface, #ffffff);
       color: var(--color-ink, #111);
       border: 1px solid var(--color-border, #e5e5e5);
       border-radius: 10px;
       font-family: var(--font-body-md-family, ui-sans-serif, system-ui, sans-serif);
     ">
  <p style="
       text-transform: uppercase;
       font-size: 0.7rem;
       letter-spacing: 0.08em;
       color: var(--color-ink-muted, #666);
       margin: 0;
     ">
    MRR — {{period}}
  </p>
  <p style="
       font-family: var(--font-h1-family, ui-sans-serif, system-ui, sans-serif);
       font-size: 2.25rem;
       font-weight: var(--font-h1-weight, 700);
       letter-spacing: -0.02em;
       color: var(--color-accent, #111);
       margin: 0.25rem 0;
     ">
    ${{stripe.amount}}
  </p>
  <p style="color: var(--color-accent-soft, #0a7d30); font-weight: 500; margin: 0;">
    +{{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