{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/card","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"2a62e255-18bd-585c-be84-f848e636be64","title":"Card","slug":"/contrast/react/components/card"},"body":"function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\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\": \"Card\",\n \"metaTitle\": \"Card Component for Contrast Bootstrap React\",\n \"metaDescription\": \"Building a Card Component using the Contrast Bootstrap React Package\"\n};\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(\"h1\", null, \"Card\"), mdx(\"p\", null, \"A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.\\nCard components display content build of different elements with characteristic shadows, depth and hover effects.\"), mdx(\"h2\", null, \"Basic Examples\"), mdx(\"p\", null, \"Basic Card example.\\nCards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.\"), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"img-fluid card-img\",\n src: \"/img/cardbg.png\",\n style: {\n \"width\": \"100%\"\n }\n }), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"div\", {\n className: \"card-title\"\n }, \"Basic\"), mdx(\"div\", {\n className: \"card-text\"\n }, \"This is just a card text Get important notifications about you or activity you've missed\"), mdx(\"div\", {\n className: \"d-flex pt-3 pb-3\"\n }, mdx(\"button\", {\n className: \"btn btn-primary\"\n }, \"Button\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n \\n Basic\\n This is just a card text Get important notifications about you or activity you've missed \\n \\n Button\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Simple Cards\"), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\"), mdx(\"div\", {\n className: \"d-flex justify-content-center\"\n }, mdx(\"button\", {\n className: \"btn btn-light btn-flat btn-rounded\"\n }, \"Button\")))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"button\", {\n className: \"btn btn-flat btn-block btn-light\"\n }, \"Button\"))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\"), mdx(\"button\", {\n className: \"btn btn-flat btn-rounded btn-light\"\n }, \"Button\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n Heading\\n Paragraph\\n
\\n \\n Button\\n \\n
\\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n Button\\n \\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n Button\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Bordered Cards\"), mdx(\"div\", {\n className: \"card card-border\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\"), mdx(\"div\", {\n className: \"d-flex justify-content-center\"\n }, mdx(\"button\", {\n className: \"btn btn-light btn-flat btn-rounded\"\n }, \"Button\")))), mdx(\"div\", {\n className: \"card card-border\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"button\", {\n className: \"btn btn-flat btn-block btn-light\"\n }, \"Button\"))), mdx(\"div\", {\n className: \"card card-border\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\"), mdx(\"button\", {\n className: \"btn btn-flat btn-rounded btn-light\"\n }, \"Button\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n Heading\\n Paragraph\\n
\\n \\n Button\\n \\n
\\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n Button\\n \\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n Button\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Artwork Top Cards\"), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"card-img img-fluid\",\n src: \"/img/cardbg.png\"\n }), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\"), mdx(\"div\", {\n className: \"d-flex justify-content-center\"\n }, mdx(\"button\", {\n className: \"btn btn-light btn-block\"\n }, \"Button\")))), mdx(\"div\", {\n className: \"card card-border\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"card-img img-fluid\",\n src: \"/img/cardbg.png\"\n }), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\"), mdx(\"button\", {\n className: \"btn btn-flat btn-light\"\n }, \"Button\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBCardImage, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n \\n Heading\\n Paragraph\\n
\\n \\n Button\\n \\n
\\n \\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n Button\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Artwork Middle Cards\"), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\")), mdx(\"div\", {\n className: \"cdb-iframe\",\n role: \"cdb-iframe\",\n src: \"https://www.youtube.com/embed/LebxiFwmYBc\"\n }), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"button\", {\n className: \"btn btn-light btn-flat btn-rounded\"\n }, \"Button\"))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\")), mdx(\"div\", {\n className: \"cdb-iframe\",\n role: \"cdb-iframe\",\n src: \"https://www.youtube.com/embed/LebxiFwmYBc\"\n }), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"button\", {\n className: \"btn btn-block btn-light btn-flat btn-rounded\"\n }, \"Button\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBView, CDBIframe, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n Heading\\n Paragraph\\n \\n \\n \\n \\n \\n \\n Button\\n \\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n \\n \\n \\n \\n \\n Button\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Widget Cards\"), mdx(Link, {\n to: \"/product/contrast-pro\",\n mdxType: \"Link\"\n }, mdx(\"span\", {\n className: \"badge badge-lg badge-pro\"\n }, \"Pro Component\")), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"div\", {\n className: \"lead\"\n }, \"Total Downloads\"), mdx(\"h2\", {\n className: \"card-title\"\n }, \"1,057,891\"), mdx(\"p\", {\n className: \"small text-muted\"\n }, \"Oct 1 - Dec 31,\", mdx(\"i\", {\n className: \"fa fa-globe\"\n }), \" Worldwide\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n Total Downloads\\n 1,057,891\\n Oct 1 - Dec 31, Worldwide\\n \\n \\n \\n );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Profile Display Card\"), mdx(\"div\", {\n \"className\": \"card\",\n \"style\": {\n \"width\": \"25rem\"\n }\n }, \"\\n \", mdx(\"img\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"card-img img-fluid\",\n \"src\": \"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg\"\n })), \"\\n \", mdx(\"img\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"pane-img position-relative mx-auto border\",\n \"style\": {\n \"marginTop\": \"-5rem\",\n \"width\": \"8rem\"\n },\n \"src\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU\"\n })), \"\\n \", mdx(\"div\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"card-body d-flex flex-column align-items-center my-4\"\n }), \"\\n \", mdx(\"h2\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"card-title\"\n }), \"Sam Russo\"), \"\\n \", mdx(\"p\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"card-text\"\n }), \"Senior Software Developer\"), \"\\n \", mdx(\"p\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"text-muted card-text\"\n }), \"Detroit, USA\"), \"\\n \", mdx(\"div\", {\n parentName: \"div\"\n }, \"\\n \", mdx(\"button\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"btn btn-sm btn-dark\"\n }), \"\\n \", mdx(\"i\", _extends({\n parentName: \"button\"\n }, {\n \"className\": \"fa fa-user-plus\"\n })), \" Connect\\n \"), \"\\n \", mdx(\"button\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"btn btn-warning btn-sm text-dark\"\n }), \"\\n Send Message\\n \"), \"\\n \"), \"\\n \")), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBPaneImage, CDBCardImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n \\n \\n Sam Russo\\n Senior Software Developer\\n Detroit, USA\\n
\\n Connect\\n Send Message \\n
\\n \\n \\n \\n );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Profile List Card\"), mdx(Link, {\n to: \"/product/contrast-pro\",\n mdxType: \"Link\"\n }, mdx(\"span\", {\n className: \"badge badge-lg badge-pro\"\n }, \"Pro Component\")), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"h2\", {\n className: \"card-title lead p-3 border-bottom\"\n }, \"Team Members\"), mdx(\"div\", {\n className: \"py-0 card-body\"\n }, mdx(\"div\", {\n className: \"pane mt-2\"\n }, mdx(\"img\", {\n className: \"pane-img pane-md\",\n src: \"/img/pane/pane1.png\"\n }), mdx(\"div\", {\n className: \"ml-3\"\n }, mdx(\"h2\", {\n className: \"card-title my-0 h6\"\n }, \"Warren Briggs\"), mdx(\"p\", {\n className: \"small m-0\"\n }, mdx(\"i\", {\n className: \"fa fa-circle small p-0 mr-1\"\n }), \"Online\")), mdx(\"button\", {\n className: \"btn btn-success btn-sm ml-auto flat\"\n }, \"Add\")), mdx(\"div\", {\n className: \"pane mt-4\"\n }, mdx(\"img\", {\n className: \"pane-img pane-md\",\n src: \"/img/pane/pane2.png\"\n }), mdx(\"div\", {\n className: \"ml-3\"\n }, mdx(\"h2\", {\n className: \"card-title my-0 h6\"\n }, \"Lu Chen\"), mdx(\"p\", {\n className: \"small m-0\"\n }, mdx(\"i\", {\n className: \"fa fa-circle small text-warning mr-1\"\n }), \"In a meeting\")), mdx(\"button\", {\n className: \"btn btn-success btn-sm ml-auto flat\"\n }, \"Add\")), mdx(\"div\", {\n className: \"pane mt-4\"\n }, mdx(\"img\", {\n className: \"pane-img pane-md\",\n src: \"/img/pane/pane3.png\"\n }), mdx(\"div\", {\n className: \"ml-3\"\n }, mdx(\"h2\", {\n className: \"card-title my-0 h6\"\n }, \"Lilah Loselev\"), mdx(\"p\", {\n className: \"small m-0\"\n }, mdx(\"i\", {\n className: \"fa fa-circle small text-muted mr-1\"\n }), \"Not Available\")), mdx(\"button\", {\n className: \"btn btn-success btn-sm ml-auto flat\"\n }, \"Add\")), mdx(\"div\", {\n className: \"pane my-4\"\n }, mdx(\"img\", {\n className: \"pane-img pane-md\",\n src: \"/img/pane/pane4.png\"\n }), mdx(\"div\", {\n className: \"ml-3\"\n }, mdx(\"h2\", {\n className: \"card-title my-0 h6\"\n }, \"Danny\"), mdx(\"p\", {\n className: \"small m-0\"\n }, mdx(\"i\", {\n className: \"fa fa-circle small text-danger mr-1\"\n }), \"Offline\")), mdx(\"button\", {\n className: \"btn btn-success btn-sm ml-auto flat\"\n }, \"Add\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBPane, CDBPaneImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n Team Members\\n \\n \\n \\n
\\n Warren Briggs\\n

