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
Name Type Default Required Bindable Description
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 snippet req 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 discriminated-union
target discriminated-union
rel discriminated-union
hreflang discriminated-union