/// Cards
PrincipleTile
A numbered principle tile — a [ 0N ] bracket index over a title and a short supporting body, laid into principle grids.
import { PrincipleTile } from "@protocore/pds";Basics
A required index renders as [ 0N ] above the title and a short body (keep it under ~44 characters wide).
Build anything, transact from anywhere, and run infrastructure without asking for access.
Principle grid
The canonical 2×2 lay-up. Set bordered={false} so the grid's 1px gap supplies the shared hairline dividers instead of each tile drawing its own.
Run infrastructure without asking for access.
Deployed logic cannot be modified or rolled back.
Verification is spread across independent networks.
No party can block or reorder a sent message.
When to use it
Use PrincipleTile for a small, fixed set of *named principles or values* — the "Permissionless / Immutable / Decentralized / Censorship-Resistant" grid pattern. It is deliberately spare: an enumerator, a title, and a line of support, with no media slot and no link. If you need an illustration, use Tile; if you need a link-out and tags, use ProductCard; if you're presenting *metrics* rather than principles, use StatStrip or StatCard. PrincipleTile is text-only by design.
Usage
Do
- Number the tiles sequentially with `index` — the enumeration is the point.
- Keep bodies short (≤44ch) so a 2×2 grid stays visually even.
- Use `bordered={false}` inside a divider-drawing grid, `bordered` (default) when a tile stands alone.
- Keep the set small and stable — principles are a fixed list, not a feed.
Don't
- Don't add an art panel or link — reach for Tile / ProductCard if you need those.
- Don't let bodies run to paragraphs; a principle is a headline plus a line.
- Don't leave each tile bordered inside a gap-divided grid — you'll double the hairline.
- Don't use PrincipleTile for metrics; figures belong in StatStrip / StatCard.
Accessibility
- PrincipleTile is a static `<div>` with no interactive semantics; the `[ 0N ]` index is decorative enumeration.
- Wrap a principle grid in a list (`<ul>`/`<li>` or `role="list"`) so the count is announced as a set.
- Because the tile carries no color signal, it needs no color-contrast exception — meaning lives entirely in the title and body text.
PrincipleTile props
| Prop | Type | Default | Description |
|---|---|---|---|
bordered | boolean | true | Draw the tile's own hairline border (standalone). Set `false` inside a shared grid that already draws the dividers. Default `true`. |
children | ReactNode | — | Short supporting body (≤44ch). |
className | string | — | |
index * | number | — | The principle number, rendered as `[ 0N ]`. |
style | CSSProperties | — | |
title * | ReactNode | — | Principle title. |