Hairline grid
Cells separated by 1px hairlines, for features, cards, models, posts and research. Each child is one cell; FeatureCard fills one with an icon or a figure, a title, a line of text and a last line of metadata, and can lead on as a link.
Examples
Maps a field
Gathers a field's papers through their citations and records what each claims, with the passage it comes from.
Judges a direction
Tests a direction for novelty, feasibility and fit, each judgment a separate step with its evidence on file.
Plans submissions
Places committed work at venues whose deadlines it can meet, with a fallback if a paper is rejected.
Keeps the record
Logs every decision with the evidence it rested on and who made it, so it can be checked later.
Maps a field
Gathers a field's papers through their citations and records what each claims, with the passage it comes from.
Judges a direction
Tests a direction for novelty, feasibility and fit, each judgment a separate step with its evidence on file.
Props
HairlineGrid
Cells separated by 1px hairlines, the marketing family's grid for features, cards, models, posts and research. Each direct child is one cell: pass the cards themselves (or an array of them), not one component that renders several.
| Prop | Type | Default | Description |
|---|---|---|---|
columns? | 2 | 3 | 4 | 3 | The most columns, reached at 64rem of the grid's own width: two from 40rem, one below. |
as? | "div" | "ul" | "ul" | A list when the cells are items of one kind (models, posts, features), a div otherwise. |
bleed? | boolean | false | Run to the framed column's rules, so the outer hairlines are the column's own, and the bottom one is the next section's rule. For a grid that ends a section whose bottom is flush (FeatureSection's flushEnd). |
label? | string | — | Names the list for screen readers, when the heading above does not. |
children | ReactNode | — |
FeatureCard
One cell of a HairlineGrid: an icon or a figure, a title, a line of text.
| Prop | Type | Default | Description |
|---|---|---|---|
icon? | IconName | — | An icon above the title, for a feature. |
media? | ReactNode | — | A figure above the title, for a model, a post or a programme. |
overline? | ReactNode | — | A short label above the title. |
title | ReactNode | — | |
level? | 3 | 4 | 3 | The title's level in the page's outline. |
children? | ReactNode | — | A sentence or two under the title. |
meta? | ReactNode | — | A last line: a date, a status, a licence. |
href? | string | — | Where the card leads; the whole card is then the link. |
linkAs? | ElementType | "a" | The component that renders the anchor, for a framework's client-side link (Next.js's `Link`, say). The system itself knows no router. |
Keyboard
| Key | Does |
|---|---|
| Tab | Moves between cards that are links |
Accessibility
- A list by default, so a screen reader announces how many items it holds; label it when no heading names it.
- Each cell's hairline is its outline, drawn into the 1px gap where it meets its neighbour's. A short last row stays open instead of filling with border colour.
- A card that leads on is one anchor named by its words; its focus ring is drawn inside the cell, so it never covers a neighbour.
- Columns follow the grid's own width: one, two from 40rem, and up to four from 64rem.