Data Display

GridListItem

Tile within a grid-list that combines an image, title, subtitle, meta, and action slots and may link via href.

import { GridListItem } from '@lostgradient/cinder/grid-list-item';
gridtile
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

Props for grid-list-item
Name Type Default Required Bindable Description
href discriminated-union
target discriminated-union
rel discriminated-union
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.