#Descriptions

Display key-value pairs in a structured, labeled format.

#When to Use

• For detail pages showing entity attributes
• To display read-only form data
• For profile information or order summaries

#Import

import { Descriptions } from "orizon";

#Examples

#Basic

<Descriptions
  title="User Info"
  items={[
    { key: "1", label: "Name", children: "John Brown" },
    { key: "2", label: "Phone", children: "1810000000" },
    { key: "3", label: "Address", children: "New York, USA" },
  ]}
/>

#Bordered

<Descriptions bordered title="Order Details" items={items} />

#Vertical Layout

<Descriptions layout="vertical" items={items} />

#API

#DescriptionsProps

• items — DescriptionsItem[] — Description item data
• title — ReactNode — Title above the descriptions
• extra — ReactNode — Extra content in header
• bordered — boolean — Show borders (default: false)
• column — number | ResponsiveObject — Items per row (default: 3)
• layout — "horizontal" | "vertical" — Label layout (default: "horizontal")
• size — "default" | "middle" | "small" — Size (default: "default")
• colon — boolean — Show colon after label (default: true)
• labelStyle — CSSProperties — Label styles
• contentStyle — CSSProperties — Content styles

#DescriptionsItem

• key — string — Unique identifier
• label — ReactNode — Item label
• children — ReactNode — Item content
• span — number — Columns this item spans (default: 1)
• labelStyle — CSSProperties — Override label styles
• contentStyle — CSSProperties — Override content styles