Playground — canvakit.sh

Loaded from gallery: composed-dashboard

Template

.canvakit.html source

---
template: true
name: composed-dashboard
version: 1.0.0
description: A dashboard assembled from two reusable widget canvases (mrr-card + flights-card). Each import resolves its own dataSources and inherits the active DESIGN.md — flip the Theme picker in the playground to watch every card rethink its palette together.
author: canvakit
variables:
  title: "Q2 briefing"
imports:
  mrr:
    template: widgets/mrr-card.canvakit.html
    variables:
      period: "Q2 2026"
  flightsLHR:
    template: widgets/flights-card.canvakit.html
    variables:
      origin: LHR
      destination: JFK
  flightsCDG:
    template: widgets/flights-card.canvakit.html
    variables:
      origin: CDG
      destination: SFO
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <style>
      body {
        font-family: var(--font-body-md-family, ui-sans-serif, system-ui, sans-serif);
        padding: 3rem;
        max-width: 60rem;
        margin: 0 auto;
        background: var(--color-background, #ffffff);
        color: var(--color-ink, #111);
      }
      h1 {
        font-family: var(--font-h1-family, ui-sans-serif, system-ui, sans-serif);
        font-size: var(--font-h1-size, 2.75rem);
        font-weight: var(--font-h1-weight, 700);
        letter-spacing: -0.02em;
        margin: 0 0 0.25rem;
      }
      .lede {
        color: var(--color-ink-muted, #666);
        margin: 0 0 1.5rem;
      }
      .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
      .stamp { margin-top: 3rem; color: var(--color-ink-muted, #999); font-size: 0.85rem; }
    </style>
  </head>
  <body>
    <h1>{{title}}</h1>
    <p class="lede">Composed from reusable widget canvases — each card resolves its own tool in isolation and inherits the active DESIGN.md.</p>

<div class="grid">
      {{{imports.mrr}}}
      {{{imports.flightsLHR}}}
      {{{imports.flightsCDG}}}
    </div>

<p class="stamp">Last refreshed: {{$meta.renderedAt}}</p>

Context

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

Rendered body

live

Theme (designkit bridge):

Sources

per-source resolution report