{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/writing/markdown",
    "result": {"data":{"contentPage":{"title":"Markdown & MDX","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"allowWideContentLayout":true,"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\": \"Markdown & MDX\",\n  \"wideLayout\": true,\n  \"navLevels\": 2\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 Warning = makeShortcode(\"Warning\");\nvar SideBySide = makeShortcode(\"SideBySide\");\nvar Info = makeShortcode(\"Info\");\nvar Anchor = makeShortcode(\"Anchor\");\nvar Cards = makeShortcode(\"Cards\");\nvar Card = makeShortcode(\"Card\");\nvar CardBannerOSSIcon = makeShortcode(\"CardBannerOSSIcon\");\nvar CardBannerMcDevsIcon = makeShortcode(\"CardBannerMcDevsIcon\");\nvar DummyIcon = makeShortcode(\"DummyIcon\");\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    \"id\": \"section-titles-and-headings\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"titles-and-headings\"\n  }, \"Titles and headings\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All content pages start with a title, followed by the subtitle and content. The title is defined using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" key in the frontmatter of the MDX file, followed by the subtitle, defined using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Subtitle>\"), \" tag.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"---\\ntitle: Title of the page\\n---\\n\\n<Subtitle>\\n\\nShort sentence with the main use case and benefits of the feature.\\n\\n</Subtitle>\\n\\n# Headers\\n\\nYou can use standard Markdown syntax for headings.\\n\\nThe first line of content is closely bound to the heading with a smaller margin. Heading levels 1,2, and 3 appear in the right-hand index navigation by default, which helps readers understand the page's content without reading or scrolling through them.\\n\\n# Level 1 heading\\n\\nThey have the biggest font than other headings, and bound to the left margin of the page.\\n\\n## Level 2 heading\\n\\nThey have a smaller font than the level 1 headings, and are also bound to the left margin of the page.\\n\\n### Level 3 heading\\n\\nThey have the smallest font compared to the other headings, and are slightly indented to th right from the left margin of the page.\\n\\n#### Level 4 heading\\n\\nAny headings after level 3 are rendered and aligned the same as level 3 headings, but do not appear on the right-hand index navigation as level 3 headings.\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The rendered page can be seen \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/documentation/writing/sample\"\n  }, \"here\"), \".\"), mdx(Warning, {\n    mdxType: \"Warning\"\n  }, \"Avoid using links, code formatting, or any other style in headings.\")), mdx(\"section\", {\n    \"id\": \"section-text-formatting\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"text-formatting\"\n  }, \"Text formatting\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use standard Markdown syntax for formatting text.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Bold text\")), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"**Bold text**\\n\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Italicized text\")), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"_Italicized text_\\n\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"strong\", {\n    parentName: \"em\"\n  }, \"Bold and italicized text\"))), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"_**Bold and italicized text**_\\n\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Monospaced text\")), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"`Monospaced text`\\n\")))))), mdx(\"section\", {\n    \"id\": \"section-paragraph-break\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"paragraph-break\"\n  }, \"Paragraph break\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"Add a blank line to introduce paragraph breaks.\\n\\nThis is how a paragraph break is rendered.\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Add a blank line to introduce paragraph breaks.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This is how a paragraph break is rendered.\"))), mdx(\"section\", {\n    \"id\": \"section-line-break\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"line-break\"\n  }, \"Line break\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"Add a `\\\\` at the end of a sentence to introduce a line break.\\\\\\nThis is how a line break is rendered.\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Add a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\\\"), \" at the end of a sentence to introduce a line break.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"This is how a line break is rendered.\"))), mdx(\"section\", {\n    \"id\": \"section-bulleted-list\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"bulleted-list\"\n  }, \"Bulleted list\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"Use bulleted lists to list items that have no particular order or sequence.\\n- Item 1\\n  - Sub-item 1\\n- Item 2\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use bulleted lists to list items that have no particular order or sequence.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 1\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sub-item 1\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 2\")))), mdx(\"section\", {\n    \"id\": \"section-numbered-list\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"numbered-list\"\n  }, \"Numbered list\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"Use numbered lists to list items that follow a particular order or sequence.\\n1. Step 1\\n2. Step 2\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use numbered lists to list items that follow a particular order or sequence.\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Step 1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Step 2\")))), mdx(\"section\", {\n    \"id\": \"section-tables\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"tables\"\n  }, \"Tables\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We strongly prefer bulleted lists to tables for consistency, visual styling, and Markdown formatting reasons.\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"| Column A | Column B | Column C |\\n| -------- | -------- | -------- |\\n| A1       | B1       | C1       |\\n| A2       | B2       | C2       |\\n| A3       | B3       | C3       |\\n\")), 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  }, \"Column A\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Column B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Column C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C2\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C3\")))))), mdx(\"section\", {\n    \"id\": \"section-special-mentions\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"special-mentions\"\n  }, \"Special mentions\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Special mentions are limited to Info or Warning boxes in our documentation. Place them (before or after a sentence) in relevance to the context being discussed for better clarity. Limit the usage of notices, to where necessary, to avoid reducing its effectiveness in emphasizing important information.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Info box\")), mdx(Info, {\n    mdxType: \"Info\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"An Info box is used to:\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"emphasize points or reminders.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"point out exceptions from the standard behavior described in the respective section.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"indicate possible side effects that are not obvious or expected in the first place.\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Warning box\")), mdx(Warning, {\n    mdxType: \"Warning\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"A Warning box is used to warn users about the possibility of issues or data loss.\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When using Markdown syntax within, leave an empty line between the content and element tags for the formatting to render.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Multiple paragraphs:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Info>\\n\\nParagraph A\\n\\nParagraph B\\n\\n</Info>\\n\")), mdx(Info, {\n    mdxType: \"Info\"\n  }, mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Paragraph A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Paragraph B\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Bulleted list:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Info>\\n\\n- Item A\\n- Item B\\n\\n</Info>\\n\")), mdx(Info, {\n    mdxType: \"Info\"\n  }, mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item B\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Ordered list:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Info>\\n\\n1. Item A\\n2. Item B\\n\\n</Info>\\n\")), mdx(Info, {\n    mdxType: \"Info\"\n  }, mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Item A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Item B\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Code block:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Info>\\n\\n```\\na code block\\n```\\n\\n</Info>\\n\")), mdx(Info, {\n    mdxType: \"Info\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"a code block\\n\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Table:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Info>\\n\\n| Column A | Column B | Column C |\\n| -------- | -------- | -------- |\\n| A1       | B1       | C1       |\\n| A2       | B2       | C2       |\\n| A3       | B3       | C3       |\\n\\n</Info>\\n\")), mdx(Info, {\n    mdxType: \"Info\"\n  }, 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  }, \"Column A\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Column B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Column C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C2\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C3\"))))))), mdx(\"section\", {\n    \"id\": \"section-links\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"links\"\n  }, \"Links\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Links are rendered differently based on the target.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a different website:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](https://commercetools.com)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://commercetools.com\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"external-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outbound link that tracks via Google Analytics.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to an empty string:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link]()\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gatsby-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Empty link to the same page.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a heading anchor on the same page:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](#links)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#links\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"anchor-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Jumps to that position without visible scrolling or reload.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a heading anchor on the same page, but using the full path:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](/writing/markdown#links)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/writing/markdown#links\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"anchor-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Jumps to that position without visible scrolling or reload.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to another page on this site, but using a full path:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](/writing/pages)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/writing/pages\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gatsby-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gatsby link, history navigation.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to another page on this site with a specific anchor to a page on this site:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](/#links)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/#links\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gatsby-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gatsby link, history navigation, and directly jumps to the anchor element position.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to another page on this site using a relative upwards traversal path:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](../writing/navigation)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"../writing/navigation\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gatsby-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gatsby link, history navigation, to a parent folder.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a sub-page of this one (omitting the trailing slash):\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](nested/link-target)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"nested/link-target\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gatsby-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gatsby link, history navigation, to a sub folder.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a sub-page of this one (including the trailing slash):\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](nested/link-target/)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"nested/link-target/\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gatsby-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gatsby link, history navigation, to a sub folder.\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a page of another internal site using a full URL (recommended):\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](https://docs.commercetools.com/site-template)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://docs.commercetools.com/site-template\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"internal-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Regular HTML link (only in production mode).\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to a page of another internal site:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](/../site-template/)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/../site-template/\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"internal-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Regular HTML link (only in production mode).\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link to static files:\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[Link](/downloads/hello.txt)\\n[Link](/downloads/hello.json)\\n[Link](/html/hello.html)\\n\")), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Link\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Outcome\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/downloads/hello.txt\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"static-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Regular HTML link pointing to the hello.txt page\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/downloads/hello.json\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"static-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Regular HTML link pointing to the hello.json page\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"/documentation/html/hello.html\"\n  }, \"Link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"static-link\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Regular HTML link pointing to the hello.html page (HTML pages do not work in dev mode)\")))))))), mdx(\"section\", {\n    \"id\": \"section-custom-anchors\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"custom-anchors\"\n  }, \"Custom anchors\")), mdx(\"section\", {\n    \"id\": \"section-anchor-in-a-line\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"anchor-in-a-line\"\n  }, \"Anchor in a line\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[This link jumps to the anchored line.](#any-html-id-compatible-string-expected-usage)\\n\\nThe anchor is placed in this line. <Anchor name=\\\"any-html-id-compatible-string-expected-usage\\\" />\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#any-html-id-compatible-string-expected-usage\"\n  }, \"This link jumps to the anchored line.\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The anchor is placed in this line. \", mdx(Anchor, {\n    name: \"any-html-id-compatible-string-expected-usage\",\n    mdxType: \"Anchor\"\n  }))), mdx(\"section\", {\n    \"id\": \"section-anchor-with-children-links\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"anchor-with-children-links\"\n  }, \"Anchor with children links\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#any-html-id-compatible-string-with-children\"\n  }, \"This link jumps to the anchored line.\")), mdx(Anchor, {\n    name: \"any-html-id-compatible-string-with-children\",\n    mdxType: \"Anchor\"\n  }, \"No text is allowed here.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Anchor name=\\\"any-html-id-compatible-string-with-children\\\" >\\n  No text is allowed here.\\n</Anchor>\\n\"))), mdx(\"section\", {\n    \"id\": \"section-anchor-in-a-title\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"anchor-in-a-title\"\n  }, \"Anchor in a title\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[This link jumps to the anchored title.](#any-html-id-compatible-string-in-a-title)\\n\\n### The anchor is placed in this title <Anchor name=\\\"any-html-id-compatible-string-in-a-title\\\" />\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#any-html-id-compatible-string-in-a-title\"\n  }, \"This link jumps to the anchored title.\"))), mdx(\"section\", {\n    \"id\": \"section-the-anchor-is-placed-in-this-title-\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"the-anchor-is-placed-in-this-title-\"\n  }, \"The anchor is placed in this title \", mdx(Anchor, {\n    name: \"any-html-id-compatible-string-in-a-title\",\n    mdxType: \"Anchor\"\n  }))), mdx(\"section\", {\n    \"id\": \"section-anchor-in-a-list\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"anchor-in-a-list\"\n  }, \"Anchor in a list\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"[This link jumps to the anchored item in the list.](#any-html-id-compatible-string-in-a-list)\\n- Item 1 <Anchor name=\\\"any-html-id-compatible-string-in-a-list\\\" />\\n- Item 2\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#any-html-id-compatible-string-in-a-list\"\n  }, \"This link jumps to the anchored item in the list.\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 1 \", mdx(Anchor, {\n    name: \"any-html-id-compatible-string-in-a-list\",\n    mdxType: \"Anchor\"\n  })), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 2\"))), mdx(\"section\", {\n    \"id\": \"section-cards\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"cards\"\n  }, \"Cards\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A card, by default, is flat and of regular width. Two regular cards and three narrow cards can be stacked side by side (except in mobile viewports) in microsite landing pages. You can also use a narrow card of reduced width by passing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"narrow\"), \" in the syntax. It is also possible to make these cards clickable by passing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clickable\"), \" in the syntax.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Flat - \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Use case\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Clickable - \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Use case\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Regular - \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Use case\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Narrow - \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Use case\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The following properties can be used to define the content within the card:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fitContentColumn\"), \" (boolean): automatically set to cards on landing pages. However, it is rendered differently for cards used in content pages.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" (string): use to set a title for a card, no Markdown allowed.(Does \\\"no markdown\\\" mean that formatting isn't applicable?)\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"smallTitle\"), \" (boolean): use to reduce and set a smaller font size to card titles.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"textLink\"), \" (string): use to set the bottom link text. If not set, the bottom link is not rendered at all.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \" (string): use to set the target of the bottom link and whole card (if \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clickable\"), \" is set). If \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clickable\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"textLink\"), \" isn't set, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \" has no effect.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"icon\"), \" (component): use to reserve a 48x48px space for an icon in the card.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"image\"), \" (component): use to reserve a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"define pixels\"), \" space for an image in the card.\")))), mdx(\"section\", {\n    \"id\": \"section-cards-with-no-properties-defined\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-no-properties-defined\"\n  }, \"Cards with no properties defined\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This is an example of a set of cards with no properties defined. It is flat and of regular width as the parameters \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clickable\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"narrow\"), \" are not defined. It only contains the body as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" is not defined.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card>Card A</Card>\\n  <Card>Card B</Card>\\n  <Card>Card C</Card>\\n  <Card>Card D</Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    mdxType: \"Card\"\n  }, \"Card A\"), mdx(Card, {\n    mdxType: \"Card\"\n  }, \"Card B\"), mdx(Card, {\n    mdxType: \"Card\"\n  }, \"Card C\"), mdx(Card, {\n    mdxType: \"Card\"\n  }, \"Card D\"))), mdx(\"section\", {\n    \"id\": \"section-cards-with-a-list-in-the-body\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-a-list-in-the-body\"\n  }, \"Cards with a list in the body\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is also possible to have a list in the body of the card. Lists are usually used in flat cards as you can provide multiple target links for multiple list entries, which is not the case for \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#clickable-card\"\n  }, \"clickable cards\"), \" that have only one target link.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card title=\\\"Card with bullet list\\\">\\n    - Item 1 - Item 2 - Sub-item 1 - Item 3\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Card with bullet list\",\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\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sub-item 1\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Item 3\"))))), mdx(\"section\", {\n    \"id\": \"section-cards-with-a-link\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-a-link\"\n  }, \"Cards with a link\")), mdx(\"section\", {\n    \"id\": \"section-flat-card\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"flat-card\"\n  }, \"Flat card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card\\n    title=\\\"Title of the card\\\"\\n    href=\\\"/writing/navigation\\\"\\n    textLink=\\\"Read more about navigation\\\"\\n  >\\n    In a flat card, only the target link is clickable.\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Title of the card\",\n    href: \"/writing/navigation\",\n    textLink: \"Read more about navigation\",\n    mdxType: \"Card\"\n  }, \"In a flat card, only the target link is clickable.\"))), mdx(\"section\", {\n    \"id\": \"section-clickable-card\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"clickable-card\"\n  }, \"Clickable card\"), mdx(Info, {\n    mdxType: \"Info\"\n  }, \"Clickable cards must have a href set.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"They have one card-level target link (href) and no other links in the content. The target link (href) can be repeated as a link at the bottom by setting a card link label.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards clickable>\\n  <Card\\n    title=\\\"Title of the card\\\"\\n    href=\\\"/writing/navigation\\\"\\n    textLink=\\\"Read more about navigation\\\"\\n  >\\n    In a clickable card, the complete card is a clickable target.\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Title of the card\",\n    href: \"/writing/navigation\",\n    textLink: \"Read more about navigation\",\n    mdxType: \"Card\"\n  }, \"In a clickable card, the complete card is a clickable target.\"))), mdx(\"section\", {\n    \"id\": \"section-cards-with-an-image\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-an-image\"\n  }, \"Cards with an image\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Images are not supported for free-form in-content cards, but only in places that are fully designed and implemented by developers. An image is sized into the width of the card.\")), mdx(\"section\", {\n    \"id\": \"section-flat-card-1\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"flat-card-1\"\n  }, \"Flat card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n<Card\\n  title=\\\"Title of the card\\\"\\n  image={<CardBannerOSSIcon />}\\n>\\n  Flat card with an image\\n</Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Title of the 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-1\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"clickable-card-1\"\n  }, \"Clickable card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards clickable>\\n  <Card\\n    title=\\\"Title of the card\\\"\\n    href=\\\"/writing/navigation\\\"\\n    image={<CardBannerMcDevsIcon />}\\n  >\\n    Clickable card with an image\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Title of the card\",\n    href: \"/writing/navigation\",\n    image: mdx(CardBannerMcDevsIcon, {\n      mdxType: \"CardBannerMcDevsIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"Clickable card with an image\"))), mdx(\"section\", {\n    \"id\": \"section-cards-with-an-icon\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-an-icon\"\n  }, \"Cards with an icon\"), mdx(Info, {\n    mdxType: \"Info\"\n  }, mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Only icons provided in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://uikit.commercetools.com/?path=/story/components-icons--all-icons\"\n  }, \"UI Kit\"), \" are supported. They fit in a 48x48px square aligned at the top or left of a card.\"))), mdx(\"section\", {\n    \"id\": \"section-flat-card-2\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"flat-card-2\"\n  }, \"Flat card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards>\\n  <Card\\n    title=\\\"Title of the card\\\"\\n    icon={<DummyIcon />}\\n    href=\\\"/writing/navigation\\\"\\n    textLink=\\\"Read more about images\\\"\\n  >\\n    Icons in regular cards are aligned to the top regardless of whether they are\\n    clickable or flat.\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Title of the card\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    href: \"/writing/navigation\",\n    textLink: \"Read more about images\",\n    mdxType: \"Card\"\n  }, \"Icons in regular cards are aligned to the top regardless of whether they are clickable or flat.\"))), mdx(\"section\", {\n    \"id\": \"section-clickable-card-2\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"clickable-card-2\"\n  }, \"Clickable card\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Cards narrow clickable>\\n  <Card\\n    title=\\\"Title of the card\\\"\\n    href=\\\"/writing/navigation\\\"\\n    textLink=\\\"Read more about images\\\"\\n    icon={<DummyIcon />}\\n  >\\n    Icons in narrow cards are aligned to the left regardless of whether they are\\n    clickable or flat.\\n  </Card>\\n</Cards>\\n\")), mdx(Cards, {\n    narrow: true,\n    clickable: true,\n    mdxType: \"Cards\"\n  }, mdx(Card, {\n    title: \"Title of the card\",\n    href: \"/writing/navigation\",\n    textLink: \"Read more about images\",\n    icon: mdx(DummyIcon, {\n      mdxType: \"DummyIcon\"\n    }),\n    mdxType: \"Card\"\n  }, \"Icons in narrow cards are aligned to the left regardless of whether they are clickable or flat.\"))), mdx(\"section\", {\n    \"id\": \"section-cards-with-an-image-and-icon\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"cards-with-an-image-and-icon\"\n  }, \"Cards with an image and icon\")), mdx(\"section\", {\n    \"id\": \"section-regular-card\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"regular-card\"\n  }, \"Regular card\"), 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  >\\n    Regular card with an image and 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  }, \"Regular card with an image and icon\"))), mdx(\"section\", {\n    \"id\": \"section-narrow-card\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"narrow-card\"\n  }, \"Narrow card\"), 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  >\\n    Narrow card with an image and 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 icon\"))), mdx(\"section\", {\n    \"id\": \"section-rss-feed\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"rss-feed\"\n  }, \"RSS feed\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"RSS feed is an online file that notifies users of our latest content updates.\"), mdx(Info, {\n    mdxType: \"Info\"\n  }, \"RSS feeds are only generated in production builds.\")), mdx(\"section\", {\n    \"id\": \"section-table-with-one-feed\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"table-with-one-feed\"\n  }, \"Table with one feed\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"<RssFeeds dataSources={[\\n\\\"/docs-smoke-test/releases/feed.xml\\\"\\n]}/>\\n\")))), mdx(\"section\", {\n    \"id\": \"section-table-with-multiple-feeds\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"table-with-multiple-feeds\"\n  }, \"Table with multiple feeds\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"<RssFeeds dataSources={[\\n\\\"/docs-smoke-test/releases/feed.xml\\\",\\n\\\"/api-docs-smoke-test/releases/feed.xml\\\"\\n]}/>\\n\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Titles and headings","url":"#titles-and-headings"},{"title":"Text formatting","url":"#text-formatting","items":[{"title":"Paragraph break","url":"#paragraph-break"},{"title":"Line break","url":"#line-break"},{"title":"Bulleted list","url":"#bulleted-list"},{"title":"Numbered list","url":"#numbered-list"},{"title":"Tables","url":"#tables"}]},{"title":"Special mentions","url":"#special-mentions"},{"title":"Links","url":"#links"},{"title":"Custom anchors","url":"#custom-anchors","items":[{"title":"Anchor in a line","url":"#anchor-in-a-line"},{"title":"Anchor with children links","url":"#anchor-with-children-links"},{"title":"Anchor in a title","url":"#anchor-in-a-title","items":[{"title":"The anchor is placed in this title","url":"#the-anchor-is-placed-in-this-title-"}]},{"title":"Anchor in a list","url":"#anchor-in-a-list"}]},{"title":"Cards","url":"#cards","items":[{"title":"Cards with no properties defined","url":"#cards-with-no-properties-defined","items":[{"title":"Cards with a list in the body","url":"#cards-with-a-list-in-the-body"}]},{"title":"Cards with a link","url":"#cards-with-a-link","items":[{"title":"Flat card","url":"#flat-card"},{"title":"Clickable card","url":"#clickable-card"}]},{"title":"Cards with an image","url":"#cards-with-an-image","items":[{"title":"Flat card","url":"#flat-card-1"},{"title":"Clickable card","url":"#clickable-card-1"}]},{"title":"Cards with an icon","url":"#cards-with-an-icon","items":[{"title":"Flat card","url":"#flat-card-2"},{"title":"Clickable card","url":"#clickable-card-2"}]},{"title":"Cards with an image and icon","url":"#cards-with-an-image-and-icon","items":[{"title":"Regular card","url":"#regular-card"},{"title":"Narrow card","url":"#narrow-card"}]}]},{"title":"RSS feed","url":"#rss-feed","items":[{"title":"Table with one feed","url":"#table-with-one-feed"},{"title":"Table with multiple feeds","url":"#table-with-multiple-feeds"}]}]},"navLevels":2,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":4}},"pageContext":{"slug":"/writing/markdown","shortTitle":"Markdown & MDX","hasReleaseNotes":false}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}