+{"description":"\nUse `<Card />` as a basic wrapper for grouping related content with padding,\nborder radius, shadow, and background color.\n\n```js\n---\ntype: example\n---\n<Card>\n <Heading level=\"h3\" margin=\"0 0 x-small 0\">\n Base card\n </Heading>\n <Text variant=\"content\">Medium size, the default.</Text>\n</Card>\n```\n\n### Sizes\n\n`size` controls padding, border radius, and the card's min-/max-width\nbreakpoints: `sm` applies a max-width, `md` applies a min- and max-width, and\n`lg` applies a min-width.\n\n```js\n---\ntype: example\n---\n<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n <Card size=\"sm\">\n <Text variant=\"content\">Small card</Text>\n </Card>\n <Card size=\"md\">\n <Text variant=\"content\">Medium card</Text>\n </Card>\n <Card size=\"lg\">\n <Text variant=\"content\">Large card</Text>\n </Card>\n</div>\n```\n\n### Nested cards\n\nThe `nested` variant is meant to be placed inside a `base` Card. It omits the\nbackground color and shadow, and uses a smaller border radius. A nested\nCard's `size` is independent of its parent's — choose it based on the nested\ncontent's own needs, not to match the parent.\n\n```js\n---\ntype: example\n---\n<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n <Card variant=\"base\" size=\"sm\">\n <Card variant=\"nested\" size=\"sm\">\n <Text variant=\"content\">Nested small card</Text>\n </Card>\n </Card>\n <Card variant=\"base\" size=\"md\">\n <Card variant=\"nested\" size=\"md\">\n <Text variant=\"content\">Nested medium card</Text>\n </Card>\n </Card>\n <Card variant=\"base\" size=\"lg\">\n <Card variant=\"nested\" size=\"lg\">\n <Text variant=\"content\">Nested large card</Text>\n </Card>\n </Card>\n</div>\n```\n\n### Mixed sizes\n\nNested Cards don't need to match their parent's size, or each other's — you\ncan place several different-sized `nested` Cards side by side inside one\nlarger `base` Card.\n\n```js\n---\ntype: example\n---\n<Card variant=\"base\" size=\"lg\">\n <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>\n <Card variant=\"nested\" size=\"sm\">\n <Text variant=\"content\">Small nested card</Text>\n </Card>\n <Card variant=\"nested\" size=\"md\">\n <Text variant=\"content\">Medium nested card</Text>\n </Card>\n </div>\n</Card>\n```\n\n### Multiple nested cards\n\nA `base` Card can hold several `nested` Cards, for example to lay out a group\nof related sub-sections inside a single container.\n\n```js\n---\ntype: example\n---\n<Card variant=\"base\" size=\"lg\">\n <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n <Card variant=\"nested\">\n <Heading level=\"h3\" margin=\"0 0 x-small 0\">\n Lorem ipsum\n </Heading>\n <Text variant=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore.\n </Text>\n </Card>\n <Card variant=\"nested\">\n <Heading level=\"h3\" margin=\"0 0 x-small 0\">\n Dolor sit amet\n </Heading>\n <Text variant=\"content\">\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo.\n </Text>\n </Card>\n <Card variant=\"nested\">\n <Heading level=\"h3\" margin=\"0 0 x-small 0\">\n Consectetur adipiscing\n </Heading>\n <Text variant=\"content\">\n Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla.\n </Text>\n </Card>\n </div>\n</Card>\n```\n\n### Guidelines\n\n```js\n---\ntype: embed\n---\n<Guidelines>\n <Figure recommendation=\"yes\" title=\"Do\">\n <Figure.Item>\n Place a <code>nested</code> Card inside a <code>base</code> Card\n </Figure.Item>\n <Figure.Item>\n Place a <code>nested</code> Card on top of another surface, such as a\n Card, Modal, or utility panel (e.g. Tray, DrawerLayout)\n </Figure.Item>\n <Figure.Item>\n Size each <code>nested</code> Card independently, based on its own\n content — it doesn't need to match its parent{' '}\n <code>base</code> Card's <code>size</code>\n </Figure.Item>\n <Figure.Item>\n Give a row of <code>md</code>/<code>lg</code> <code>nested</code> Cards\n enough width to fit their minimum widths, or let them wrap, when\n placing several side by side\n </Figure.Item>\n </Figure>\n <Figure recommendation=\"no\" title=\"Don't\">\n <Figure.Item>\n Place a <code>base</code> Card inside another <code>base</code> Card\n </Figure.Item>\n <Figure.Item>\n Place a <code>nested</code> Card directly on the page background — it\n relies on a surface behind it for contrast, since it has no background\n color of its own\n </Figure.Item>\n </Figure>\n</Guidelines>\n```\n","displayName":"Card","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the Card"},"variant":{"required":false,"tsType":{"name":"union","raw":"'base' | 'nested'","elements":[{"name":"literal","value":"'base'"},{"name":"literal","value":"'nested'"}]},"description":"`base` renders a background, border color, and shadow. `nested` is\nmeant to be placed inside a `base` Card and omits the background,\nborder color, and shadow.","defaultValue":{"value":"'base'","computed":false}},"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md' | 'lg'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"},{"name":"literal","value":"'lg'"}]},"description":"`sm` applies a max-width, `md` applies a min- and max-width, and `lg`\napplies a min-width, each based on breakpoint tokens. Padding and\nborder radius also scale per size.","defaultValue":{"value":"'md'","computed":false}}},"category":"components","relativePath":"packages/ui-card/src/Card/v1/index.tsx","extension":".tsx","srcPath":"packages/ui-card/src/Card/v1/index.tsx","srcUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-card/src/Card/v1/index.tsx","packageName":"@instructure/ui-card","requirePath":"@instructure/ui-card/lib/Card/v1/index","requireStr":"require('/home/runner/work/instructure-ui/instructure-ui/packages/ui-card/src/Card/v1/index.tsx').default","esPath":"@instructure/ui-card/es/Card/v1/index","id":"Card","title":"Card","componentVersion":"v1","componentDirName":"Card"}
0 commit comments