{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/descriptions","result":{"data":{"current":{"frontmatter":{"title":"Description","order":69,"brief":null,"icon":"doc-descriptions"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#alignment","title":"Alignment"},{"url":"#row-display","title":"Row Display"},{"url":"#descriptions-using-jsx","title":"Descriptions Using JSX"},{"url":"#set-layout-mode","title":"Set layout mode"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#descriptions","title":"Descriptions"},{"url":"#dataitem","title":"DataItem"},{"url":"#descriptionsitem","title":"Descriptions.Item"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 69,\n  \"category\": \"Show\",\n  \"title\": \"Description\",\n  \"subTitle\": \"Descriptions\",\n  \"icon\": \"doc-descriptions\",\n  \"dir\": \"column\",\n  \"breif\": \"The description list is used to render key-value pairs.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Descriptions } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Data can be passed in as an array of key-value pairs \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{ key: value }\"), \" through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.data\"), \"\\nBoth key and value support the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ReactNode\"), \" type. You can pass in a string or a higher degree of freedom ReactNode to freely customize the render dom.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Descriptions, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = [\\n        { key: 'Actual Users', value: '1,480,000' },\\n        { key: '7-day Rentention', value: '98%' },\\n        { key: 'Security Level', value: 'III' },\\n        { key: 'Category Tag', value: <Tag style={{ margin: 0 }}>E-commerce</Tag> },\\n        { key: 'Authorized State', value: 'Unauthorized' },\\n    ];\\n    return <Descriptions data={data} />;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Alignment\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align\"), \" to set alignment of key-value. Supporting values including: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), \"(default), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"justify\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"plain\"), \".\\nWhen \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"row\"), \" is true, this configuration is invalid\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Descriptions, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = [\\n        { key: 'Actual Users', value: '1,480,000' },\\n        { key: '7-day Rentention', value: '98%' },\\n        { key: 'Security Level', value: 'III' },\\n        { key: 'Category Tag', value: <Tag style={{ margin: 0 }}>E-commerce</Tag> },\\n        { key: 'Authorized State', value: 'Unauthorized' },\\n    ];\\n    const style = {\\n        boxShadow: 'var(--semi-shadow-elevated)',\\n        backgroundColor: 'var(--semi-color-bg-2)',\\n        borderRadius: '4px',\\n        padding: '10px',\\n        margin: '10px',\\n        width: '240px',\\n    };\\n    return (\\n        <>\\n            <div style={{ display: 'flex', flexWrap: 'wrap' }}>\\n                <Descriptions align=\\\"center\\\" data={data} style={style} />\\n                <Descriptions align=\\\"justify\\\" data={data} style={style} />\\n                <Descriptions align=\\\"left\\\" data={data} style={style} />\\n                <Descriptions align=\\\"plain\\\" data={data} style={style} />\\n            </div>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Row Display\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"row\"), \" to display the data to two-row, supporting three sizes: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \"(default), and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Descriptions } from '@douyinfe/semi-ui';\\nimport { IconArrowUp } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const data = [\\n        { key: 'Actual Users', value: '1,480,000' },\\n        {\\n            key: '7-day Rentention',\\n            value: (\\n                <span>\\n                    98%\\n                    <IconArrowUp size=\\\"small\\\" style={{ color: 'red', marginLeft: '4px' }} />\\n                </span>\\n            ),\\n        },\\n        { key: 'Security Level', value: 'III' },\\n    ];\\n    const style = {\\n        boxShadow: 'var(--semi-shadow-elevated)',\\n        backgroundColor: 'var(--semi-color-bg-2)',\\n        borderRadius: '4px',\\n        padding: '10px',\\n        marginRight: '20px',\\n        width: '600px',\\n    };\\n    return (\\n        <div>\\n            <Descriptions data={data} row size=\\\"small\\\" style={style} />\\n            <br />\\n            <Descriptions data={data} row style={style} />\\n            <br />\\n            <Descriptions data={data} row size=\\\"large\\\" style={style} />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Descriptions Using JSX\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Descriptions } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <Descriptions>\\n            <Descriptions.Item itemKey=\\\"Actual Users\\\">1,480,000</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"7-day Rentention\\\">98%</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"Security Level\\\">III</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"Category Tag\\\">E-commerce</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"Authorized State\\\">Unauthorized</Descriptions.Item>\\n        </Descriptions>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Set layout mode\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The layout mode can be set through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout\"), \", which supports \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"horizontal\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \" (support after v2.54.0) . Default is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When horizontal is set, column can be used to specify the maximum number of columns per row.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Descriptions, Space, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = [\\n        { key: 'UID', value: 'SemiDesign' },\\n        { key: 'Anchor Type', value: 'Freelance anchor' },\\n        { key: 'Security Level', value: 'Level 3' },\\n        { key: 'Classification', value: <Tag size=\\\"small\\\" shape='circle' color='amber'>Tech News</Tag>\\n           \\n        },\\n        { key: 'Videos Count', value: '88888888' },\\n        { key: 'Certification status', value: 'This is a long, long, long value that needs to be automatically wrapped and displayed.', span: 3 },\\n    ];\\n    return (\\n        <> \\n            <Descriptions layout='horizontal' align='plain' data={data} column={4} />\\n        </>\\n    );\\n};\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Descriptions\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Alignment of the key-value data, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"plain\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Classname\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"data\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Data to display\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DataItem[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to display data in double-row\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size of the list for double-row display, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"layout\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"List layout mode  \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Total number of columns in landscape layout  \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"DataItem\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Key value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Data value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" (() => ReactNode)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether the data should be displayed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"span\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The number of columns the cell should span \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Descriptions.Item\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"itemKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Key value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether the data should be displayed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Item external wrapper: class name of tr DOM element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Item external wrapper: inline style of tr DOM element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"span\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The number of columns the cell should span \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Field names and values \\u200B\\u200Bare written in upper and lower case according to the Sentence case principle\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/descriptions","next":{"fields":{"slug":"zh-CN/show/descriptions"},"id":"a6561aa4-3e8f-5f34-b4e2-85fa69f3023a","frontmatter":{"title":"Descriptions 描述列表","localeCode":"zh-CN","icon":"doc-descriptions","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/collapsible"},"id":"cf73f8d4-a400-5692-a876-fdd1a4bb6d59","frontmatter":{"title":"Collapsible 折叠","localeCode":"zh-CN","icon":"doc-collapsible","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}