Online

\\n
\\n Add\\n \\n \\n \\n
\\n Lu Chen\\n

In a meeting

\\n
\\n Add\\n \\n \\n \\n
\\n Lilah Loselev\\n

Not Available

\\n
\\n Add\\n \\n \\n \\n
\\n Danny\\n

Offline

\\n
\\n Add\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Artwork Full Cards\"), mdx(Link, {\n to: \"/product/contrast-pro\",\n mdxType: \"Link\"\n }, mdx(\"span\", {\n className: \"badge badge-lg badge-pro\"\n }, \"Pro Component\")), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\",\n \"backgroundImage\": \"url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg')\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"color\": \"white\"\n }\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\")), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"button\", {\n className: \"btn btn-light btn-rounded btn-flat\"\n }, \"Button\"))), mdx(\"div\", {\n className: \"card card-border\",\n style: {\n \"width\": \"25rem\",\n \"backgroundImage\": \"url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg')\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"color\": \"white\"\n }\n }, mdx(\"h2\", {\n className: \"card-title\"\n }, \"Heading\"), mdx(\"p\", {\n className: \"card-text\"\n }, \"Paragraph\")), mdx(\"div\", {\n className: \"card-body\"\n }, mdx(\"button\", {\n className: \"btn btn-light btn-block btn-rounded\"\n }, \"Button\"))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"position\": \"relative\",\n \"width\": \"25rem\",\n \"height\": \"33rem\",\n \"padding\": \"25px\",\n \"backgroundImage\": \"url('https://imgur.com/eltDhxZ.png')\",\n \"backgroundRepeat\": \"no-repeat\",\n \"backgroundPosition\": \"center\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"backgroundColor\": \"white\",\n \"width\": \"calc(100% - 50px)\",\n \"textAlign\": \"center\",\n \"align\": \"center\",\n \"position\": \"absolute\",\n \"bottom\": \"25px\"\n }\n }, mdx(\"h2\", _defineProperty({\n className: \"card-title\",\n style: {\n \"color\": \"#333333\"\n }\n }, \"className\", \"font-weight-normal\"), \"Chukwudi Mezue\"), mdx(\"p\", _defineProperty({\n className: \"card-text\",\n style: {\n \"color\": \"#333333\",\n \"fontSize\": \"0.9rem\"\n }\n }, \"className\", \"font-weight-lighter\"), \"Product Designer\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"card-text font-weight-light\"\n }, \"Enugu, Nigeria\"), mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"padding\": \"0 50px\",\n \"margin\": \"20px 0\"\n }\n }, mdx(\"i\", {\n className: \"fab fa-2x fa-facebook-f\",\n style: {\n \"color\": \"#333333\"\n }\n }), mdx(\"i\", {\n className: \"fab fa-2x fa-twitter\",\n style: {\n \"color\": \"#333333\"\n }\n }), mdx(\"i\", {\n className: \"fab fa-2x fa-instagram\",\n style: {\n \"color\": \"#333333\"\n }\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-block\"\n }, \"Add User\"))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"position\": \"relative\",\n \"width\": \"25rem\",\n \"height\": \"33rem\",\n \"backgroundImage\": \"url('https://imgur.com/eltDhxZ.png')\",\n \"backgroundRepeat\": \"no-repeat\",\n \"backgroundPosition\": \"center\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"backgroundColor\": \"white\",\n \"width\": \"calc(100% - 50px)\",\n \"textAlign\": \"left\",\n \"align\": \"center\",\n \"position\": \"absolute\",\n \"bottom\": \"0\"\n }\n }, mdx(\"h2\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-normal\"\n }, \"Mac Xenon\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\",\n \"fontSize\": \"0.9rem\"\n },\n className: \"font-weight-lighter\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-light\"\n }, \"Enugu, Nigeria\"), mdx(\"button\", {\n className: \"btn btn-dark btn0block\"\n }, \"Send Message\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n Heading\\n Paragraph\\n \\n \\n \\n Button\\n \\n \\n \\n \\n \\n Heading\\n Paragraph\\n \\n \\n \\n Button\\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n \\n \\n \\n \\n \\n Add User\\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n Send Message\\n \\n \\n \\n \\n );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Profile Cards\"), mdx(Link, {\n to: \"/product/contrast-pro\",\n mdxType: \"Link\"\n }, mdx(\"span\", {\n className: \"badge badge-lg badge-pro\"\n }, \"Pro Component\")), mdx(\"div\", {\n className: \"container\"\n }, mdx(\"div\", {\n className: \"card\",\n style: {\n \"position\": \"relative\",\n \"width\": \"25rem\",\n \"height\": \"33rem\",\n \"padding\": \"25px\",\n \"backgroundImage\": \"url('/img/rectangle.png')\",\n \"backgroundRepeat\": \"no-repeat\",\n \"backgroundPosition\": \"center\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"backgroundColor\": \"white\",\n \"width\": \"calc(100% - 50px)\",\n \"textAlign\": \"center\",\n \"align\": \"center\",\n \"position\": \"absolute\",\n \"bottom\": \"25px\"\n }\n }, mdx(\"h2\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-normal\"\n }, \"Mac Xenon\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\",\n \"fontSize\": \"0.9rem\"\n },\n className: \"font-weight-lighter\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-light\"\n }, \"Enugu, Nigeria\"), mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"padding\": \"0 50px\",\n \"margin\": \"20px 0\"\n }\n }, mdx(\"i\", {\n className: \"fab fa-2x fa-facebook-f\",\n style: {\n \"color\": \"#333333\"\n }\n }), mdx(\"i\", {\n className: \"fab fa-2x fa-twitter\",\n style: {\n \"color\": \"#333333\"\n }\n }), mdx(\"i\", {\n className: \"fab fa-2x fa-instagram\",\n style: {\n \"color\": \"#333333\"\n }\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-block\"\n }, \"Add User\"))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"position\": \"relative\",\n \"width\": \"25rem\",\n \"height\": \"33rem\",\n \"backgroundImage\": \"url('/img/rectangle.png')\",\n \"backgroundRepeat\": \"no-repeat\",\n \"backgroundPosition\": \"center\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"backgroundColor\": \"white\",\n \"width\": \"calc(100% - 50px)\",\n \"textAlign\": \"left\",\n \"align\": \"center\",\n \"position\": \"absolute\",\n \"bottom\": \"0\"\n }\n }, mdx(\"h2\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-normal\"\n }, \"Mac Xenon\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\",\n \"fontSize\": \"0.9rem\"\n },\n className: \"font-weight-lighter\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-light\"\n }, \"Enugu, Nigeria\"), mdx(\"button\", {\n className: \"btn btn-dark btn0block\"\n }, \"Send Message\"))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"position\": \"relative\",\n \"width\": \"25rem\",\n \"height\": \"33rem\",\n \"backgroundImage\": \"url('/img/rectangle.png')\",\n \"backgroundRepeat\": \"no-repeat\",\n \"backgroundPosition\": \"center\"\n }\n }, mdx(\"div\", {\n className: \"card-body\",\n style: {\n \"backgroundColor\": \"white\",\n \"width\": \"100%\",\n \"textAlign\": \"center\",\n \"position\": \"absolute\",\n \"bottom\": \"0\"\n }\n }, mdx(\"h2\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-normal\"\n }, \"Mac Xenon\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\",\n \"fontSize\": \"0.9rem\"\n },\n className: \"font-weight-lighter\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"color\": \"#333333\"\n },\n className: \"font-weight-light\"\n }, \"Enugu, Nigeria\"), mdx(\"button\", {\n className: \"btn btn-dark btn-block\"\n }, \"Send Message\"), mdx(\"div\", {\n style: {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"padding\": \"0 50px\",\n \"margin\": \"20px 0\"\n }\n }, mdx(\"button\", {\n className: \"btn btn-dark\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n }))))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"img-fluid w-100\",\n src: \"/img/uber.png\"\n }), mdx(\"img\", {\n style: {\n \"marginTop\": \"-5rem\",\n \"borderStyle\": \"solid\",\n \"borderWidth\": \"4px\"\n },\n className: \"mx-auto border-white rounded-circle\",\n width: \"130px\",\n src: \"/img/ellipse.png\"\n }), mdx(\"div\", {\n className: \"card-body d-flex flex-column align-items-center mb-4 pt-1\"\n }, mdx(\"h4\", null, \"Chukwudi Mezue\"), mdx(\"p\", {\n className: \"text-muted\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"fontSize\": \"16\",\n \"color\": \"#333\"\n }\n }, \"Enugu, Nigeria\"), mdx(\"p\", {\n style: {\n \"color\": \"#333\"\n }\n }, \"Creating High Quality Resources and tools to Aid developers during the developement of their projects\"), mdx(\"div\", {\n className: \"d-flex justify-content-between w-100\"\n }, mdx(\"button\", {\n className: \"w-50 mr-4 btn btn-dark\"\n }, \"Add User\"), mdx(\"button\", {\n className: \"w-50 btn btn-outline-dark\"\n }, \" Send Message \")))), mdx(\"div\", {\n className: \"card mt-4\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"img-fluid w-100\",\n src: \"/img/uber.png\"\n }), mdx(\"div\", {\n className: \"card-body d-flex justify-content-between\"\n }, mdx(\"img\", {\n style: {\n \"marginTop\": \"-6rem\",\n \"borderStyle\": \"solid\",\n \"borderWidth\": \"4px\"\n },\n className: \"border-white rounded-circle\",\n width: \"130px\",\n height: \"130px\",\n src: \"/img/ellipse.png\"\n }), mdx(\"div\", {\n className: \"align-items-left pt-1 pb-0\"\n }, mdx(\"h4\", null, \"Chukwudi Mezue\"), mdx(\"p\", {\n className: \"text-muted\"\n }, \"Product Designer\"))), mdx(\"div\", {\n className: \"card-body d-flex flex-column align-items-center mb-2\"\n }, mdx(\"p\", {\n style: {\n \"color\": \"#333\"\n }\n }, \"Creating High Quality Resources and tools to Aid developers during the developement of their projects\"), mdx(\"div\", {\n className: \"d-flex justify-content-between w-100\"\n }, mdx(\"button\", {\n className: \"w-50 mr-4 btn btn-dark\"\n }, \"Add User\"), mdx(\"button\", {\n className: \"w-50 btn btn-outline-dark\"\n }, \" Send Message \"))), mdx(\"div\", {\n style: {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"alignItems\": \"center\",\n \"padding\": \"0 20%\",\n \"margin\": \"0 0 20px\"\n }\n }, mdx(\"button\", {\n style: {\n \"height\": \"32px\"\n },\n className: \"btn btn-outline-dark btn-flat btn-sm\"\n }, mdx(\"i\", {\n className: \"fa-lg fab fa-facebook-f\"\n })), mdx(\"button\", {\n style: {\n \"height\": \"32px\"\n },\n className: \"btn btn-outline-dark btn-flat btn-sm\"\n }, mdx(\"i\", {\n className: \"fa-lg fab fa-twitter\"\n })), mdx(\"button\", {\n style: {\n \"height\": \"32px\"\n },\n className: \"btn btn-outline-dark btn-flat btn-sm\"\n }, mdx(\"i\", {\n className: \"fa-lg fab fa-instagram\"\n })))), mdx(\"div\", {\n className: \"card mt-4\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n style: {\n \"marginTop\": \"2rem\",\n \"borderStyle\": \"solid\",\n \"borderWidth\": \"4px\"\n },\n className: \"mx-auto border-white rounded-circle\",\n width: \"130px\",\n src: \"/img/ellipse.png\"\n }), mdx(\"div\", {\n className: \"card-body d-flex flex-column align-items-center mb-4 pt-1\"\n }, mdx(\"h4\", null, \"Chukwudi Mezue\"), mdx(\"p\", {\n className: \"text-muted\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"fontSize\": \"16\",\n \"color\": \"#333\"\n }\n }, \"Enugu, Nigeria\"), mdx(\"p\", {\n style: {\n \"color\": \"#333\"\n }\n }, \"Creating High Quality Resources and tools to Aid developers during the developement of their projects\"), mdx(\"div\", {\n className: \"w-100\"\n }, mdx(\"button\", {\n className: \"btn btn-block btn-dark\"\n }, \"Send Message\"), mdx(\"button\", {\n className: \"btn btn-block btn-outline-dark\"\n }, \" Send Message \")))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"img-fluid w-100\",\n src: \"/img/uber.png\"\n }), mdx(\"img\", {\n style: {\n \"marginTop\": \"-5rem\",\n \"borderStyle\": \"solid\",\n \"borderWidth\": \"4px\"\n },\n className: \"mx-auto border-white rounded-circle\",\n width: \"130px\",\n src: \"/img/ellipse.png\"\n }), mdx(\"div\", {\n className: \"card-body d-flex flex-column align-items-center mb-4 pt-1\"\n }, mdx(\"h4\", null, \"Chukwudi Mezue\"), mdx(\"p\", {\n className: \"text-muted\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"fontSize\": \"16\",\n \"color\": \"#333\"\n }\n }, \"Enugu, Nigeria\"), mdx(\"div\", {\n style: {\n \"width\": \"100%\",\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"padding\": \"0 70px\",\n \"margin\": \"10px 0 30px\"\n }\n }, mdx(\"i\", {\n className: \"fa-lg fa text-dark fa-facebook-f\"\n }), mdx(\"i\", {\n className: \"fa-lg fa text-dark fa-twitter\"\n }), mdx(\"i\", {\n className: \"fa-lg fa text-dark fa-instagram\"\n })), mdx(\"div\", {\n className: \"w-100\"\n }, mdx(\"button\", {\n className: \"btn btn-block btn-dark mb-3\"\n }, \"Add User\"), mdx(\"button\", {\n className: \"btn btn-block btn-outline-dark\"\n }, \" Send Message \")))), mdx(\"div\", {\n className: \"card mt-4\",\n style: {\n \"width\": \"25rem\"\n }\n }, mdx(\"img\", {\n className: \"img-fluid w-100\",\n src: \"/img/uber.png\"\n }), mdx(\"img\", {\n style: {\n \"marginTop\": \"-5rem\",\n \"borderStyle\": \"solid\",\n \"borderWidth\": \"4px\"\n },\n className: \"mx-auto border-white rounded-circle\",\n width: \"130px\",\n src: \"/img/ellipse.png\"\n }), mdx(\"div\", {\n className: \"card-body d-flex flex-column align-items-center mb-4 pt-1\"\n }, mdx(\"h4\", null, \"Chukwudi Mezue\"), mdx(\"p\", {\n className: \"text-muted\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"fontSize\": \"16\",\n \"color\": \"#333\"\n }\n }, \"Enugu, Nigeria\"), mdx(\"p\", {\n style: {\n \"color\": \"#333\",\n \"margin\": \"20px 0 30px\"\n }\n }, \"Creating High Quality Resources and tools to Aid developers during the developement of their projects\"), mdx(\"div\", {\n className: \"w-100\"\n }, mdx(\"button\", {\n className: \"btn btn-dark btn-block mb-0\"\n }, \"Send Message\")))), mdx(\"div\", {\n className: \"card\",\n style: {\n \"width\": \"25rem\",\n \"marginTop\": \"6rem\"\n }\n }, mdx(\"img\", {\n style: {\n \"marginTop\": \"-4rem\",\n \"borderStyle\": \"solid\",\n \"borderWidth\": \"4px\"\n },\n className: \"mx-auto border-white rounded-circle\",\n width: \"130px\",\n src: \"/img/ellipse.png\"\n }), mdx(\"div\", {\n className: \"card-body d-flex flex-column align-items-center mb-4 pt-1\"\n }, mdx(\"h4\", null, \"Chukwudi Mezue\"), mdx(\"p\", {\n className: \"text-muted\"\n }, \"Product Designer\"), mdx(\"p\", {\n style: {\n \"fontSize\": \"16\",\n \"color\": \"#333\"\n }\n }, \"Enugu, Nigeria\"), mdx(\"p\", {\n style: {\n \"color\": \"#333\"\n }\n }, \"Creating High Quality Resources and tools to Aid developers during the developement of their projects\"), mdx(\"div\", {\n className: \"w-100\"\n }, mdx(\"button\", {\n className: \"btn btn-dark btn-block mb-3\"\n }, \"Send Message\"), mdx(\"button\", {\n className: \"btn btn-outline-dark btn-block\"\n }, \" Send Message \"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBCardImage, CDBPaneImage, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n return (\\n \\n \\n \\n Mac Xenon\\n Product Designer\\n Enugu, Nigeria\\n \\n \\n \\n \\n \\n \\n Add User\\n \\n \\n \\n \\n \\n Mac Xenon\\n Product Designe\\n Enugu, Nigeria\\n \\n Send Message\\n \\n \\n \\n \\n \\n Mac Xenon\\n Product Designer\\n Enugu, Nigeria\\n \\n Send Message\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n \\n
\\n Add User\\n Send Message \\n
\\n \\n \\n \\n \\n \\n \\n
\\n Chukwudi Mezue\\n Product Designer\\n
\\n \\n \\n \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n \\n
\\n Add User\\n Send Message \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n \\n
\\n Send Message\\n Send Message \\n
\\n \\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n \\n \\n \\n \\n
\\n Add User\\n Send Message \\n
\\n \\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n \\n
\\n Send Message\\n
\\n \\n \\n \\n \\n \\n Chukwudi Mezue\\n Product Designer\\n Enugu, Nigeria\\n \\n Creating High Quality Resources and tools to Aid developers during the developement of\\n their projects\\n \\n
\\n Send Message\\n Send Message \\n
\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Card component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Card Import Statement\"), mdx(\"p\", null, \"You need to import the proper components first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBCardImage, CDBPane, CDBPaneImage, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBDropDownItem, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Card Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCard component.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"Name\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Type\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Default\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Description\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Example\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"className\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"div\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Changes default input tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"color\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Sets background color\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"border\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Gives border\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")))), mdx(\"p\", null, \"API Reference: Contrast Card Body Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardBody component.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"Name\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Type\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Default\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Description\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Example\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"className\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function or String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"div\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Changes default \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"cascade\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Switches the CardBody to cascade style mode\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")))), mdx(\"p\", null, \"API Reference: Contrast Card Image Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardImage component.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"Name\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Type\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Default\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Description\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Example\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"className\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function or String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"img\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Changes default \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"cascade\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Switches the CardBody to cascade style mode\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"hover\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Switches on hover behaviour\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"overlay\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"white-light\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Sets the color of hover overlay\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"src\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Source of the image\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"top\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Makes image fluid\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")))), mdx(\"p\", null, \"API Reference: Contrast Card Text Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardText component.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"Name\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Type\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Default\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Description\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Example\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"className\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function or String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"p\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Changes default \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"muted\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Mutes the text color\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"small\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Uses html \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \" as component's tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")))), mdx(\"p\", null, \"API Reference: Contrast Card Title Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardTitle component.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"Name\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Type\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Default\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Description\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Example\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"className\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function or String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"h4\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Changes default \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"sub\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Styles title as subtitle\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#card","title":"Card","items":[{"url":"#basic-examples","title":"Basic Examples"},{"url":"#simple-cards","title":"Simple Cards"},{"url":"#bordered-cards","title":"Bordered Cards"},{"url":"#artwork-top-cards","title":"Artwork Top Cards"},{"url":"#artwork-middle-cards","title":"Artwork Middle Cards"},{"url":"#widget-cards","title":"Widget Cards"},{"url":"#profile-display-card","title":"Profile Display Card"},{"url":"#profile-list-card","title":"Profile List Card"},{"url":"#artwork-full-cards","title":"Artwork Full Cards"},{"url":"#profile-cards","title":"Profile Cards"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-card-import-statement","title":"Contrast Card Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/card.mdx"},"frontmatter":{"metaTitle":"Card Component for Contrast Bootstrap React","metaDescription":"Building a Card Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"2a62e255-18bd-585c-be84-f848e636be64"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}