DescriptionList
Presents record details as semantic term-and-description pairs in a responsive grid.
Default
A semantic definition list arranged as a responsive grid.
- Customer
- Acme Corporation
- Account number
- AC-004821
- Tax registration
- GB 123 4567 89
- Status
- Active
- Billing address
- 18 Market Street, London, EC1A 4HD
tsx
<DescriptionList items={items} columns={2} />Installation
tsx
import { DescriptionList } from "madagent";Columns and spans
Choose one to three columns; individual items can span two tracks.
- Customer
- Acme Corporation
- Account number
- AC-004821
- Tax registration
- GB 123 4567 89
- Status
- Active
- Billing address
- 18 Market Street, London, EC1A 4HD
tsx
<DescriptionList items={items} columns={3} />Inline layout
Inline layout places each term and description on one row.
- Customer
- Acme Corporation
- Account number
- AC-004821
- Tax registration
- GB 123 4567 89
- Status
- Active
- Billing address
- 18 Market Street, London, EC1A 4HD
tsx
<DescriptionList items={items} columns={1} layout="inline" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | DescriptionListItem[] | - | Term, description, and optional span entries |
columns | 123 | 2 | Responsive grid column count |
layout | "stacked""inline" | "stacked" | Term and description arrangement |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
- العميل
- شركة أكمي
- رقم الحساب
- AC-004821
- الحالة
- نشط
- عنوان الفوترة
- ١٨ شارع السوق، القاهرة
Usage
tsx
<DescriptionList items={[
{ term: "العميل", description: "شركة أكمي" },
{ term: "رقم الحساب", description: "AC-004821" },
]} />