Playground — canvakit.sh

Loaded from gallery: flights-card

Template

.canvakit.html source

---
template: true
name: flights-card
version: 1.0.0
description: Reusable flight-search result list — binds to searchFlights with configurable origin/destination. Reads designkit tokens so it retones with the active kit.
author: canvakit
variables:
  origin: LHR
  destination: JFK
dataSources:
  flights:
    kind: tool
    ref: searchFlights
    params:
      origin: "{{origin}}"
      destination: "{{destination}}"
---
<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 0 0.75rem;
     ">
    Flights {{origin}} → {{destination}}
  </p>
  <ul style="list-style: none; padding: 0; margin: 0;">
    {{#flights.flights}}
      <li style="
           display: flex;
           justify-content: space-between;
           padding: 0.375rem 0;
           border-bottom: 1px solid var(--color-border, #f2f2f2);
         ">
        <span>{{airline}}</span>
        <span style="
             font-variant-numeric: tabular-nums;
             color: var(--color-accent, #111);
             font-weight: 600;
           ">{{price}}</span>
      </li>
    {{/flights.flights}}
  </ul>
</div>

Context

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

Rendered body

live

Theme (designkit bridge):

Sources

per-source resolution report