Design · Cards

Cards

Cards organize a small set of related facts. Use a linked tile when the whole surface has one destination and a static tile when it only explains. Program tiles add a mono filename, a short source preview, and metadata. All copy and source below are illustrative; they are not loaded from compiler examples.

Variants

Linked, static, program

All three use .tile. Add .tile-static only when the card is not interactive. The program specimen demonstrates the shipping example-card anatomy, not live source metadata.

Linked

Current status

One destination makes the whole card a link. Keep the title and supporting claim brief.

Static

Compiler boundary

Use an article when the content is a fact, not a path. Static tiles do not receive keyboard focus.

project_identity.kina

An illustrative compiler-example summary. Real cards derive their preview and metadata from the checked-in source.

let project = fn(
  x: tensor<F32, [1, 4, 4], @host>
) -> tensor<F32, [1, 4, 4], @host> {
  x
}

Illustrative · 5 lines · MLIR golden label

Anatomy

Build from the content outward

.tile: The bordered, elevated surface. Render it as a link only when every part leads to the same destination.
.tile-title / .tile-name: Use the sans title for topics. Add the mono name role for filenames and other identifiers.
.tile-copy: One supporting claim in muted body text. Avoid turning a card into an article.
.tile-preview: A brief, wrapping code excerpt for uneven example collections. It is a preview, not the complete source.
.tile-meta: Compact provenance such as source line count and whether an MLIR golden exists.

Behavior

One surface, one interaction

Hover

Linked tiles shift their border toward Pelorous and add a quiet primary wash. They do not move or resize.

Focus

The linked surface receives the site-wide primary focus-visible outline. Preserve the native link in the tab order.

Static

Static tiles keep the resting border and background on hover. Do not add a fake button role or nested action.