components grid

components/grid

Import: import { Grid, GridCol } from "@tundralibs/ui/grid"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Grid

Grid(props: GridProps): Html

GridCol

GridCol(props: { span?: GridColSpan; content: Html; attrs?: Attrs }): Html

Wraps content with a col-N span for direct placement inside a Grid.

Types

GridColSpan

• "1"
• "2"
• "3"
• "4"
• "5"
• "6"
• "7"
• "8"
• "9"
• "10"
• "11"
• "12"

GridProps

Prop	Type	Required	Description
items	Html[]	yes
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Three stat tiles in a row

12 columns; every column collapses to full width below md.

Grid({
  items: [
    GridCol({ span: 4, content: Stat({ label: "Revenue", value: "$48,200" }) }),
    GridCol({ span: 4, content: Stat({ label: "Open", value: "12" }) }),
    GridCol({ span: 4, content: Stat({ label: "Overdue", value: "3", tone: "danger" }) }),
  ],
})

<div class="grid">
  <div class="col-4">
    <div class="stat">
      <span class="stat__label">Revenue</span>
      <span class="stat__value">$48,200</span>
    </div>
  </div>
  <div class="col-4">
    <div class="stat">
      <span class="stat__label">Open</span>
      <span class="stat__value">12</span>
    </div>
  </div>
  <div class="col-4">
    <div class="stat stat--danger">
      <span class="stat__label">Overdue</span>
      <span class="stat__value">3</span>
    </div>
  </div>
</div>

CSS hooks

Classes defined by components/grid/grid.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .grid