{"componentChunkName":"component---src-templates-posts-js","path":"/components/cards","result":{"data":{"mdx":{"id":"644dd3b5-c4dd-5dd9-bc50-6409dffd09f3","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  \"path\": \"/components/cards\",\n  \"excerpt\": \"Cards are surfaces that display content and actions on a single topic\"\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 Masthead = makeShortcode(\"Masthead\");\nvar UsageImage = makeShortcode(\"UsageImage\");\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(Masthead, {\n    title: \"Cards\",\n    subheader: \"Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on\\nthem in a way that clearly indicates hierarchy. Card layouts can vary to support the types of content they contain.\",\n    mdxType: \"Masthead\"\n  }), mdx(\"h2\", null, \"Example\"), mdx(\"h3\", null, \"Card Anatomy\"), mdx(\"p\", null, \"Cards look and behave the same across both mobile and desktop. The card container is the only required element of a card. All other elements are optional. Use the drop-down to see more examples.\"), mdx(CardStates, {\n    mdxType: \"CardStates\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"Positioning Guidelines\"), mdx(\"h3\", null, \"Content Positioning Example\"), mdx(\"p\", null, \"The minimum guides below give an example of how to position content within a card. It is important to remember to give content white-space. The margin and padding can differ depending on the type of content on the card but must be consistent within the same card.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"876px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/8292fd7c985b8739fde1e4ea76022897/1b1d5/Card_Positioning.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"45.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABTklEQVQoz4WS23KCMBRF+f/Pq2PH2pdCEAQVyP2CdPckoUofOj6sSU4m2dnnUiitoG4cahTQRkPrJ0qp19B7OdD7QYALjiIe2kHCCANtHV2g1diEcQ4+zAkXApzP5Hhzrh3shQSvIwopJWblwViD3f4dh+MnDh9HvO32aM89wn2BTSJ3hDmykOhTMJ77sCAICz5N2aG3HpfrgKoqcTrVK6dE0zSoa4qJZhO3bUsmGO0ZfPyINDhfU/bGo7/cSLBKDyLxctf3sNbCOU9QWlQSY2zap9jF2JBbEjRbQbsKluVDNDvMTn7dJpdN3scPGavQdWcqybx1KBG0p4sdKlbjq2REhXPXY+LiARcS48QxjFPaTzzHsYmphso+HdpBUacorTkXOzWB6jIv3y+JTXOWOn2V1OUBRZo5+k1LRaNi8iyu86j037n8F6HSe0GZ/ABEcbCRR7dN2QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Content Positioning\",\n    \"title\": \"Content Positioning\",\n    \"src\": \"/static/8292fd7c985b8739fde1e4ea76022897/1b1d5/Card_Positioning.png\",\n    \"srcSet\": [\"/static/8292fd7c985b8739fde1e4ea76022897/5a46d/Card_Positioning.png 300w\", \"/static/8292fd7c985b8739fde1e4ea76022897/0a47e/Card_Positioning.png 600w\", \"/static/8292fd7c985b8739fde1e4ea76022897/1b1d5/Card_Positioning.png 876w\"],\n    \"sizes\": \"(max-width: 876px) 100vw, 876px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"hr\", null), mdx(\"h2\", null, \"Usage\"), mdx(\"h4\", null, \"Cards\"), mdx(\"p\", null, \"Cards can be used to support a variety of layouts and follow these 3 principles. We should be careful not to use too many cards\\nand always consider the visual hierarchy of the interface.  \"), mdx(\"div\", {\n    className: \"cmpContainer\"\n  }, mdx(\"div\", {\n    className: landingItem.itemContainer\n  }, mdx(\"img\", {\n    className: landingItem.image,\n    src: cardOne\n  }), mdx(\"div\", {\n    className: landingItem.title\n  }, \"Contained\"), mdx(\"div\", {\n    className: landingItem.description\n  }, \"A card is identifiable as a single container element.\")), mdx(\"div\", {\n    className: landingItem.itemContainer\n  }, mdx(\"img\", {\n    className: landingItem.image,\n    src: cardTwo\n  }), mdx(\"div\", {\n    className: landingItem.title\n  }, \"Independent\"), mdx(\"div\", {\n    className: landingItem.description\n  }, \"A card can stand alone, without relying on surrounding elements for context.\")), mdx(\"div\", {\n    className: landingItem.itemContainer\n  }, mdx(\"img\", {\n    className: landingItem.image,\n    src: cardThree\n  }), mdx(\"div\", {\n    className: landingItem.title\n  }, \"Individual\"), mdx(\"div\", {\n    className: landingItem.description\n  }, \"A card cannot merge with another card, or divide into multiple cards.\"))), mdx(\"hr\", null), mdx(\"h4\", null, \"Best Practice\"), mdx(\"p\", null, \"Styling\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A card can stand alone, without relying on surrounding elements for context.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"All cards should look and behave consistently across the digital platform. The styling should not change.  \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards can expand and contract to the proportions of the information that they hold.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards can present information left-aligned or centralised.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dividers can be used to separate regions in cards or to indicate areas of a card that can expand.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards can be elevated to give information it contains prominence.  (See elevated card example in the drop-down)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards should not be used for complex elements like menus. \")), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, \"Use cards to give the main content prominence.\", mdx(\"p\", null, \"Use cards to contain related content and information. (See Law of Proximity and Common Region)\"), mdx(\"p\", null, \"Use dividers to separate content into groups or sections.\"), mdx(\"p\", null, \"Left align or centralise card content.\"), mdx(\"p\", null, \"Cards can be used on any coloured background.\"))), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  }, \"Don\\u2019t use cards to seperate related content.\", mdx(\"p\", null, \"Don\\u2019t right align content within a card. \"), mdx(\"p\", null, \"Don\\u2019t use cards for singular elements like titles or headings. \"), mdx(\"p\", null, \"Don\\u2019t change the styling of cards. \"))), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Caution\",\n    mdxType: \"UsageBlock\"\n  }, \"Be cautious when using smaller cards nested inside larger cards. It\\u2019s important not to clutter the UI, think about the hierarchy, prominence and elevation.\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Cards"}}},"pageContext":{"id":"644dd3b5-c4dd-5dd9-bc50-6409dffd09f3"}}}