DataListItem

A structured list row with media, supporting text, metadata and actions.

Preview

Design system
Foundations and reusable components
Updated today

Use DataListItem

DataListItem is a named export of @flood-md/react. Connect the package once, then import what you use.

PackageProject UI

"use client";

import { FloodRoot, DataList, DataListItem } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DataList>
        <DataListItem title="Design system" description="Foundations and components" metadata="Updated today" />
      </DataList>
    </FloodRoot>
  );
}

Design notes

Render inside DataList or another native list.
The row is not clickable; supply a Link as title when navigation is needed.

API reference

Prop	Values	Default
`title`	ReactNode	Required
`description`	ReactNode	—
`media`	ReactNode	—
`metadata`	ReactNode	—
`actions`	ReactNode	—
`Native HTML props`	Omit<HTMLAttributes<HTMLLIElement>, "title" \| "children">	Forwarded

View TypeScript source

Page Markdown Agent skill