01
Overview
Keyboard-navigable cell within a grid-list layout for selectable item grids.
Usage
GridListItem is a compose-only leaf of GridList.
The idiomatic API is GridList.Item, reached through the parent
namespace — see the grid-list README for the composed
snippet. The flat @lostgradient/cinder/grid-list-item subpath remains exported for
à-la-carte builds that import the leaf directly.
02
When to use
Use when
- Rendering a single card cell inside a grid-list parent.
- Turning the tile into an anchor by passing href.
Avoid when
- Standing alone outside a grid-list — it inherits the grid layout context.
03
Props
Name | Type | Default | Description |
|---|---|---|---|
href | text | Destination URL. When set, the title snippet is rendered as a stretched <a> anchor covering the entire tile. | |
target | HTMLAnchorAttributes['target'] | When target matches "_blank" (case-insensitive), the component
automatically composes rel="noopener noreferrer" with any
consumer-supplied rel tokens to prevent reverse-tabnapping. | |
rel | HTMLAnchorAttributes['rel'] | rel attribute forwarded to the stretched-link anchor; noopener noreferrer is merged automatically when target="_blank". | |
image | snippet | Optional image region (avatar, thumbnail). | |
title | snippet | Primary label. Provides the accessible name for the stretched link when href is set. | |
subtitle | snippet | Secondary description. | |
meta | snippet | Tertiary metadata (badges, supplementary text). | |
actions | snippet | Action buttons. This wrapper is lifted above the stretched-link overlay
via position: relative; z-index: 1 so buttons remain clickable. |