NavTile
A way in to somewhere: the name of a place, a line about what is in it, and a colored icon square. One of a grid of them on a landing page.
Master
Walk the intents: each tile in a grid takes its own, so the color becomes part of how people find the place again. A tile is a link, not a choice; comparing options is Card.
Usage
Use NavTile for the doors on a landing page: a settings home, a reports home, the start of a job. It is one component: title names the place, description says in one line what is inside, icon and intent draw the 72px square, and href or onClick is where it goes. Give each tile in a grid its own intent so people learn the colors; intent takes the kit category colors, not a color of your own. Lay a set of them out with the .layout-metrics class from contracts/layout.json, never a grid of your own. It is a link, not a choice: if people are comparing options and picking one, that is a Card. See contracts/navtile.json for the full contract.
Do's
- A landing page of places to go, like a settings or reports home.
- A set of doors where the icon and its color help people find the same one again.
Don'ts
- Do not use it to compare or pick options; that is Card.
- Do not put buttons or fields inside it. The whole tile is one link.
- Do not give a grid of tiles one intent; give each its own so the colors mean something.
- Do not build a grid for them. Use .layout-metrics; read contracts/layout.json.
- Do not write a paragraph in description; one line, at most three.
- Do not use raw hex; pick an intent.
<NavTile title="Security & Users" description="Includes roles, sharing groups, approvals, authentication, and user management." icon="shield_person" intent="red" href="#" />