Descriptions - Ant Design

When To Use

Commonly displayed on the details page.

tsx

// works when >= 5.8.0, recommended ✅

const items: DescriptionsProps['items'] = [
  {
    key: '1',
    label: 'UserName',
    children: <p>Zhou Maomao</p>,
  },
  {
    key: '2',
    label: 'Telephone',
    children: <p>1810000000</p>,
  },
  {
    key: '3',
    label: 'Live',
    children: <p>Hangzhou, Zhejiang</p>,
  },
  {
    key: '4',
    label: 'Remark',
    children: <p>empty</p>,
  },
  {
    key: '5',
    label: 'Address',
    children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,
  },
];

<Descriptions title="User Info" items={items} />;

// works when <5.8.0 , deprecated when >=5.8.0 🙅🏻‍♀️

<Descriptions title="User Info">
  <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
  <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
  <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
  <Descriptions.Item label="Remark">empty</Descriptions.Item>
  <Descriptions.Item label="Address">
    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  </Descriptions.Item>
</Descriptions>;

Examples

API

Common props ref：Common props

Descriptions

Property	Description	Type	Default	Version
bordered	Whether to display the border	boolean	false
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
colon	Change default props `colon` value of Descriptions.Item. Indicates whether the colon after the label is displayed	boolean	true
column	The number of `DescriptionItems` in a row, could be an object (like `{ xs: 8, sm: 16, md: 24}`, but must have `bordered={true}`) or a number	number \| Record<Breakpoint, number>	3
~~contentStyle~~	Customize content style, Please use `styles.content` instead	CSSProperties	-	4.10.0
extra	The action area of the description list, placed at the top-right	ReactNode	-	4.5.0
items	Describe the contents of the list item	DescriptionsItem[]	-	5.8.0
~~labelStyle~~	Customize label style, Please use `styles.label` instead	CSSProperties	-	4.10.0
layout	Define description layout	`horizontal` \| `vertical`	`horizontal`
size	Set the size of the list. Can be set to `medium`,`small`, or not filled	`large` \| `medium` \| `small`	`large`
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
title	The title of the description list, placed at the top	ReactNode	-

DescriptionItem

Property	Description	Type	Default	Version
~~contentStyle~~	Customize content style, Please use `styles.content` instead	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
~~labelStyle~~	Customize label style, Please use `styles.label` instead	CSSProperties	-	4.9.0
span	The number of columns included(`filled` Fill the remaining part of the current row)	number \| `filled` \| Screens	1	`screens: 5.9.0`, `filled: 5.22.0`

The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwrite first when conflict.

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
colonMarginLeft	Left margin of colon	number	2
colonMarginRight	Right margin of colon	number	8
contentColor	Text color of content	string	rgba(0,0,0,0.88)
extraColor	Text color of extra area	string	rgba(0,0,0,0.88)
itemPaddingBottom	Bottom padding of item	number	16
itemPaddingEnd	End padding of item	number	16
labelBg	Background color of label	string	rgba(0,0,0,0.02)
labelColor	Text color of label	string	rgba(0,0,0,0.45)
titleColor	Text color of title	string	rgba(0,0,0,0.88)
titleMarginBottom	Bottom margin of title	number	20

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string	rgba(5,5,5,0.06)
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextSecondary	The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.	string	rgba(0,0,0,0.65)
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeLG	Large font size	number	16
fontWeightStrong	Control the font weight of heading components (such as h1, h2, h3) or selected item.	number	600
lineHeight	Line height of text.	number	1.5714285714285714
lineHeightLG	Line height of large text.	number	1.5
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
padding	Control the padding of the element.	number	16
paddingLG	Control the large padding of the element.	number	24
paddingSM	Control the small padding of the element.	number	12
paddingXS	Control the extra small padding of the element.	number	8

User Info

Product	Cloud Database	Billing Mode	Prepaid	Automatic Renewal	YES
Order time	2018-04-24 18:00:00	Usage Time	2019-04-24 18:00:00
Status	Running
Negotiated Amount	$80.00	Discount	$20.00	Official Receipts	$60.00
Config Info	Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1

largemediumsmall

Custom Size

Product	Cloud Database	Billing	Prepaid	Time	18:00:00
Amount	$80.00	Discount	$20.00	Official	$60.00
Config Info	Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1

Custom Size

ProductCloud Database	BillingPrepaid	Time18:00:00
Amount$80.00	Discount$20.00	Official$60.00

Responsive Descriptions

Product	Cloud Database	Billing	Prepaid	Time	18:00:00
Amount	$80.00	Discount	$20.00	Official	$60.00
Config Info	Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid	Hardware Info	CPU: 6 Core 3.5 GHz Storage space: 10 GB Replication factor: 3 Region: East China 1

User Info

Product	Billing Mode	Automatic Renewal
Cloud Database	Prepaid	YES
Order time	Usage Time
2018-04-24 18:00:00	2019-04-24 18:00:00
Status
Running
Negotiated Amount	Discount	Official Receipts
$80.00	$20.00	$60.00
Config Info
Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1