{"componentChunkName":"component---packages-gatsby-theme-docs-src-templates-page-content-js","path":"/components/cards","result":{"data":{"contentPage":{"title":"Cards","websitePrimaryColor":"#1a1a1a","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"body":"function _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/* @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 layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\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  }, \"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(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"trial & error led to a minimum width of ca 250px for narrow three-aside cards and ca 332px for two-aside cards.\"))), 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(\"section\", {\n    \"id\": \"section-cards-wrapper\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\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(\"section\", {\n    \"id\": \"section-minimal-form\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"minimal-form\"\n  }), \"Minimal form\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\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(\"section\", {\n    \"id\": \"section-output\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"output\"\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\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"all-options-configured\"\n  }), \"All options configured\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"<Cards clickable narrow smallTitle>\\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(\"section\", {\n    \"id\": \"section-output-1\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"output-1\"\n  }), \"Output\"), mdx(Cards, {\n    clickable: true,\n    narrow: true,\n    smallTitle: true,\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-card-the-actual-card\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"flat-with-link\"\n  }), \"Flat with Link\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\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</Cards>\\n\"))), mdx(\"section\", {\n    \"id\": \"section-output-2\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"output-2\"\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(\"section\", {\n    \"id\": \"section-clickable-with-link\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"pre\"\n  }, {\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(\"section\", {\n    \"id\": \"section-output-3\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"output-3\"\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\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"<Cards smallTitle>\\n  <Card\\n    icon={Icon.ShoppingList}\\n    title=\\\"A smaller title\\\">Example Text on a card with an icon.</Card>\\n</Cards>\\n\"))), mdx(\"section\", {\n    \"id\": \"section-output-4\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"output-4\"\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    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\", _extends({\n    parentName: \"section\"\n  }, {\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-embedded-mdx-in-the-component-body\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"embedded-mdx-in-the-component-body\"\n  }), \"Embedded MDX in the Component Body\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The MDX spec and implementation allows for putting two blank lines to allow fully rendered markdown inside a JSX component. Because the cards must render markdown in the body differently than the same markdown would be rendered in the page body the implementation must either block the situation (for example detecting that the children aren't text but finished components) or override the renderer to use the MD fragment renderer instead.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"<Card>\\n\\n## Disallowed Subsection Heading\\nThis would render like the full page body and should be prevented or not done\\n\\nEven  | Tables |\\n------|--------|\\nwould | work   |\\n\\n\\n</Card>\\n\"))), mdx(\"section\", {\n    \"id\": \"section-output-5\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", _extends({\n    parentName: \"section\"\n  }, {\n    \"id\": \"output-5\"\n  }), \"Output\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"(breaks the build until card is implemented)\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"\"Cards\" Wrapper","url":"#cards-wrapper","items":[{"title":"Minimal form","url":"#minimal-form","items":[{"title":"Output","url":"#output"}]},{"title":"All options configured","url":"#all-options-configured","items":[{"title":"Output","url":"#output-1"}]}]},{"title":"\"Card\": the actual card","url":"#card-the-actual-card","items":[{"title":"Flat with Link","url":"#flat-with-link","items":[{"title":"Output","url":"#output-2"}]},{"title":"Clickable with Link","url":"#clickable-with-link","items":[{"title":"Output","url":"#output-3"}]},{"title":"Flat with Icon","url":"#flat-with-icon","items":[{"title":"Output","url":"#output-4"}]}]},{"title":"Clickable (visually elevated)","url":"#clickable-visually-elevated"},{"title":"Embedded MDX in the Component Body","url":"#embedded-mdx-in-the-component-body","items":[{"title":"Output","url":"#output-5"}]}]}}},"pageContext":{"slug":"/components/cards","shortTitle":"Cards","hasReleaseNotes":true}}}