{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/widgets","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"fd2cac17-7ffd-58a1-9cab-abc0a8b77b16","title":"Widgets","slug":"/contrast/react/widgets"},"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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Widgets\",\n  \"metaTitle\": \"Contrast Bootstrap React Components\",\n  \"metaDescription\": \"These are Contrast Bootstrap React Components \"\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(\"p\", null, \"These are some components that can be found in the Contrast Bootstrap React library\"), mdx(\"i\", null), mdx(\"h2\", null, \"Blog 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(\"div\", {\n    className: \"card-body p-1\"\n  }, mdx(\"div\", {\n    className: \"pane border-bottom p-3\"\n  }, mdx(\"img\", {\n    className: \"pane-img pane-sm\",\n    src: \"/img/pane/pane2.png\"\n  }), mdx(\"p\", {\n    className: \"card-text m-0 ml-3\"\n  }, \"techlead\"), mdx(\"div\", {\n    className: \"dropdown ml-auto\"\n  }, mdx(\"button\", {\n    className: \"btn btn-white btn-flat mr-0\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, mdx(\"i\", {\n    className: \"text-dark fa fa-ellipsis-h\"\n  })), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item disabled\",\n    href: \"#\"\n  }, \"Edit Profile\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item divider\",\n    href: \"#\"\n  })), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\",\n    href: \"#\"\n  }, \"Action 1\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\",\n    href: \"#\"\n  }, \"Action 2\"))))), mdx(\"img\", {\n    className: \"card-img img-fluid rounded-0 my-3\",\n    src: \"/img/cardbg.png\"\n  }), mdx(\"div\", {\n    className: \"mx-2 mb-4\"\n  }, mdx(\"h2\", {\n    className: \"card-title\"\n  }, \"A Dummy blog title sample\"), mdx(\"p\", {\n    className: \"card-text text-muted mb-5\"\n  }, \"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\"), mdx(\"div\", null, mdx(\"button\", {\n    className: \"btn btn-dark py-1 px-2\"\n  }, mdx(\"i\", {\n    className: \"fa fa-arrow-up pl-0\"\n  }), \" 11\"), mdx(\"button\", {\n    className: \"btn btn-dark py-1 px-2\"\n  }, mdx(\"i\", {\n    className: \"fa fa-arrow-down pl-0\"\n  }), \"2\")), mdx(\"div\", {\n    className: \"my-2\"\n  }, mdx(\"button\", {\n    flat: true,\n    className: \"p-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fa fa-comments\"\n  }), \"21.4k\"), mdx(\"button\", {\n    className: \"p-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fa fa-share\"\n  }), \"Share\"), mdx(\"button\", {\n    className: \"btn btn-warning text-dark py-1\"\n  }, mdx(\"i\", {\n    className: \"fa fa-save\"\n  }), \"Save\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBDropDownItem, CDBPane, CDBPaneImage, CDBCardImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardBody className=\\\"p-1\\\">\\n              <CDBPane className=\\\"border-bottom p-3\\\">\\n                <CDBPaneImage size=\\\"xs\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" />\\n                <CDBCardText className=\\\"m-0 ml-3\\\">techlead</CDBCardText>\\n                <CDBDropDown className=\\\"ml-auto\\\">\\n                  <CDBDropDownToggle color=\\\"white\\\"><CDBIcon className=\\\"text-muted\\\" fas icon=\\\"ellipsis-h\\\" /></CDBDropDownToggle>\\n                  <CDBDropDownMenu>\\n                    <CDBDropDownItem disabled>Edit Profile</CDBDropDownItem>\\n                    <CDBDropDownItem divider />\\n                    <CDBDropDownItem>Action 1</CDBDropDownItem>\\n                    <CDBDropDownItem>Action 2</CDBDropDownItem>\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n              </CDBPane>\\n              <CDBCardImage\\n                className=\\\"img-fluid my-3\\\"\\n                src=\\\"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg\\\"\\n              />\\n              <div className=\\\"mx-2 mb-4\\\">\\n                <CDBCardTitle>A Dummy blog title sample</CDBCardTitle>\\n                <CDBCardText className=\\\"text-muted mb-5\\\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\\n                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\\n                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</CDBCardText>\\n                <div>\\n                  <CDBBtn color=\\\"dark\\\" className=\\\"py-1 mr-2\\\"><CDBIcon className=\\\"pl-0\\\" fas icon=\\\"arrow-up\\\"/>11</CDBBtn>\\n                  <CDBBtn color=\\\"dark\\\" className=\\\"py-1\\\"><CDBIcon className=\\\"pl-0\\\" fas icon=\\\"arrow-down\\\"/>2</CDBBtn>\\n                </div>\\n                <div className=\\\"my-2\\\">\\n                  <CDBBtn flat color=\\\"none\\\" className=\\\"p-0\\\"><CDBIcon far icon=\\\"comments\\\"/>21.4k</CDBBtn>\\n                  <CDBBtn flat color=\\\"none\\\" className=\\\"p-0 mx-4\\\"><CDBIcon fas icon=\\\"share\\\"/>Share</CDBBtn>\\n                  <CDBBtn color=\\\"warning\\\" className=\\\"py-1\\\"><CDBIcon far icon=\\\"save\\\"/>Save</CDBBtn>\\n                </div>\\n              </div>\\n            </CDBCardBody>\\n          </CDBCard>\\n    </CDBContainer>\\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    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardBody>\\n              <CDBCardTitle className=\\\"lead\\\">Total Downloads</CDBCardTitle>\\n              <CDBCardTitle tag=\\\"h2\\\">1,057,891</CDBCardTitle>\\n              <CDBCardText className=\\\"small text-muted\\\">Oct 1 - Dec 31,<CDBIcon fas icon=\\\"globe\\\"/> Worldwide</CDBCardText>\\n            </CDBCardBody>\\n          </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Counter 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(\"div\", {\n    className: \"card-body\"\n  }, mdx(\"i\", {\n    className: \"fas fa-line-chart fa-2x p-4 bg-primary\"\n  }), mdx(\"div\", {\n    className: \"mt-2 lead\"\n  }, \"Customers\"), mdx(\"h2\", {\n    className: \"card-title\",\n    style: {\n      \"fontSize\": \"1.8em\"\n    }\n  }, \"852k\"), mdx(\"p\", {\n    className: \"small text-muted\"\n  }, \"Oct 1 - Dec 31,\", mdx(\"i\", {\n    className: \"fa fa-globe\"\n  }), \" Worldwide\"), mdx(\"p\", {\n    className: \"text-success\"\n  }, mdx(\"i\", {\n    className: \"fa fa-angle-up\"\n  }), \" 27.4%\", mdx(\"span\", {\n    style: {\n      \"fontSize\": \"0.9em\"\n    },\n    className: \"ml-2 text-muted\"\n  }, \"Since last quarter\")))), 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    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardBody>\\n              <CDBIcon size=\\\"2x\\\" className=\\\"p-4 bg-primary\\\" fas icon=\\\"chart-line\\\"/>\\n              <CDBCardTitle className=\\\"lead\\\">Customers</CDBCardTitle>\\n              <CDBCardTitle tag=\\\"h2\\\">852k</CDBCardTitle>\\n              <CDBCardText className=\\\"small text-muted\\\">Oct 1 - Dec 31,<CDBIcon fas icon=\\\"globe\\\"/> Worldwide</CDBCardText>\\n              <CDBCardText className=\\\"text-success\\\">\\n                <CDBIcon fas icon=\\\"angle-up\\\"/> 27.4%\\n                <span style={{fontSize:\\\"0.9em\\\"}} className=\\\"ml-2 text-muted\\\">Since last quarter</span>\\n              </CDBCardText>\\n            </CDBCardBody>\\n          </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Invoices\"), 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 p-0\"\n  }, mdx(\"div\", {\n    className: \"pane py-2 px-3 border-bottom\"\n  }, mdx(\"div\", null, mdx(\"h2\", {\n    className: \"card-title mb-3 mt-0 lead\"\n  }, \"Order History\"), mdx(\"p\", {\n    className: \"text-muted\"\n  }, \"Manage billing information and view receipts\"))), mdx(\"div\", {\n    className: \"pane py-2 px-3 border-bottom\"\n  }, mdx(\"div\", null, mdx(\"h2\", {\n    className: \"card-title mb-3 mt-0 h6\"\n  }, \"Invoice #120345\"), mdx(\"p\", {\n    className: \"text-muted\"\n  }, \"Billed August 21, 2019\")), mdx(\"button\", {\n    className: \"btn btn-flat btn-sm btn-outline-success ml-auto\"\n  }, \"Pay now\")), mdx(\"div\", {\n    className: \"pane py-2 px-3\"\n  }, mdx(\"div\", null, mdx(\"h2\", {\n    className: \"card-title mb-3 mt-0 h6\"\n  }, \"Invoice #120344\"), mdx(\"p\", {\n    className: \"text-muted\"\n  }, \"Billed July 21, 2019\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBPane, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardBody className=\\\"p-0\\\">\\n              <CDBPane className=\\\"py-3 px-3 border-bottom\\\">\\n                <div>\\n                  <CDBCardTitle className=\\\"mb-3 mt-0 lead\\\" >Order History</CDBCardTitle>\\n                  <CDBCardText className=\\\"text-muted\\\">Manage billing information and view receipts</CDBCardText>\\n                </div>\\n              </CDBPane>\\n              <CDBPane className=\\\"py-3 px-3 border-bottom\\\">\\n                <div>\\n                  <CDBCardTitle className=\\\"mb-3 mt-0 h6\\\" >Invoice #120345</CDBCardTitle>\\n                  <CDBCardText className=\\\"text-muted\\\">Billed August 21, 2019</CDBCardText>\\n                </div>\\n                <CDBBtn outline size=\\\"small\\\" className=\\\"ml-auto\\\" color=\\\"success\\\" flat>Pay now</CDBBtn>\\n              </CDBPane>\\n              <CDBPane className=\\\"py-3 px-3\\\">\\n                <div>\\n                  <CDBCardTitle className=\\\"mb-3 mt-0 h6\\\" >Invoice #120344</CDBCardTitle>\\n                  <CDBCardText className=\\\"text-muted\\\">Billed July 21, 2019</CDBCardText>\\n                </div>\\n              </CDBPane>\\n            </CDBCardBody>\\n          </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Ratings\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"img\", {\n    src: ratingcard,\n    alt: \"ratingcard\"\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBProgress, CDBRating, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardBody>\\n              <CDBCardTitle className=\\\"lead\\\">Average Rating</CDBCardTitle>\\n              <CDBCardTitle tag=\\\"h2\\\">4.7</CDBCardTitle>\\n              <CDBRating feedback/>\\n              <CDBCardText className=\\\"text-muted\\\">Based on 231,156 ratings</CDBCardText>\\n              <div className=\\\"text-muted\\\">\\n                <div className=\\\"d-flex align-items-center\\\">\\n                  <span>5</span>\\n                  <CDBIcon fas icon=\\\"star\\\" className=\\\"mr-3\\\"/>\\n                  <CDBProgress value={50} colors=\\\"success\\\"/>\\n                </div>\\n                <div className=\\\"d-flex align-items-center\\\">\\n                  <span>4</span>\\n                  <CDBIcon fas icon=\\\"star\\\" className=\\\"mr-3\\\"/>\\n                  <CDBProgress value={40} colors=\\\"warning\\\"/>\\n                </div>\\n                <div className=\\\"d-flex align-items-center\\\">\\n                  <span>3</span>\\n                  <CDBIcon fas icon=\\\"star\\\" className=\\\"mr-3\\\"/>\\n                  <CDBProgress value={30} colors=\\\"primary\\\"/>\\n                </div>\\n                <div className=\\\"d-flex align-items-center\\\">\\n                  <span>2</span>\\n                  <CDBIcon fas icon=\\\"star\\\" className=\\\"mr-3\\\"/>\\n                  <CDBProgress value={20} colors=\\\"dark\\\"/>\\n                </div>\\n                <div className=\\\"d-flex align-items-center\\\">\\n                  <span>1</span>\\n                  <CDBIcon fas icon=\\\"star\\\" className=\\\"mr-3\\\"/>\\n                  <CDBProgress value={10} colors=\\\"danger\\\"/>\\n                </div>\\n              </div>\\n            </CDBCardBody>\\n          </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Events\"), 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-4 border-bottom\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Events\"), mdx(\"div\", {\n    className: \"pane border-bottom p-3\"\n  }, mdx(\"i\", {\n    className: \"far fa-3x fa-calendar-alt text-danger ml-2\",\n    \"aria-hidden\": \"true\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h2\", {\n    className: \"card-title mb-1 lead\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Newmarket Nights\"), mdx(\"p\", {\n    className: \"card-text mb-2\"\n  }, \"Organized by University of Oxford\"), mdx(\"p\", {\n    className: \"card-text mb-0 small text-muted\"\n  }, \"Time: 6:00AM\"), mdx(\"p\", {\n    className: \"card-text mb-0 small text-muted\"\n  }, \"Place: Cambridge Boat Club, Cambridge\"))), mdx(\"div\", {\n    className: \"pane border-bottom p-3\"\n  }, mdx(\"i\", {\n    className: \"far fa-3x fa-calendar-alt text-danger\",\n    \"aria-hidden\": \"true\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h2\", {\n    className: \"card-title mb-1 lead\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Noco Hemp Expo\"), mdx(\"p\", {\n    className: \"card-text mb-2\"\n  }, \"Organized by University of Oxford\"), mdx(\"p\", {\n    className: \"card-text mb-0 small text-muted\"\n  }, \"Thu, 12 Sep - Sat, 18 Sep 2020\"), mdx(\"p\", {\n    className: \"card-text mb-0 small text-muted\"\n  }, \"Place: Denver Expo Club, USA\"))), mdx(\"div\", {\n    className: \"pane border-bottom p-3\"\n  }, mdx(\"i\", {\n    className: \"far fa-3x fa-calendar-alt text-danger ml-2\",\n    \"aria-hidden\": \"true\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h2\", {\n    className: \"card-title mb-1 lead\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Canadian National Exhibition (CNE)\"), mdx(\"p\", {\n    className: \"card-text mb-2\"\n  }, \"Organized by University of Oxford\"), mdx(\"p\", {\n    className: \"card-text mb-0 small text-muted\"\n  }, \"Fri, 20 Sep - Mon, 07 Oct 2020\"), mdx(\"p\", {\n    className: \"card-text mb-0 small text-muted\"\n  }, \"Place: Toronto , Canada\"))), mdx(\"p\", {\n    className: \"card-text p-4 text-center pointer border-top\"\n  }, \"See All\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBPane, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardTitle className=\\\"lead p-4 border-bottom\\\">Events</CDBCardTitle>\\n            <CDBCardBody className=\\\"py-0\\\">\\n              <CDBPane className=\\\"border-bottom pb-2\\\">\\n                <CDBIcon size=\\\"4x\\\" far icon=\\\"calendar-alt text-danger\\\"/>\\n                <div className=\\\"ml-3\\\">\\n                  <CDBCardTitle className=\\\"mb-1 font-weight-bold lead\\\">New market Nights</CDBCardTitle>\\n                  <CDBCardText className=\\\"mb-2\\\">Organized by University of Oxford</CDBCardText>\\n                  <CDBCardText className=\\\"mb-0 small text-muted\\\">Time: 6:00AM</CDBCardText>\\n                  <CDBCardText className=\\\"mb-0 small text-muted\\\">Place: Cambridge Boat Club, Cambridge</CDBCardText>\\n                </div>\\n              </CDBPane>\\n              <CDBPane className=\\\"border-bottom pb-2\\\">\\n                <CDBIcon size=\\\"4x\\\" far icon=\\\"calendar-alt text-danger\\\"/>\\n                <div className=\\\"ml-3\\\">\\n                  <CDBCardTitle className=\\\"mb-1 font-weight-bold lead\\\">Noco Hemp Expo</CDBCardTitle>\\n                  <CDBCardText className=\\\"mb-2\\\">Organized by University of Oxford</CDBCardText>\\n                  <CDBCardText className=\\\"mb-0 small text-muted\\\">Thu, 12 Sep - Sat, 18 Sep 2020</CDBCardText>\\n                  <CDBCardText className=\\\"mb-0 small text-muted\\\">PPlace: Denver Expo Club, USA</CDBCardText>\\n                </div>\\n              </CDBPane>\\n              <CDBPane className=\\\"pb-2\\\">\\n                <CDBIcon size=\\\"4x\\\" far icon=\\\"calendar-alt text-danger\\\"/>\\n                <div className=\\\"ml-3\\\">\\n                  <CDBCardTitle className=\\\"mb-1 font-weight-bold lead\\\">Canadian National Exhibition (CNE)</CDBCardTitle>\\n                  <CDBCardText className=\\\"mb-2\\\">Organized by University of Oxford</CDBCardText>\\n                  <CDBCardText className=\\\"mb-0 small text-muted\\\">Fri, 20 Sep - Mon, 07 Oct 2020</CDBCardText>\\n                  <CDBCardText className=\\\"mb-0 small text-muted\\\">Place: Toronto , Canada</CDBCardText>\\n                </div>\\n              </CDBPane>\\n            </CDBCardBody>\\n            <CDBCardText className=\\\"p-4 text-center pointer border-top\\\">See All</CDBCardText>\\n          </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Alerts and Notifications\"), 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 py-0\"\n  }, mdx(\"h2\", {\n    className: \"card-title lead m-0 py-3 border-bottom\"\n  }, \"Alerts & Notifications\"), mdx(\"div\", {\n    className: \"pane py-3 border-bottom\"\n  }, mdx(\"div\", null, mdx(\"div\", {\n    className: \"card-title my-0 mb-2 h6\"\n  }, \"Company News\"), mdx(\"p\", {\n    className: \"small m-0\"\n  }, \"Get Rocket news, announcements, and product updates\")), mdx(\"div\", {\n    className: \"custom-check ml-auto\"\n  }, mdx(\"input\", {\n    className: \"custom-check-input\",\n    type: \"checkbox\",\n    value: \"\",\n    id: \"defaultCheck1\"\n  }), mdx(\"label\", {\n    className: \"custom-check-label\",\n    htmlFor: \"defaultCheck1\"\n  }))), mdx(\"div\", {\n    className: \"pane py-3 border-bottom\"\n  }, mdx(\"div\", null, mdx(\"div\", {\n    className: \"card-title my-0 mb-2 h6\"\n  }, \"Account Activity\"), mdx(\"p\", {\n    className: \"small m-0\"\n  }, \"Get important notifications about you or activity you've missed\")), mdx(\"div\", {\n    className: \"custom-check ml-auto\"\n  }, mdx(\"input\", {\n    className: \"custom-check-input\",\n    type: \"checkbox\",\n    value: \"\",\n    id: \"defaultCheck2\",\n    checked: true\n  }), mdx(\"label\", {\n    className: \"custom-check-label\",\n    htmlFor: \"defaultCheck2\"\n  }))), mdx(\"div\", {\n    className: \"pane py-3\"\n  }, mdx(\"div\", null, mdx(\"h2\", {\n    className: \"card-title my-0 mb-2 h6\"\n  }, \"Meetups Near You\"), mdx(\"p\", {\n    className: \"small m-0\"\n  }, \"Get an email when a Dribbble Meetup is posted close to my location\")), mdx(\"div\", {\n    className: \"custom-check ml-auto\"\n  }, mdx(\"input\", {\n    className: \"custom-check-input\",\n    type: \"checkbox\",\n    value: \"\",\n    id: \"defaultCheck3\"\n  }), mdx(\"label\", {\n    className: \"custom-check-label\",\n    htmlFor: \"defaultCheck3\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBPane, CDBCheckbox, CDBCardBody, CDBCardTitle, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Card = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBCard style={{width: \\\"25rem\\\"}}>\\n            <CDBCardBody className=\\\"py-0\\\">\\n              <CDBCardTitle className=\\\"lead m-0 py-3 border-bottom\\\">Alerts & Notifications</CDBCardTitle>\\n              <CDBPane className=\\\"py-3 border-bottom\\\">\\n                <div>\\n                  <CDBCardTitle className=\\\"my-0 mb-2 h6\\\" >Company News</CDBCardTitle>\\n                  <p className=\\\"small m-0\\\">Get Rocket news, announcements, and product updates</p>\\n                </div>\\n                <CDBCheckbox className=\\\"ml-auto\\\"/>\\n              </CDBPane>\\n              <CDBPane className=\\\"py-3 border-bottom\\\">\\n                <div>\\n                  <CDBCardTitle className=\\\"my-0 mb-2 h6\\\" >Account Activity</CDBCardTitle>\\n                  <p className=\\\"small m-0\\\">Get important notifications about you or activity you've missed</p>\\n                </div>\\n                <CDBCheckbox className=\\\"ml-auto\\\"/>\\n              </CDBPane>\\n              <CDBPane className=\\\"py-3\\\">\\n                <div>\\n                  <CDBCardTitle className=\\\"my-0 mb-2 h6\\\" >Meetups Near You</CDBCardTitle>\\n                  <p className=\\\"small m-0\\\">Get an email when a Dribbble Meetup is posted close to my location</p>\\n                </div>\\n                <CDBCheckbox className=\\\"ml-auto\\\"/>\\n              </CDBPane>\\n            </CDBCardBody>\\n          </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about these widgets. 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, \"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  }), \"<CDBCard className=\\\"myClass\\\" ... />\")), 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  }), \"<CDBCard tag=\\\"div\\\" ... />\")), 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  }), \"<CDBCard color=\\\"dark\\\" .../>\")), 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  }), \"<CDBCard border .../>\")))), 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  }), \"<CDBCardBody className=\\\"myClass\\\" ... />\")), 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  }), \"<CDBCardBody tag=\\\"div\\\" ... />\")), 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  }), \"<CDBCardBody cascade .../>\")))), 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  }), \"<CDBCardImage className=\\\"myClass\\\" ... />\")), 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  }), \"<CDBCardImage tag=\\\"div\\\" ... />\")), 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  }), \"<CDBCardImage cascade .../>\")), 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  }), \"<CDBCardImage hover .../>\")), 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  }), \"<CDBCardImage overlay=\\\"white-light\\\" ... />\")), 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  }), \"<CDBCardImage src=\\\"image_src\\\" ... />\")), 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  }), \"<CDBCardImage top .../>\")))), 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  }), \"<CDBCardText className=\\\"myClass\\\" ... />\")), 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  }), \"<CDBCardText tag=\\\"p\\\" ... />\")), 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  }), \"<CDBCardText muted .../>\")), 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  }), \"<CDBCardText small .../>\")))), 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  }), \"<CDBCardTitle className=\\\"myClass\\\" ... />\")), 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  }), \"<CDBCardTitle tag=\\\"h1\\\" ... />\")), 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  }), \"<CDBCardTitle sub .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"items":[{"url":"#blog-card","title":"Blog Card"},{"url":"#widget-cards","title":"Widget Cards"},{"url":"#counter-card","title":"Counter Card"},{"url":"#invoices","title":"Invoices"},{"url":"#ratings","title":"Ratings"},{"url":"#events","title":"Events"},{"url":"#alerts-and-notifications","title":"Alerts and Notifications"}]},{"url":"#api","title":"API","items":[{"url":"#import-statement","title":"Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/widgets.mdx"},"frontmatter":{"metaTitle":"Contrast Bootstrap React Components","metaDescription":"These are Contrast Bootstrap React Components "}},"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":"fd2cac17-7ffd-58a1-9cab-abc0a8b77b16"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}