{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/card","result":{"data":{"current":{"frontmatter":{"title":"Card","order":65,"brief":"Card container can consist of titles, paragraphs, pictures, lists, and other content.","icon":"doc-card"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-card","title":"Basic card"},{"url":"#simple-card","title":"Simple card"},{"url":"#cover","title":"Cover"},{"url":"#border-and-line","title":"Border and line"},{"url":"#shadows","title":"Shadows"},{"url":"#customized-content","title":"Customized content"},{"url":"#inner-card","title":"Inner card"},{"url":"#card-in-column","title":"Card in column"},{"url":"#loading","title":"loading"},{"url":"#with-skeleton","title":"With Skeleton"},{"url":"#with-tabs","title":"With tabs"},{"url":"#actions","title":"Actions"},{"url":"#card-group","title":"Card group"},{"url":"#grid-card","title":"Grid card"},{"url":"#api-reference","title":"API reference"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#related-material","title":"Related Material"}]},"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\": 65,\n  \"category\": \"Show\",\n  \"title\": \"Card\",\n  \"subTitle\": \"Card\",\n  \"icon\": \"doc-card\",\n  \"brief\": \"Card container can consist of titles, paragraphs, pictures, lists, and other content.\"\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 { Card } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic card\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The basic card contains the title, content and other parts.\"), 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 { Card, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n  \\n    return (\\n        <Card \\n            title='Semi Design' \\n            style={{ maxWidth: 360 }}\\n            headerExtraContent={\\n                <Text link>\\n                    More\\n                </Text>\\n            }\\n        >\\n            Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Simple card\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The card can only set the content area.\"), 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 { Card, Popover, Avatar } from '@douyinfe/semi-ui';\\nimport { IconInfoCircle } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <>\\n            <Card style={{ maxWidth: 360 }} >\\n                Semi Design is a design system developed and maintained by IES-FE & IES-UED.\\n            </Card>\\n            <br />\\n            <Card \\n                style={{ maxWidth: 360 }} \\n                bodyStyle={{ \\n                    display: 'flex',\\n                    alignItems: 'center',\\n                    justifyContent: 'space-between'\\n                }}\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n                <Popover\\n                    position='top'\\n                    showArrow\\n                    content={\\n                        <article style={{ padding: 6 }}>\\n                            This is a card.\\n                        </article>\\n                    }\\n                >\\n                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>\\n                </Popover>\\n            </Card>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Cover\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cover\"), \" property to set the cover.\"), 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 { Card } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <Card\\n            style={{ maxWidth: 300 }}\\n            cover={ \\n                <img \\n                    alt=\\\"example\\\" \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg\\\" \\n                />\\n            }\\n        >\\n            <Meta title=\\\"Card cover\\\" />\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Border and line\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bordered\"), \" to set whether the card has an outer border, the default is true. At the same time, you can also use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"headerLine\"), \" to set whether the content area and title area have borders, and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footerLine\"), \" to set whether the content area and footer area have borders.\"), 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 { Card } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div \\n            style={{\\n                display: 'inline-block',\\n                padding: 20,\\n                backgroundColor: 'var(--semi-color-fill-0)'\\n            }}\\n        >\\n            <Card \\n                style={{ maxWidth: 360 }}\\n                bordered={false}\\n                headerLine={true}\\n                title='Semi Design'\\n            >\\n                Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.\\n            </Card>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Shadows\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shadows\"), \" to set the timing of the shadow display. Optional: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hover\"), \" (show shadow when hover), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"always\"), \" (show shadow always), if this property is not set, there will be no shadow.\"), 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 { Card, Avatar, Popover } from '@douyinfe/semi-ui';\\nimport { IconInfoCircle } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <div>\\n            <Card \\n                shadows='hover'\\n                style={{ maxWidth: 360 }} \\n                bodyStyle={{ \\n                    display: 'flex',\\n                    alignItems: 'center',\\n                    justifyContent: 'space-between'\\n                }}\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n                <Popover\\n                    position='top'\\n                    showArrow\\n                    content={\\n                        <article style={{ padding: 6 }}>\\n                            This is a card.\\n                        </article>\\n                    }\\n                >\\n                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>\\n                </Popover>\\n            </Card>\\n            <br/>\\n            <Card \\n                shadows='always'\\n                style={{ maxWidth: 360 }} \\n                bodyStyle={{ \\n                    display: 'flex',\\n                    alignItems: 'center',\\n                    justifyContent: 'space-between'\\n                }}\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n                <Popover\\n                    position='top'\\n                    showArrow\\n                    content={\\n                        <article style={{ padding: 6 }}>\\n                            This is a card.\\n                        </article>\\n                    }\\n                >\\n                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>\\n                </Popover>\\n            </Card>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Customized content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Card.Meta\"), \" to support more flexible content, allowing you to set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"avatar\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"description\"), \".\"), 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 { Card, Avatar, Space, Button, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n    const { Text } = Typography;\\n\\n    return (\\n        <Card\\n            style={{ maxWidth: 360 }}\\n            title={\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    description=\\\"Easily manage your project icons and easily upload, update and share a series of project icons.\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n            }\\n            headerExtraContent={\\n                <Text link>\\n                    More\\n                </Text>\\n            }\\n            cover={ \\n                <img \\n                    alt=\\\"example\\\" \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg\\\" \\n                />\\n            }\\n            footerLine={ true }\\n            footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}\\n            footer={\\n                <Space>\\n                    <Button theme='borderless' type='primary'>Featured Case</Button>\\n                    <Button theme='solid' type='primary'>Start</Button>\\n                </Space>\\n            }\\n        >\\n            Semi Design is a design system developed and maintained by IES-FE & IES-UED. \\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Inner card\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Other cards can be nested inside the card.\"), 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  }, \"\\nimport React from 'react';\\nimport { Card, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n  \\n    return (\\n        <Card title='Card title' >\\n            <Card \\n                title='Inner Card title'\\n                style={{ marginBottom: 20 }}\\n                headerExtraContent={\\n                    <Text link>\\n                        More\\n                    </Text>\\n                }\\n            >\\n                Inner Card content\\n            </Card>\\n            <Card \\n                title='Inner Card title'\\n                headerExtraContent={\\n                    <Text link>\\n                        More\\n                    </Text>\\n                }\\n            >\\n                Inner Card content\\n            </Card>\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Card in column\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The system overview page is often combined with the grid.\"), 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 { Card, Row, Col } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div \\n            style={{\\n                backgroundColor: 'var(--semi-color-fill-0)', \\n                padding: 20\\n            }}\\n        >\\n            <Row gutter={[16, 16]}>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n            </Row>\\n            <Row gutter={[16, 16]}>\\n                <Col span={16}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n            </Row>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"loading\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" property of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Card\"), \" to set whether to display placeholder elements in the card content area. When it is true, the placeholder elements will be displayed, and vice versa.\"), 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, { useState } from 'react';\\nimport { Card, Switch } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [loading, setLoading] = useState(true);\\n    const { Meta } = Card;\\n\\n    return (\\n        <>\\n            <Switch onChange={ v => setLoading(!v) } />\\n            <br />\\n            <br />\\n            <Card \\n                style={{ maxWidth: 360 }}\\n                loading={ loading }\\n            >\\n                <Meta \\n                    title=\\\"Semi Design\\\" \\n                    description=\\\"Semi Design is a design system developed and maintained by IES-FE & IES-UED.\\\"\\n                />\\n            </Card>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"With Skeleton\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" property of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Card\"), \" can only set the preloading effect of the content area. If you want to set the preloading of other parts, or customize a richer preloading effect, you can combine it with the Skeleton component.\"), 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, { useState } from 'react';\\nimport { Card, Switch, Skeleton, Typography, Avatar } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [loading, setLoading] = useState(true);\\n    const { Meta } = Card;\\n    const { Title, Paragraph, Image } = Skeleton;\\n\\n    return (\\n        <>\\n            <Switch onChange={ v => setLoading(!v) } />\\n            <br />\\n            <br />\\n            <Card\\n                style={{ maxWidth: 360 }}\\n                title={\\n                    <Meta \\n                        title={\\n                            <Skeleton\\n                                style={{ width: 80 }}\\n                                placeholder={<Title />}\\n                                loading={loading}\\n                            >\\n                                <Typography.Title heading={5}>\\n                                    Semi Design\\n                                </Typography.Title>\\n                            </Skeleton>\\n                        } \\n                        description={\\n                            <Skeleton \\n                                style={{ width: 150, marginTop: 12 }} \\n                                placeholder={<Paragraph rows={1} />} \\n                                loading={loading}\\n                            >\\n                                <Typography.Text>\\n                                    Semi Design is a design system developed and maintained by IES-FE & IES-UED.\\n                                </Typography.Text>\\n                            </Skeleton>\\n                        }\\n                        avatar={\\n                            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>\\n                                <Avatar \\n                                    alt='Card meta img'\\n                                    size=\\\"default\\\"\\n                                    src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                                />\\n                            </Skeleton>\\n                        }\\n                    />\\n                }\\n                headerExtraContent={\\n                    <Skeleton style={{ width: 50 }} placeholder={<Paragraph rows={1} />} loading={loading}>\\n                        <Typography.Text link>\\n                            More\\n                        </Typography.Text>\\n                    </Skeleton>\\n                }\\n                cover={ \\n                    <Skeleton style={{ maxWidth: '100%', height: 260 }} placeholder={<Image />} loading={loading}>\\n                        <img \\n                            alt=\\\"example\\\" \\n                            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg\\\" \\n                        />\\n                    </Skeleton> \\n                }\\n            >\\n            </Card>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"With tabs\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Tabs\"), \" component in the card component.\"), 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 { Card, Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nfunction demo() {\\n    return (\\n        <Card title='Card title'>\\n            <Tabs \\n                type=\\\"line\\\" \\n                style={{\\n                    marginTop: -20,\\n                    marginBottom: -20\\n                }}\\n            >\\n                <TabPane tab=\\\"Tab 1\\\" itemKey=\\\"1\\\">\\n                    <p>content1</p>\\n                    <p>content1</p>\\n                    <p>content1</p>\\n                </TabPane>\\n                <TabPane tab=\\\"Tab 2\\\" itemKey=\\\"2\\\">\\n                    <p>content2</p>\\n                    <p>content2</p>\\n                    <p>content2</p>\\n                </TabPane>\\n            </Tabs>\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Actions\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"actions\"), \" receives the ReactNode array, and the elements will be displayed at the bottom of the content area with a horizontal spacing of 12px.\"), 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 { Card, Rating } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <Card\\n            style={{ maxWidth: 360 }}\\n            actions={[    \\n                // eslint-disable-next-line react/jsx-key\\n                <Rating size='small' defaultValue={4}/>\\n            ]}\\n            headerLine={ false }\\n            cover={ \\n                <img \\n                    alt=\\\"example\\\" \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg\\\" \\n                />\\n            }\\n        >\\n            <Meta \\n                title=\\\"Semi Doc\\\" \\n                description=\\\"Easily manage your project icons and easily upload, update and share a series of project icons.\\\" \\n            />\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Card group\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CardGroup\"), \" to present the cards in an evenly spaced arrangement.\"), 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, { useState } from 'react';\\nimport { Card, CardGroup, Typography, Slider } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n    const [ spacing, setSpacing ] = useState(12);\\n\\n    return (\\n        <>\\n            <Text>Slide to adjust the card spacing</Text>\\n            <Slider \\n                defaultValue={12}\\n                max={40}\\n                min={10}\\n                style={{ width: 360 }}\\n                onChange={v=> setSpacing(v)}\\n            />\\n            <br />\\n            <CardGroup spacing={spacing}>\\n                {\\n                    new Array(8).fill(null).map((v, idx)=>(\\n                        <Card \\n                            key={idx}\\n                            shadows='hover'\\n                            title='Card title'\\n                            headerLine={false}\\n                            style={{ width: 260 }}\\n                            headerExtraContent={\\n                                <Text link>\\n                                    More\\n                                </Text>\\n                            }\\n                        >\\n                            <Text>Card content</Text>\\n                        </Card>\\n                    ))\\n                }\\n            </CardGroup>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Grid card\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" property of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CardGroup\"), \" to set the card group to a grid type.\"), 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 { Card, CardGroup, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n\\n    return (\\n        <CardGroup type='grid'>\\n            {\\n                new Array(7).fill(null).map((v, idx)=>(\\n                    <Card \\n                        key={idx}\\n                        shadows='hover'\\n                        title='Card title'\\n                        headerLine={false}\\n                        style={{ width: 260 }}\\n                        headerExtraContent={\\n                            <Text link>\\n                                More\\n                            </Text>\\n                        }\\n                    >\\n                        <Text>Card content</Text>\\n                    </Card>\\n                ))\\n            }     \\n        </CardGroup>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API reference\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Card\")), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"VERSION\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"actions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Card operation group, located at the bottom of the card content area\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<ReactNode\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bodyStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Body style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bordered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to set the outer border of the card\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), 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  }, \"The className of Card container\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Card cover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerExtraContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Extra content to the right of the card title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Customize card footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footerLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to set borders in the footer area and content area of the card\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footerStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Footer style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom card header, if passed in, it will override \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"title\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"headerExtraContent\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to set borders in the title area and content area of the card\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Header style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to set a placeholder when loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set the time to show the shadow. If this property is not set, there will be no shadow. Optiona: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hover\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"always\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"Card style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Card title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CardGroup\")), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"VERSION\"))), mdx(\"tbody\", {\n    parentName: \"table\"\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  }, \"The className of CardGroup\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"spacing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Spacing size, support numeric value or array, \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[horizontal spacing, vertical spacing]\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" number[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"12px\"), 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  }, \"CardGroup style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"You can set the card deck to a grid type. After setting this property, the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"spacing\"), \" property will be overwritten.Optional: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grid\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Card.Meta\")), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"VERSION\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avatar\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avatar\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"The className of Meta\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"Meta style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card supports the input of \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" to indicate the function of the Card\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When Card loading, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-busy\"), \" will be turned on\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card title\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card titles should be informative and focus on the most important information\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"try to limit the title to 1 phrase or segment\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card titles should be written in sentence case\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"do not end with punctuation marks (except question marks)\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Text\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Actionable: Use imperative sentences instead of \\\"you can\\\" to describe the body, which better tells the user what can be done\")))), 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  }, \"\\u2705 Recommended usage\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C Deprecated usage\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get order progress for details\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"You can get order progress for details\")))), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Always say the most important information first\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use \\\"Need to\\\" instead of \\\"must\\\"\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Related Material\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"41, 179\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/card","next":{"fields":{"slug":"zh-CN/show/card"},"id":"a570b45b-2d69-5127-b7f2-dea8f58de5cb","frontmatter":{"title":"Card 卡片","localeCode":"zh-CN","icon":"doc-card","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/calendar"},"id":"3bba5920-48eb-526f-a100-7144934b8904","frontmatter":{"title":"Calendar 日历","localeCode":"zh-CN","icon":"doc-calendar","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}