{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/panels","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"bdc34a79-0a2c-57ac-b88e-b5a5a6e8c0b1","title":"Panel","slug":"/contrast/react/components/panels"},"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\": \"Panel\",\n  \"metaTitle\": \"Panel Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a Panel Component using the Contrast Bootstrap React Package\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar CDBBadge = makeShortcode(\"CDBBadge\");\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, \"Panel\"), mdx(\"p\", null, \"Panels are the flexible and extensible content containers with multiple variants, which include a wide variety of content, contextual background colors, and powerful display options. Panels are similar to cards, but they don't include media.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Dropdown\"), 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  }, \"\\n    \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"panel\",\n    \"style\": {\n      \"width\": \"25rem\"\n    }\n  }), \"\\n        \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"panel-body\"\n  }), \"\\n          \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"pane d-flex align-items-center mt-0 mb-3\"\n  }), \"\\n            \", mdx(\"img\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"pane-img pane-md\",\n    \"src\": \"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\",\n    \"alt\": \"paneImage\"\n  })), \"\\n            \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"ml-3\"\n  }), \"\\n              \", mdx(\"h6\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"m-0\",\n    \"style\": {\n      \"fontWeight\": \"600\"\n    }\n  }), \"Warren Briggs\"), \"\\n              \", mdx(\"p\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"m-0 pane-item\"\n  }), \"Chicago\"), \"\\n            \"), \"\\n            \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"dropdown p-0 ml-auto pane-item\"\n  }), \"\\n              \", mdx(\"i\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"fa fa-ellipsis-h\",\n    \"id\": \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }), \"\\n              \"), \"\\n              \", mdx(\"ul\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"dropdown-menu\",\n    \"aria-labelled-by\": [\"dropdownMenuButton\"]\n  }), \"\\n                \", mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"span\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"dropdown-item\"\n  }), \"Action\")), \"\\n                \", mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"span\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"dropdown-item\"\n  }), \"Another action\")), \"\\n                \", mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"span\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"dropdown-item\"\n  }), \"Something else here\")), \"\\n              \"), \"\\n            \"), \"\\n          \"), \"\\n          \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"card-text\"\n  }), \"\\n            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\\n          \"), \"\\n          \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"small card-text mt-2\"\n  }), \"\\n            \", mdx(\"i\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"far fa-thumbs-up mr-1\"\n  })), \"127 likes\\n            \", mdx(\"i\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"far fa-comment mr-1 ml-2\"\n  })), \"54 comments\\n          \"), \"\\n        \"), \"\\n    \")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBPanel, CDBPanelTitle, CDBPanelText, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBPane, CDBIcon, CDBPaneImage, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Panel = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBPanel>\\n              <CDBPane>\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" />\\n                <div className=\\\"ml-3\\\">\\n                  <CDBPanelTitle>Warren Briggs</CDBPanelTitle>\\n                  <CDBPanelText small>Chicago</CDBPanelText>\\n                </div>\\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              <CDBPanelText className=\\\"my-3\\\">\\n                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\\n              </CDBPanelText>\\n              <CDBPanelText small>\\n                <CDBIcon far icon=\\\"thumbs-up\\\"/>127 likes\\n                <CDBIcon className=\\\"ml-2\\\" far icon=\\\"comment\\\"/>54 comments\\n              </CDBPanelText>\\n            </CDBPanel>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Panel;\\n\")), mdx(\"h2\", null, \"Panel with Users\"), 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: \"panel\",\n    style: {\n      \"width\": \"25rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"panel-img\"\n  }, mdx(\"img\", {\n    className: \"w-100\",\n    src: \"/img/cardbg.png\",\n    alt: \"\"\n  })), mdx(\"div\", {\n    className: \"panel-body\"\n  }, mdx(\"div\", {\n    className: \"panel-title\",\n    style: {\n      \"fontSize\": \"2em\"\n    }\n  }, \"Bristol\"), mdx(\"div\", {\n    className: \"panel-text\"\n  }, \"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"), mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane2.png\"\n  }), mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane3.png\"\n  }), mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane4.png\"\n  })))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBPanel,CDBPanelTitle, CDBPanelText, CDBCardImage, CDBPaneImage, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Panel = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBPanel className=\\\"p-0\\\">\\n              <CDBCardImage className=\\\"img-fluid\\\" src=\\\"/img/cardbg.png\\\" />\\n              <div className=\\\"m-3\\\">\\n                <CDBPanelTitle tag=\\\"h2\\\" >Bristol</CDBPanelTitle>\\n                <CDBPanelText className=\\\"my-3\\\">\\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\\n                  tempor incididunt ut labore et dolore magna aliqua.\\n                </CDBPanelText>\\n                <CDBPaneImage size=\\\"sm\\\" src=\\\"/img/pane/pane1.png\\\" />\\n                <CDBPaneImage size=\\\"sm\\\" className=\\\"mx-2\\\" src=\\\"/img/pane/pane2.png\\\" />\\n                <CDBPaneImage size=\\\"sm\\\" src=\\\"/img/pane/pane3.png\\\" />\\n              </div>\\n            </CDBPanel>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Panel;\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Label\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"panel\",\n    style: {\n      \"width\": \"20rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"panel-body\"\n  }, mdx(\"div\", {\n    className: \"panel-label\"\n  }, mdx(\"div\", {\n    className: \"badge bg-dark\"\n  }, \"Label 1\"), mdx(\"div\", {\n    className: \"badge bg-warning mx-1\"\n  }, \"Label 2\"), mdx(\"div\", {\n    className: \"badge bg-danger\"\n  }, \"Label 3\")), mdx(\"div\", {\n    className: \"panel-title font-weight-light\",\n    style: {\n      \"fontSize\": \"1.8em\"\n    }\n  }, \"Moon Fevers\"), mdx(\"div\", {\n    className: \"panel-text\"\n  }, \"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"), mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane3.png\"\n  }), mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane5.png\"\n  })))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBPanel,CDBPanelTitle, CDBPanelText, CDBBadge, CDBIcon, CDBPaneImage, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Panel = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBPanel>\\n              <CDBBadge color=\\\"dark\\\" flat>Label 1</CDBBadge>\\n              <CDBBadge color=\\\"warning\\\" className=\\\"mx-1\\\" flat>Label 2</CDBBadge>\\n              <CDBBadge color=\\\"danger\\\" flat>Label 3</CDBBadge>\\n              <div className=\\\"mt-3 d-flex align-items-center\\\">\\n                <CDBPanelTitle tag=\\\"h3\\\" >Moon Fever</CDBPanelTitle>\\n                <CDBIcon className=\\\"ml-auto\\\" fas icon=\\\"chart-line\\\"/>\\n              </div>\\n              <CDBPanelText className=\\\"my-3\\\">\\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\\n                tempor incididunt\\n              </CDBPanelText>\\n              <CDBPaneImage size=\\\"sm\\\" src=\\\"/img/pane/pane1.png\\\" />\\n              <CDBPaneImage size=\\\"sm\\\" src=\\\"/img/pane/pane2.png\\\" />\\n            </CDBPanel>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Panel;\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Pane List\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"panel\",\n    style: {\n      \"width\": \"20rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"panel-body\"\n  }, mdx(\"div\", {\n    className: \"d-flex justify-content-between align-item-center mb-1\"\n  }, mdx(\"p\", {\n    className: \"mb-0\"\n  }, \"My Messages\"), mdx(\"div\", {\n    className: \"dropdown p-0\"\n  }, mdx(\"i\", {\n    className: \"fa fa-ellipsis-h\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }), mdx(\"ul\", {\n    className: \"dropdown-menu\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Action\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Another action\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Something else here\"))))), mdx(\"div\", {\n    className: \"pane d-flex align-items-center\"\n  }, mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane4.png\",\n    alt: \"\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h6\", {\n    className: \"m-0\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Warren Briggs\"), mdx(\"p\", {\n    className: \"m-0 pane-item\"\n  }, \"Cooking\")), mdx(\"p\", {\n    className: \"ml-auto pane-item\"\n  }, \"5mins Ago\")), mdx(\"div\", {\n    className: \"pane d-flex align-items-center\"\n  }, mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane5.png\",\n    alt: \"\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h6\", {\n    className: \"m-0\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Lu Chen\"), mdx(\"p\", {\n    className: \"m-0 pane-item\"\n  }, \"Cooking\")), mdx(\"p\", {\n    className: \"ml-auto pane-item\"\n  }, \"5mins Ago\")), mdx(\"div\", {\n    className: \"pane d-flex align-items-center\"\n  }, mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane1.png\",\n    alt: \"\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h6\", {\n    className: \"m-0\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Sam\"), mdx(\"p\", {\n    className: \"m-0 pane-item\"\n  }, \"Cooking\")), mdx(\"p\", {\n    className: \"ml-auto pane-item\"\n  }, \"5mins Ago\")), mdx(\"div\", {\n    className: \"pane d-flex align-items-center\"\n  }, mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane2.png\",\n    alt: \"\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h6\", {\n    className: \"m-0\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Danny\"), mdx(\"p\", {\n    className: \"m-0 pane-item\"\n  }, \"Cooking\")), mdx(\"p\", {\n    className: \"ml-auto pane-item\"\n  }, \"5mins Ago\")), mdx(\"div\", {\n    className: \"pane d-flex align-items-center\"\n  }, mdx(\"img\", {\n    className: \"pane-img pane-md\",\n    src: \"/img/pane/pane3.png\",\n    alt: \"\"\n  }), mdx(\"div\", {\n    className: \"ml-3\"\n  }, mdx(\"h6\", {\n    className: \"m-0\",\n    style: {\n      \"fontWeight\": \"600\"\n    }\n  }, \"Lilah Loselev\"), mdx(\"p\", {\n    className: \"m-0 pane-item\"\n  }, \"Cooking\")), mdx(\"p\", {\n    className: \"ml-auto pane-item\"\n  }, \"5mins Ago\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBPanel,CDBPanelTitle, CDBPanelText, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBPane, CDBIcon, CDBPaneImage, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Panel = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBPanel style={{width:\\\"320px\\\"}}>\\n              <CDBPane>\\n                <CDBPanelText muted>My Messages</CDBPanelText>\\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              <CDBPane className=\\\"mt-4\\\">\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" />\\n                <div className=\\\"ml-3\\\">\\n                  <CDBPanelTitle>Warren Briggs</CDBPanelTitle>\\n                  <CDBPanelText small>Cooking</CDBPanelText>\\n                </div>\\n                <CDBPanelText muted small className=\\\"ml-auto\\\">5mins ago</CDBPanelText>\\n              </CDBPane>\\n              <CDBPane className=\\\"mt-4\\\">\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"/img/pane/pane1.png\\\">\\n                  <CDBPanelTitle>Lu Chen</CDBPanelTitle>\\n                  <CDBPanelText small>I'll call you back</CDBPanelText>\\n                </div>\\n                <CDBPanelText muted small className=\\\"ml-auto\\\">27mins ago</CDBPanelText>\\n              </CDBPane>\\n              <CDBPane className=\\\"mt-4\\\">\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"/img/pane/pane2.png\\\">\\n                  <CDBPanelTitle>Sam</CDBPanelTitle>\\n                  <CDBPanelText small>See you at school</CDBPanelText>\\n                </div>\\n                <CDBPanelText muted small className=\\\"ml-auto\\\">active</CDBPanelText>\\n              </CDBPane>\\n              <CDBPane className=\\\"mt-4\\\">\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"/img/pane/pane3.png\\\" />\\n                <div className=\\\"ml-3\\\">\\n                  <CDBPanelTitle >Danny</CDBPanelTitle>\\n                  <CDBPanelText small>Yeah</CDBPanelText>\\n                </div>\\n                <CDBPanelText muted small className=\\\"ml-auto\\\">busy</CDBPanelText>\\n              </CDBPane>\\n              <CDBPane className=\\\"mt-4\\\">\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"/img/pane/pane4.png\\\" />\\n                <div className=\\\"ml-3\\\">\\n                  <CDBPanelTitle>Lilah Loselev</CDBPanelTitle>\\n                  <CDBPanelText small>Okay sir</CDBPanelText>\\n                </div>\\n                <CDBPanelText muted small className=\\\"ml-auto\\\">1hr ago</CDBPanelText>\\n              </CDBPane>\\n            </CDBPanel>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Panel;\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Progress\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Pro Component\")), mdx(\"img\", {\n    src: panelImage,\n    alt: \"panelimage\"\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBPanel,CDBPanelTitle, CDBPanelText, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBProgress, CDBPane, CDBIcon, CDBPaneImage, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Panel = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBPanel>\\n              <CDBPane>\\n                <CDBPaneImage size=\\\"md\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" />\\n                <div className=\\\"ml-3\\\">\\n                  <CDBPanelTitle>Warren Briggs</CDBPanelTitle>\\n                  <CDBPanelText small>Chicago</CDBPanelText>\\n                </div>\\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              <CDBPanelText className=\\\"mt-3\\\" small>Instagram</CDBPanelText>\\n              <CDBProgress value={75} height={5}/>\\n              <CDBPanelText className=\\\"mt-2\\\" small>Facebook</CDBPanelText>\\n              <CDBProgress value={60} height={5}/>\\n              <CDBPanelText className=\\\"mt-2\\\" small>Twitter</CDBPanelText>\\n              <CDBProgress value={45} height={5}/>\\n            </CDBPanel>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Panel;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Panel 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 Panel Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Panel component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBPanel, CDBPanelTitle, CDBPanelText } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Panel Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBPanel 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  }), \"<CDBPanel 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 tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPanel tag=\\\"input\\\" ... />\")), 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 the color of the panel\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPanel color=\\\"#000\\\" .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Panel Title Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBPanelTitle 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  }), \"<CDBPanelTitle 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  }), \"h6\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPanelTitle tag=\\\"h5\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Panel Text Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBPanelText 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  }), \"<CDBPanelText 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  }), \"p\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPanelText tag=\\\"p\\\" ... />\")), 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  }), \"<CDBPanelText small ... />\")), 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  }), \"<CDBPanelText muted ... />\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#panel","title":"Panel","items":[{"url":"#panel-with-dropdown","title":"Panel with Dropdown"},{"url":"#panel-with-users","title":"Panel with Users"},{"url":"#panel-with-label","title":"Panel with Label"},{"url":"#pane-list","title":"Pane List"},{"url":"#panel-with-progress","title":"Panel with Progress"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-panel-import-statement","title":"Contrast Panel Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/panels.mdx"},"frontmatter":{"metaTitle":"Panel Component for Contrast Bootstrap React","metaDescription":"Building a Panel 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":"bdc34a79-0a2c-57ac-b88e-b5a5a6e8c0b1"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}