{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/components/cards",
    "result": {"data":{"contentPage":{"title":"Cards","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":false,"allowWideContentLayout":false,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Cards\"\n};\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};\n\nvar Cards = makeShortcode(\"Cards\");\nvar Card = makeShortcode(\"Card\");\nvar Info = makeShortcode(\"Info\");\nvar Warning = makeShortcode(\"Warning\");\nvar DummyIcon = makeShortcode(\"DummyIcon\");\nvar CardBannerOSSIcon = makeShortcode(\"CardBannerOSSIcon\");\nvar CardBannerMcDevsIcon = makeShortcode(\"CardBannerMcDevsIcon\");\nvar CardBannerMcDocsIcon = makeShortcode(\"CardBannerMcDocsIcon\");\nvar CardBannerPlatformIcon = makeShortcode(\"CardBannerPlatformIcon\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", {\n    \"className\": \"section-lead\"\n  }, mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The actual card content is markdown\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card titles are not links\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card titles never become entries in the page index nav like section headings.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card titles of both sizes are rendered as H6 to enhance accessibility while making sure they are always \\\"inside\\\" the actual headings\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Either an icon or an image path can be set, but not both.\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"To start with, Images are \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"not\"), \" supported for free-form in-content cards, only in places that are fully designed and implemented by developers. An Image is sized into the width of the card.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Icons are supported anywhere but only those that are officially provided by the kit. An icon is sized into a fixed 48x48px square.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards can occur in two interaction variants, \\\"clickable\\\" (visually elevated) and \\\"flat\\\" (visually an outline only).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards must be embedded into a wrapper component that defines the responsive sizes (two aside / three aside) and parameters that must be identical in a given row or grid (clickable card area, the heading size)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A single card must not fill the full width but stay left aligned.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Multiple cards fill the full width and are scaled up to fill even if their content is smaller. Every card has the same width in all rows (resulting in a grid if it's multiple rows)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards are sorted in rows, then columns.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"on the landing pages (src/index.mdx) a regular card has a minimum width of 328px and a narrow card a minimum width of 242px. This assures they stay 2- and 3-aside respectively.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"if\"), \" it's possible, cards would have different minimum sizes on content pages: narrow card 248px and regular 377px.\"))), mdx(\"section\", {\n    \"id\": \"section-cards-wrapper\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"cards-wrapper\"\n  }, \"\\\"Cards\\\" Wrapper\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \" Properties (for authors):\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clickable\"), \" (boolean): if set, the whole area of all child cards is a link, the card is elevated and has a hover effect if a link URL is set.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"narrow\"), \" (boolean): by default, two cards are shown side by side (except mobile viewports). if \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"narrow\"), \" is passed, the minimum card width is reduced so that three cards fit the content width on microsite landing pages.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"smallTitle\"), \" (boolean): lets all cards have a smaller title font.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fitContentColumn\"), \" (boolean): renders a little differently for cards used on content pages. The is automatically set for cards on landing pages.\"))), mdx(\"section\", {\n    \"id\": \"section-minimal-form\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"minimal-form\"\n  }, \"Minimal form\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card>foo</Card>\\n  <Card>bar</Card>\\n  <Card>next row unless three aside (narrow) prop passed?</Card>\\n  <Card>next row in any case</Card>\\n</Cards>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    mdxType: \"Card\"\n  }, \"foo\"), mdx(Card, {\n    mdxType: \"Card\"\n  }, \"bar\"), mdx(Card, {\n    mdxType: \"Card\"\n  }, \"next row unless three aside (narrow) prop passed?\"), mdx(Card, {\n    mdxType: \"Card\"\n  }, \"next row in any case\"))), mdx(\"section\", {\n    \"id\": \"section-all-options-configured\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"all-options-configured\"\n  }, \"All options configured\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards clickable narrow smallTitle fitContentColumn>\\n  <Card>foo</Card>\\n  <Card>bar</Card>\\n  <Card>next row unless three aside (narrow) prop passed?</Card>\\n  <Card>next row in any case</Card>\\n</Cards>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(Cards, {\n    clickable: true,\n    narrow: true,\n    smallTitle: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    href: \"/components/images\",\n    mdxType: \"Card\"\n  }, \"foo\"), mdx(Card, {\n    href: \"/components/images\",\n    mdxType: \"Card\"\n  }, \"bar\"), mdx(Card, {\n    href: \"/components/images\",\n    mdxType: \"Card\"\n  }, \"next row unless three aside (narrow) prop passed?\"), mdx(Card, {\n    href: \"/components/images\",\n    mdxType: \"Card\"\n  }, \"next row in any case\"))), mdx(\"section\", {\n    \"id\": \"section-card-the-actual-card\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"card-the-actual-card\"\n  }, \"\\\"Card\\\": the actual card\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Properties (for authors):\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"title\"), \" (string): the card title, no markdown allowed.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"href\"), \" (string): the link target of the bottom link and, if \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clickable\"), \" is set, the whole card. \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"href\"), \" has no effect when neither \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clickable\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"textLink\"), \" are set.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"textLink\"), \" (string): the bottom link text. If not set, no bottom link is rendered at all.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"icon\"), \" (component): the component to be rendered into the 48x48px space reserved for an icon. If not set, the space is not reserved.\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"None of the properties are required but the body content should not be empty.\")), mdx(\"section\", {\n    \"id\": \"section-flat-with-link\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"flat-with-link\"\n  }, \"Flat with Link\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card\\n    title=\\\"A regular heading\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Read more about images...\\\">This is visually flat, has a link to the **images (bold)** page and only the link is a clickable target.</Card>\\n  <Card\\n    title=\\\"A regular heading\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Read more about images...\\\">Short content, link bottom aligned</Card>\\n</Cards>\\n\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"A regular heading\",\n    href: \"/components/images\",\n    textLink: \"Read more about images...\",\n    mdxType: \"Card\"\n  }, \"This is visually flat, has a link to the **images (bold)** page and only the link is a clickable target.\"), mdx(Card, {\n    title: \"A regular heading\",\n    href: \"/components/images\",\n    textLink: \"Read more about images...\",\n    mdxType: \"Card\"\n  }, \"Short content, link bottom aligned\"))), mdx(\"section\", {\n    \"id\": \"section-clickable-with-link\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"clickable-with-link\"\n  }, \"Clickable with Link\"), mdx(Info, {\n    mdxType: \"Info\"\n  }, \"Clickable cards must have a href set. If not that is an error condition in development mode\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards clickable>\\n  <Card\\n    title=\\\"A regular heading\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Read more about images...\\\">This is visually eleveated, has a link to the **images (bold)** page and the complete card is a clickable target.</Card>\\n</Cards>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(Cards, {\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"A regular heading\",\n    href: \"/components/images\",\n    textLink: \"Read more about images...\",\n    mdxType: \"Card\"\n  }, \"This is visually eleveated, has a link to the **images (bold)** page and the complete card is a clickable target.\"))), mdx(\"section\", {\n    \"id\": \"section-flat-with-icon\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"flat-with-icon\"\n  }, \"Flat with Icon\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This example assumes that the icon used here is already provided by the MDX provider anyways. But since it's MDX alternative or site-specific icons can be provided by adding an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"import\"), \" statement in the MDX.\"), mdx(Warning, {\n    mdxType: \"Warning\"\n  }, mdx(\"p\", {\n    parentName: \"section\"\n  }, \"As discussed:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"this would be the first place where authors have to learn more JSX syntax and not just the HTML-compatible subset.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Also, from an author experience perspective we need to be aware that referencing an icon that does not exist cannot be caught at runtime but will cause a compilation error.\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards smallTitle>\\n  <Card\\n    icon={<DummyIcon />}\\n    title=\\\"A smaller title\\\">Example Text on a card with an icon.</Card>\\n</Cards>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"(no actual icon set until one is available to not break this page)\"), mdx(Cards, {\n    smallTitle: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    title: \"A smaller title\",\n    mdxType: \"Card\"\n  }, \"Example Text on a card with an icon.\"))), mdx(\"section\", {\n    \"id\": \"section-clickable-visually-elevated\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"clickable-visually-elevated\"\n  }, \"Clickable (visually elevated)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Clickable cards have one card-level link target (href) and no other links in the content.\\nThey are visually elevated and elevate even more when hovered.\\nThe link target (href) can be repeated as a link at the bottom by setting a card link label.\")), mdx(\"section\", {\n    \"id\": \"section-cards-with-icons\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-icons\"\n  }, \"Cards with Icons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Icons on cards that are \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"not narrow\"), \" are aligned to the top of the card regardless of whether they are clickable or flat.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card\\n    title=\\\"A left aligned icon\\\"\\n    icon={<DummyIcon />}\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Read more about images...\\\">\\n    The icon of this card should be left aligned.\\n  </Card>\\n  <Card\\n    title=\\\"A left aligned icon\\\"\\n    icon={<DummyIcon />}\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Read more about images...\\\">\\n    The icon of this card should be left aligned. This has more text than the latter.\\n  </Card>\\n</Cards>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"A left aligned icon\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    href: \"/components/images\",\n    textLink: \"Read more about images...\",\n    mdxType: \"Card\"\n  }, \"The icon of this card should be left aligned.\"), mdx(Card, {\n    title: \"A left aligned icon\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    href: \"/components/images\",\n    textLink: \"Read more about images...\",\n    mdxType: \"Card\"\n  }, \"The icon of this card should be left aligned. This has more descriptive text than the latter.\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Icons on \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"narrow\"), \" cards are aligned to the left of the card regardless of whether they are clickable or flat.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards narrow clickable>\\n  <Card\\n    title=\\\"A top aligned icon\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Clickable top aligned icon...\\\"\\n    icon={<DummyIcon />}>\\n    The icon of this card should be top aligned.\\n  </Card>\\n  <Card\\n    title=\\\"A top aligned icon\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Clickable top aligned icon...\\\"\\n    icon={<DummyIcon />}>\\n    The icon of this card should be top aligned. This has more descriptive text than the latter.\\n  </Card>\\n</Cards>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Output\")), mdx(Cards, {\n    narrow: true,\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"A top aligned icon\",\n    href: \"/components/images\",\n    textLink: \"Clickable top aligned icon...\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"The icon of this card should be top aligned.\"), mdx(Card, {\n    title: \"A top aligned icon\",\n    href: \"/components/images\",\n    textLink: \"Clickable top aligned icon...\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"The icon of this card should be top aligned. This has more descriptive text than the latter.\"))), mdx(\"section\", {\n    \"id\": \"section-cards-with-markdown-in-body\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-markdown-in-body\"\n  }, \"Cards with Markdown in Body\")), mdx(\"section\", {\n    \"id\": \"section-bullet-list-in-body-of-flat-card\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"bullet-list-in-body-of-flat-card\"\n  }, \"Bullet List in Body of Flat Card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n<Card title=\\\"Bullet List Body\\\">\\n\\n* Item 1\\n* Item 2 (dot)\\n  * Sub-item (circle)\\n* Item 3\\n\\n</Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Bullet List Body\",\n    mdxType: \"Card\"\n  }, mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 2 (dot)\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sub-item (circle)\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 3\"))))), mdx(\"section\", {\n    \"id\": \"section-link-in-body-of-a-flat-card\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"link-in-body-of-a-flat-card\"\n  }, \"Link in Body of a Flat Card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card\\n    title=\\\"Link in Body of Flat\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Click here\\\"\\n    icon={<DummyIcon />}>\\n    This [link](/views/code-blocks) should render as a link.\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Link in Body of Flat\",\n    href: \"/components/images\",\n    textLink: \"Click here\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"This [link](/views/code-blocks) should render as a link.\"))), mdx(\"section\", {\n    \"id\": \"section-link-in-body-of-a-clickable-card\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"link-in-body-of-a-clickable-card\"\n  }, \"Link in Body of a Clickable Card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards clickable>\\n  <Card\\n    title=\\\"Link in Body of Clickable\\\"\\n    href=\\\"/components/images\\\"\\n    textLink=\\\"Click here\\\"\\n    icon={<DummyIcon />}>\\n    This [link](/views/code-blocks) should **not** render as a link.\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Link in Body\",\n    href: \"/components/images\",\n    textLink: \"Click here\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"This [link](/views/code-blocks) should **not** render as a link.\"))), mdx(\"section\", {\n    \"id\": \"section-cards-with-images\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-images\"\n  }, \"Cards with Images\")), mdx(\"section\", {\n    \"id\": \"section-flat-card-with-an-image\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"flat-card-with-an-image\"\n  }, \"Flat Card with an Image\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card image={<CardBannerOSSIcon/>}>\\n    Flat card with an image\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    image: mdx(CardBannerOSSIcon, {\n      mdxType: \"CardBannerOSSIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"Flat card with an image\"))), mdx(\"section\", {\n    \"id\": \"section-clickable-card-with-an-image\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"clickable-card-with-an-image\"\n  }, \"Clickable Card with an Image\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards clickable>\\n  <Card\\n    title=\\\"Clickable with Image\\\"\\n    href=\\\"/components/images\\\"\\n    image={<CardBannerMcDevsIcon />}>\\n    Clickable card with an image\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Clickable with Image\",\n    href: \"/components/images\",\n    image: mdx(CardBannerMcDevsIcon, {\n      mdxType: \"CardBannerMcDevsIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"Clickakble card with an image\"))), mdx(\"section\", {\n    \"id\": \"section-a-wide-card-with-an-image-and-an-icon\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"a-wide-card-with-an-image-and-an-icon\"\n  }, \"A Wide Card with an Image and an icon\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card\\n    image={<CardBannerMcDocsIcon />}\\n    icon={<DummyIcon />}>\\n    Wide card with an image and an icon\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    image: mdx(CardBannerMcDocsIcon, {\n      mdxType: \"CardBannerMcDocsIcon\"\n    }),\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"Wide card with an image and an icon\"))), mdx(\"section\", {\n    \"id\": \"section-a-narrow-card-with-an-image-and-an-icon\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"a-narrow-card-with-an-image-and-an-icon\"\n  }, \"A Narrow Card with an Image and an icon\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards narrow>\\n  <Card\\n    image={<CardBannerPlatformIcon />}\\n    icon={<DummyIcon />}>\\n    Narrow card with an image and an icon\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    narrow: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    image: mdx(CardBannerPlatformIcon, {\n      mdxType: \"CardBannerPlatformIcon\"\n    }),\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"Narrow card with an image and an icon\"))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"\"Cards\" Wrapper","url":"#cards-wrapper","items":[{"title":"Minimal form","url":"#minimal-form"},{"title":"All options configured","url":"#all-options-configured"}]},{"title":"\"Card\": the actual card","url":"#card-the-actual-card","items":[{"title":"Flat with Link","url":"#flat-with-link"},{"title":"Clickable with Link","url":"#clickable-with-link"},{"title":"Flat with Icon","url":"#flat-with-icon"}]},{"title":"Clickable (visually elevated)","url":"#clickable-visually-elevated"},{"title":"Cards with Icons","url":"#cards-with-icons"},{"title":"Cards with Markdown in Body","url":"#cards-with-markdown-in-body","items":[{"title":"Bullet List in Body of Flat Card","url":"#bullet-list-in-body-of-flat-card"},{"title":"Link in Body of a Flat Card","url":"#link-in-body-of-a-flat-card"},{"title":"Link in Body of a Clickable Card","url":"#link-in-body-of-a-clickable-card"}]},{"title":"Cards with Images","url":"#cards-with-images","items":[{"title":"Flat Card with an Image","url":"#flat-card-with-an-image"},{"title":"Clickable Card with an Image","url":"#clickable-card-with-an-image"},{"title":"A Wide Card with an Image and an icon","url":"#a-wide-card-with-an-image-and-an-icon"},{"title":"A Narrow Card with an Image and an icon","url":"#a-narrow-card-with-an-image-and-an-icon"}]}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":3}},"pageContext":{"slug":"/components/cards","shortTitle":"Cards","hasReleaseNotes":true}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989","801034918"]}