Data Display
Descriptions
A key-and-value definition list rendered as a dl. Compose Descriptions with DescriptionsItem children, and choose one to three columns, a horizontal or vertical layout, and a bordered grid.
ReactVueWeb Components
View in Storybook Playground
Examples
<Descriptions columns={2} bordered>
<DescriptionsItem term="Version">1.0.0</DescriptionsItem>
<DescriptionsItem term="Author">Lily UI</DescriptionsItem>
</Descriptions>Props
| Name | Type | Default | Description |
|---|---|---|---|
columns | DescriptionsColumns | 1 | Number of columns (pairs per row). @default 1 |
layout | DescriptionsLayout | horizontal | Layout direction. @default 'horizontal' |
bordered | boolean | false | Show a bordered grid. @default false |
children required | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.