# PrincipleTile - **Category:** Cards (`cards`) - **Slug:** `cards/principle-tile` - **Status:** stable - **Platforms:** web - **Import:** `import { PrincipleTile } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/cards/principle-tile > A numbered principle tile — a [ 0N ] bracket index over a title and a short supporting body, laid into principle grids. ## 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. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `bordered` | `boolean` | no | `true` | Draw the tile's own hairline border (standalone). Set `false` inside a shared grid that already draws the dividers. Default `true`. | | `children` | `ReactNode` | no | — | Short supporting body (≤44ch). | | `className` | `string` | no | — | — | | `index` | `number` | yes | — | The principle number, rendered as `[ 0N ]`. | | `style` | `CSSProperties` | no | — | — | | `title` | `ReactNode` | yes | — | Principle title. | ## Examples ### Basics A required `index` renders as `[ 0N ]` above the `title` and a short body (keep it under ~44 characters wide). ```tsx import { PrincipleTile } from "@protocore/pds"; export default function PrincipleTileBasics() { return (
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. ```tsx import { PrincipleTile } from "@protocore/pds"; const principles = [ { title: "Permissionless", body: "Run infrastructure without asking for access." }, { title: "Immutable", body: "Deployed logic cannot be modified or rolled back." }, { title: "Decentralized", body: "Verification is spread across independent networks." }, { title: "Censorship-Resistant", body: "No party can block or reorder a sent message." }, ]; export default function PrincipleTileGrid() { return (
{principles.map((p, i) => ( {p.body} ))}
); } ``` ## 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 **Notes** - PrincipleTile is a static `
` with no interactive semantics; the `[ 0N ]` index is decorative enumeration. - Wrap a principle grid in a list (`