Skip to content
Paramanu v0.1.0-alpha.0

Data List

Data List renders term-detail pairs using semantic <dl>, <dt>, <dd> elements. Supports vertical and horizontal orientation with optional dividers.

Basic Usage

Name
John Doe
import { Datalist, DatalistItem, DatalistTerm, DatalistDetail } from "@paramanu/data-display-react"


export default function App() {
return (
  <Datalist>
    <DatalistItem>
      <DatalistTerm>Name</DatalistTerm>
      <DatalistDetail>John Doe</DatalistDetail>
    </DatalistItem>
  </Datalist>
)
}
<dl class="pm-datalist pm-datalist--vertical pm-datalist--md">
<div class="pm-datalist__item">
  <dt class="pm-datalist__term">Name</dt>
  <dd class="pm-datalist__detail">John Doe</dd>
</div>
</dl>