import React from 'react'; import { Descriptions, Tag } from '@douyinfe/semi-ui'; () => { const data = [ { key: 'Actual Users', value: '1,480,000' }, { key: '7-day Rentention', value: '98%' }, { key: 'Security Level', value: 'III' }, { key: 'Category Tag', value: <Tag style={{ margin: 0 }}>E-commerce</Tag> }, { key: 'Authorized State', value: 'Unauthorized' }, ]; return <Descriptions data={data} />; };

import React from 'react'; import { Descriptions, Tag } from '@douyinfe/semi-ui'; () => { const data = [ { key: 'Actual Users', value: '1,480,000' }, { key: '7-day Rentention', value: '98%' }, { key: 'Security Level', value: 'III' }, { key: 'Category Tag', value: <Tag style={{ margin: 0 }}>E-commerce</Tag> }, { key: 'Authorized State', value: 'Unauthorized' }, ]; const style = { boxShadow: 'var(--semi-shadow-elevated)', backgroundColor: 'var(--semi-color-bg-2)', borderRadius: '4px', padding: '10px', margin: '10px', width: '240px', }; return ( <> <div style={{ display: 'flex', flexWrap: 'wrap' }}> <Descriptions align="center" data={data} style={style} /> <Descriptions align="justify" data={data} style={style} /> <Descriptions align="left" data={data} style={style} /> <Descriptions align="plain" data={data} style={style} /> </div> </> ); };

import React from 'react'; import { Descriptions } from '@douyinfe/semi-ui'; import { IconArrowUp } from '@douyinfe/semi-icons'; () => { const data = [ { key: 'Actual Users', value: '1,480,000' }, { key: '7-day Rentention', value: ( <span> 98% <IconArrowUp size="small" style={{ color: 'red', marginLeft: '4px' }} /> </span> ), }, { key: 'Security Level', value: 'III' }, ]; const style = { boxShadow: 'var(--semi-shadow-elevated)', backgroundColor: 'var(--semi-color-bg-2)', borderRadius: '4px', padding: '10px', marginRight: '20px', width: '600px', }; return ( <div> <Descriptions data={data} row size="small" style={style} /> <br /> <Descriptions data={data} row style={style} /> <br /> <Descriptions data={data} row size="large" style={style} /> </div> ); };

import React from 'react'; import { Descriptions } from '@douyinfe/semi-ui'; () => { return ( <Descriptions> <Descriptions.Item itemKey="Actual Users">1,480,000</Descriptions.Item> <Descriptions.Item itemKey="7-day Rentention">98%</Descriptions.Item> <Descriptions.Item itemKey="Security Level">III</Descriptions.Item> <Descriptions.Item itemKey="Category Tag">E-commerce</Descriptions.Item> <Descriptions.Item itemKey="Authorized State">Unauthorized</Descriptions.Item> </Descriptions> ); };

import React from 'react'; import { Descriptions, Space, Tag } from '@douyinfe/semi-ui'; () => { const data = [ { key: 'UID', value: 'SemiDesign' }, { key: 'Anchor Type', value: 'Freelance anchor' }, { key: 'Security Level', value: 'Level 3' }, { key: 'Classification', value: <Tag size="small" shape='circle' color='amber'>Tech News</Tag> }, { key: 'Videos Count', value: '88888888' }, { key: 'Certification status', value: 'This is a long, long, long value that needs to be automatically wrapped and displayed.', span: 3 }, ]; return ( <> <Descriptions layout='horizontal' align='plain' data={data} column={4} /> </> ); };