ant-design/components/descriptions/index.en-US.md

---
category: Components
type: Data Display
title: Descriptions
cols: 1
---

Display multiple read-only fields in groups.

## When To Use

Commonly displayed on the details page.

## API

### Descriptions

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| title | The title of the description list, placed at the top | ReactNode | - |  |
| bordered | whether to display the border | boolean | false |  |
| column | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 |  |
| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false |  |
| layout | Define description layout | `horizontal | vertical` | `horizontal` |  |
| colon | change default props `colon` value of `Descriptions.Item` | boolean | true |  |

### DescriptionItem

| Property | Description                    | Type      | Default | Version |
| -------- | ------------------------------ | --------- | ------- | ------- |
| label    | description of the content     | ReactNode | -       |         |
| span     | The number of columns included | number    | 1       |         |

> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.
New component Descriptions (#14645) * add new component: DescriptionList * add warning message * docs: fix doc typo * feat: implement the size attribute * docs: fix doc typo * refactor: use new name Descriptions * test: snapshots updated * feat: support react15 * style: fix code style warring * style: better var name * style: better code style * style: merge css class * feat: add responsive config * fix: fix error title * style: use @border-radius-base * update snapshot * feat: set default column * test: add test script * style: fix property defaultProps is useless error * style: more robust code * style: fix codereview warning * style: fix review warning * use responsiveObserveserve * fix review warning * bug: add childrenArray copy,prevent changes to incoming parameters * fix dom error * fix typo * fix test * don't use this * snapshot updated * prettier md * remove descriptions md text * new rendering method * doc :add dot * style: add right border 2019-05-22 23:22:09 +08:00			`---`
			`category: Components`
			`type: Data Display`
docs: 📝 Description List => Descriptions (#20316) * chore: :memo: Description List => Descriptions * Update index.en-US.md 2019-12-18 12:09:05 +08:00			`title: Descriptions`
New component Descriptions (#14645) * add new component: DescriptionList * add warning message * docs: fix doc typo * feat: implement the size attribute * docs: fix doc typo * refactor: use new name Descriptions * test: snapshots updated * feat: support react15 * style: fix code style warring * style: better var name * style: better code style * style: merge css class * feat: add responsive config * fix: fix error title * style: use @border-radius-base * update snapshot * feat: set default column * test: add test script * style: fix property defaultProps is useless error * style: more robust code * style: fix codereview warning * style: fix review warning * use responsiveObserveserve * fix review warning * bug: add childrenArray copy,prevent changes to incoming parameters * fix dom error * fix typo * fix test * don't use this * snapshot updated * prettier md * remove descriptions md text * new rendering method * doc :add dot * style: add right border 2019-05-22 23:22:09 +08:00			`cols: 1`
			`---`

			`Display multiple read-only fields in groups.`

			`## When To Use`

			`Commonly displayed on the details page.`

			`## API`

			`### Descriptions`

docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			`\| Property \| Description \| Type \| Default \| Version \|`
			`\| --- \| --- \| --- \| --- \| --- \|`
docs(update): removed 3.x version description in 4.0-prepare (#19827) * docs(update): removed 3.x version description in 4.0-prepare ref #19815 * docs(update): update docs remove carousel/index.zh-CN.md empty version column * docs(update): update docs remove carousel/index.en-US.md empty version column 2019-11-20 20:31:43 +08:00			`\| title \| The title of the description list, placed at the top \| ReactNode \| - \| \|`
			`\| bordered \| whether to display the border \| boolean \| false \| \|`
			\| column \| the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) \| number \| 3 \| \|
			\| size \| set the size of the list. Can be set to `middle`,`small`, or not filled \| `default \| middle \| small` \| false \| \|
			\| layout \| Define description layout \| `horizontal \| vertical` \| `horizontal` \| \|
			\| colon \| change default props `colon` value of `Descriptions.Item` \| boolean \| true \| \|
New component Descriptions (#14645) * add new component: DescriptionList * add warning message * docs: fix doc typo * feat: implement the size attribute * docs: fix doc typo * refactor: use new name Descriptions * test: snapshots updated * feat: support react15 * style: fix code style warring * style: better var name * style: better code style * style: merge css class * feat: add responsive config * fix: fix error title * style: use @border-radius-base * update snapshot * feat: set default column * test: add test script * style: fix property defaultProps is useless error * style: more robust code * style: fix codereview warning * style: fix review warning * use responsiveObserveserve * fix review warning * bug: add childrenArray copy,prevent changes to incoming parameters * fix dom error * fix typo * fix test * don't use this * snapshot updated * prettier md * remove descriptions md text * new rendering method * doc :add dot * style: add right border 2019-05-22 23:22:09 +08:00
			`### DescriptionItem`

docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			`\| Property \| Description \| Type \| Default \| Version \|`
			`\| -------- \| ------------------------------ \| --------- \| ------- \| ------- \|`
docs(update): removed 3.x version description in 4.0-prepare (#19827) * docs(update): removed 3.x version description in 4.0-prepare ref #19815 * docs(update): update docs remove carousel/index.zh-CN.md empty version column * docs(update): update docs remove carousel/index.en-US.md empty version column 2019-11-20 20:31:43 +08:00			`\| label \| description of the content \| ReactNode \| - \| \|`
			`\| span \| The number of columns included \| number \| 1 \| \|`
style: descriptions style update (#18270) * padding bottom support size * add toc readme * add demo * fix lint * snapshot updated 2019-08-16 10:01:46 +08:00
			`> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.`