Data Display

StackedListItem

Dense list row with leading, title, description, meta, and trailing slots that may optionally render as an anchor.

import { StackedListItem } from '@lostgradient/cinder/stacked-list-item';
listrow
01

Overview

Single row within a stacked list, typically pairing a label with metadata or an action.

Usage

svelte 
<script lang="ts">
  import { DataList } from '@lostgradient/cinder/data-list';
  import { StackedListItem } from '@lostgradient/cinder/stacked-list-item';

  const members = [{ id: 'alice', name: 'Alice Chen', role: 'Engineer' }];
</script>

<DataList items={members} key={(member) => member.id}>
  {#snippet children(member)}
    <StackedListItem>
      {#snippet title()}{member.name}{/snippet}
      {#snippet meta()}{member.role}{/snippet}
    </StackedListItem>
  {/snippet}
</DataList>
Live preview
02

When to use

Use when
  • Listing entities vertically with consistent leading icons or avatars and trailing actions.
  • Linking each row to a detail view by passing href.
Avoid when
  • Comparing tabular data across columns — use table instead.
  • Rendering cards in a responsive grid — use grid-list instead.
03

Examples

Basic row

A minimal StackedListItem with the required `title` snippet and a `meta` snippet, mounted inside the DataList container it is designed to compose with.

With description and leading icon

A richer row pairing a `leading` visual (here a StatusDot) with a `title` and a secondary `description` snippet below it.

04

Props

Props for stacked-list-item
NameTypeDefaultDescription
density 'comfortable' | 'condensed' Density token surfaced as data-cinder-density. When omitted, inherits the enclosing DataList's list-level density (if any), then falls back to comfortable. An explicit value here always overrides the list default.
leading snippet Leading visual (avatar, icon, status dot).
title required snippet Primary label. Required.
description snippet Secondary description below the title.
meta snippet Tertiary metadata (timestamp, badge, system label).
trailing snippet Trailing region (chevron, action button, dropdown trigger).
href text Destination URL that turns the title snippet into an <a> link for the row.
target HTMLAnchorAttributes['target'] Browsing context for the title anchor (_blank, _self, _parent, _top, or a named frame).
rel HTMLAnchorAttributes['rel'] rel attribute forwarded to the title anchor; noopener noreferrer is merged automatically when target="_blank".
hreflang HTMLAnchorAttributes['hreflang'] hreflang attribute forwarded to the title anchor, indicating the language of the linked resource.