Playground — canvakit.sh

Loaded from gallery: pricing-table

Template

.canvakit.html source

---
template: true
name: pricing-table
version: 1.0.0
description: Pricing page rendered from a CSV — shows how kind query parses csv into { columns, rows } and templates iterate uniformly.
author: canvakit
variables:
  title: "Plans"
  tagline: "Simple pricing, no surprises."
dataSources:
  plans:
    kind: file
    path: "data/plans.csv"
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <style>
      body { font-family: ui-sans-serif, system-ui, sans-serif; padding: 3rem; max-width: 60rem; margin: 0 auto; background: #fff; color: #111; }
      header { text-align: center; margin-bottom: 2.5rem; }
      h1 { font-size: 2.5rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
      .tagline { color: #666; }
      table { width: 100%; border-collapse: collapse; }
      th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; }
      th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
      tbody tr:hover { background: #fafafa; }
      .price { font-weight: 600; font-variant-numeric: tabular-nums; }
    </style>
  </head>
  <body>
    <header>
      <h1>{{title}}</h1>
      <p class="tagline">{{tagline}}</p>
    </header>

<table>
      <thead>
        <tr>
          {{#plans.columns}}<th>{{.}}</th>{{/plans.columns}}
        </tr>
      </thead>
      <tbody>
        {{#plans.rows}}
          <tr>
            <td>{{plan}}</td>
            <td class="price">{{price}}</td>
            <td>{{seats}}</td>
            <td>{{includes}}</td>
          </tr>
        {{/plans.rows}}
      </tbody>
    </table>
  </body>
</html>

Context

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

Rendered body

live

Theme (designkit bridge):

Sources

per-source resolution report