{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/widgets","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"b9eb943e-a1f5-59c8-bb9f-c6390b9e71a5","title":"Widgets","slug":"/contrast/angular/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 Angular Components\",\n  \"metaDescription\": \"These are Contrast Bootstrap Angular 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 Angular library\"), mdx(\"i\", null), mdx(\"h2\", null, \"Blog Card\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"491px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/57f79a55ca9dda11aa52a4e1ef6d5958/13566/cardblog.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"164.86486486486487%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAABJ0AAASdAHeZh94AAAF1ElEQVRIx51Wa0zTVxTv4rS8TQttBSr44F0UZEMRFFCxDHkUpGMDZSpjPuKm2dyWmEzR6UKmiU4yF/yguEfiZsw292H7Ns2WLNFpsk9T45y8CkhbWloKbWn72zm3D6jTbVmTX//n3Hvu75xzH+deic/ng8fjAejr9XqF/H/BXBIm8ZLidLkFYfjPJ4yeBmERkEOE3DjhcODIrnb8duMGLOM2DAwOYmBgEFNOZ9igx8ns9gm43G4hhwj5b3rag/s3f4HdbIKHonQ5XXASRMQ+PyGeQMokwazCUw549Cf55N/T2kP9zEOQsHDowGE0btBjb8MO7NRtQ1NNK3bo2vBK3TZs1W1HW3079jfuQSt9m6m9oa4Nel07amu2o3FzOzZrW/D5xS8FsSCsW1OLaEk80qPSsSomG1mRGciPzUXJ/DzkxuSgRFYAvaKI2pYhJyYX8ogMxEZkIUqaDllsNiIkKnS+96Gf0OP1oFbbjJToTKxRr0aluhgtqWuxN60C+zOrcYCwK6MKhzU6vJVVA/3SjShbWIrn1GuRuqAIi9Ql0JDT08dPzRDWbWyGiqIqTi6GNrkE2qRiHKCBHUTWlVOHj7LrcCGvEaeWb0bbkgrspb72NC006nIUpZRhYUQmjr4fIOSJrN24FcpIDVYklVOUFShIXofSlEo0ZTRgW1YDzhW24NiKZpxc2YoLhS/h49w6dGTXkPMiVCUWIE26FKePzSJ8o343SlWrUZVWiZr0ajRl10Of04AV6iKkypciLS4RibGJSFdk4eUsLa6s3YKeXC12KDR4Xf08yiIX49zx08GUvfhm90H0FOlwuaIF31W24OaLr+JStR6J8XKkx0Xj7Sw1WhcnQhYdgYIkNX7YuhMDTU24ocnH94WluJJbiJ/OfDITYeeWPdidUYR3CypwZNULOLu+AZ9taER3WT16SDfs24K725vwVYUOl6rIcY0enxaX4mxOHs7k5uOgQo2vO0/OEJaX6yCdo4Jalo0l8jwsV66GbpEWR/L06MqrxFFNHs7ml+BcQT3e1NRjHc1xZsJKJMuWQUVjJLTlDnWcmCFcX1aHuRI5ZFEqxMybj+h5sYiTxkExL472mATPECSEKMkczJ8bg2hC5LNR9I0VYySSGHQc6pwh3FRVi5joWCgUCZDLZQIyQrxcjuR4JVISlEgmKOMTQn3CLl4GpVIBqTQSH3wwi9BkMmJkZASjo6Mkm/wwmoRuJpnBspHsjEaj0IN23D44OACr1eInFOVrYgIGwxCGiVRgeJgMjTAMDaO3r084Y/lhby/GxixU3gwYGhoivY+IxkMFwl8cqNLY7XY8Ik8GgwGDRMwEfX39GCLiXiK5f/8PkkfQPzAg2vr6+wUePPgTZvOYIJuenp6ph273tCiyjskpTBKmppwCNiqgU1wbqZo7JifFl/snHJNC577Z0YUI2YBTNFM6JgJ/rePjGLNYYWFY/fKYxeJvI91EkdknHCHCsIrtIEIOfZQWgq8ALu0WqxVGarPa7GKeRo1mcmITYId+cgL1TQcqd2gO+e5gAjN55zR5EEfCUY7bgrKNZDvGA4QcJevBOyUsZZ4P9sYGlgCpRaRoFYQc6VhAZ8fcbzT5I+a55zUIi5BTZkMeYA7MIRu6aBFcLpfIwElwu/06R+VfuCnR5wmlHIiQO3gvMjGvos0+k8p//Xk8gZTFq+GfbjOf718RNoes/HrrFrq6unD+/Hl8e/UqyWfQ3d1Np2JsFikP8MyCT1ytTyQ8ceIkIqRSLF6Uik2bqqFSKZGUuAD37t0LGT8lfASv9DDCPjqvP167JiK9c+cObt++jWvXr9P+s9L8TtI+o6Nl+xl2w0W4TJfhMn4Br8sQiND7923Di8Kr7KCVDb5n+OTwVnr0aAROWh/HcA8e3nwN5nvvwHx3H9yO34NPhnDC4P7xBZ5zfPHzQX98YVxO2kZOGzknTNrIxh0aE3wGhiIU77tAx2yD2XrgvRQC7znvY2OY6y9LOEMy5MYoyAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/57f79a55ca9dda11aa52a4e1ef6d5958/13566/cardblog.png\",\n    \"srcSet\": [\"/static/57f79a55ca9dda11aa52a4e1ef6d5958/a2ead/cardblog.png 259w\", \"/static/57f79a55ca9dda11aa52a4e1ef6d5958/13566/cardblog.png 491w\"],\n    \"sizes\": \"(max-width: 491px) 100vw, 491px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardBody class=\\\"p-1\\\">\\n        <CDBChip class=\\\"border-bottom p-3\\\">\\n            <CDBChipImage size=\\\"xs\\\"\\n                src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\">\\n            </CDBChipImage>\\n            <CDBCardText class=\\\"m-0 ml-3\\\">techlead</CDBCardText>\\n            <div class=\\\"ml-auto\\\">\\n                <CDBDropDown>\\n                    <CDBDropDownToggle color=\\\"white\\\" class=\\\"flat\\\" (click)=\\\"menu.toggleDropdown($event)\\\">\\n                        <CDBIcon class=\\\"text-muted\\\" [fas]=true icon=\\\"ellipsis-h\\\"></CDBIcon>\\n                    </CDBDropDownToggle>\\n                    <CDBDropDownMenu #menu=\\\"cdbDropdownMenu\\\">\\n                        <CDBDropDownItem [disabled]=true>Edit Profile</CDBDropDownItem>\\n                        <CDBDropDownItem [divider]=true></CDBDropDownItem>\\n                        <CDBDropDownItem>Action 1</CDBDropDownItem>\\n                        <CDBDropDownItem>Action 2</CDBDropDownItem>\\n                    </CDBDropDownMenu>\\n                </CDBDropDown>\\n            </div>\\n        </CDBChip>\\n        <CDBCardImage class=\\\"img-fluid my-3\\\"\\n            src=\\\"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg\\\"></CDBCardImage>\\n        <div class=\\\"mx-2 mb-4\\\">\\n            <CDBCardTitle>A Dummy blog title sample</CDBCardTitle>\\n            <CDBCardText class=\\\"text-muted mb-5\\\">Lorem ipsum dolor sit amet, consectetur adipisicing elit,\\n                sed\\n                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\\\" class=\\\"py-1 mr-2\\\">\\n                    <CDBIcon class=\\\"pl-0\\\" [fas]=true icon=\\\"arrow-up\\\"></CDBIcon> 11\\n                </CDBBtn>\\n                <CDBBtn color=\\\"dark\\\" class=\\\"py-1\\\">\\n                    <CDBIcon class=\\\"pl-0\\\" [fas]=true icon=\\\"arrow-down\\\"></CDBIcon> 2\\n                </CDBBtn>\\n            </div>\\n            <div class=\\\"my-2\\\">\\n                <CDBBtn [flat]=true color=\\\"none\\\" class=\\\"p-0\\\">\\n                    <CDBIcon [far]=true icon=\\\"comments\\\"></CDBIcon> 21.4k\\n                </CDBBtn>\\n                <CDBBtn [flat]=true color=\\\"none\\\" class=\\\"p-0 mx-4\\\">\\n                    <CDBIcon [fas]=true icon=\\\"share\\\"></CDBIcon> Share\\n                </CDBBtn>\\n                <CDBBtn color=\\\"warning\\\" class=\\\"py-1\\\">\\n                    <CDBIcon [far]=true icon=\\\"save\\\"></CDBIcon> Save\\n                </CDBBtn>\\n            </div>\\n        </div>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Widget Cards\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"488px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d8d117378835160ee4230de38d764177/bd48c/cardwidget.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"45.173745173745175%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABJ0AAASdAHeZh94AAAA20lEQVQoz6WRDQ6CMAyFuf+JjB5AjcQ7GMN0yN+EgWyw57o444iiiUseLYV9e2sjYwyGYfhb4ziCWBG9UDK77HfzRZ4TEVlrjUuaIi8KVFWFPM9tFMiyDJynUEo/uJ8Pfjr0wLquIa5XBxRCQErpoJTT6R74TrSeDunRtS3iOMZ6s8Uu3ru4WK5c/gqaunytBw6NFWMM7HRGYa/NOUeSMOc2bOUPDgmolEJ3612vZNuhaSQOxwSNvXZpoUVZQWk9O7dgyiTqoxdt7vs+qPkNFKcKpvz5p/FtfU607ql8wUjGF9B5AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/d8d117378835160ee4230de38d764177/bd48c/cardwidget.png\",\n    \"srcSet\": [\"/static/d8d117378835160ee4230de38d764177/a2ead/cardwidget.png 259w\", \"/static/d8d117378835160ee4230de38d764177/bd48c/cardwidget.png 488w\"],\n    \"sizes\": \"(max-width: 488px) 100vw, 488px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardBody>\\n        <CDBCardTitle class=\\\"lead\\\">Total Downloads</CDBCardTitle>\\n        <CDBCardTitle tag=\\\"h2\\\">1,057,891</CDBCardTitle>\\n        <CDBCardText [small]=true [muted]=true>Oct 1 - Dec 31,\\n            <CDBIcon [fas]=true icon=\\\"globe\\\"></CDBIcon> Worldwide</CDBCardText>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Counter Card\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"491px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b1845bbb629ab149a5cf025362b47d08/13566/cardcounter.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"67.18146718146718%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABJ0AAASdAHeZh94AAABWUlEQVQ4y5WTTU7DMBCFg7hSVyxhwyFYsEdC4jIgIYG4AOUEIH4k2k02tCAkEJRQsWia1knc/Di2H7aDQihJlFp6cWxPvryZkS0pJYTg6DkS3Ufg4gm4fZcAJPRZW3HOzWwJoT8W2DpRiwOmlKBzqPcUUmpsuyGE+AvcPuNY27nE+u49No6xksMKIMfmKWDtebD2CTpH+HUomz3+AxY1HGXoDiXOBxw3rwyCZ0VwE7QSqAsKHoMFLljoIqUzTCYuMr2/KlC/6Nw+nE88v7zBGX/Bm5EieLlWy/BKh1ItbNvG1fUdev0+HgbDRjdlaH3KeWNV7fIDPwgQRaoMjCFN0yKmDK3sct4UAUJ9I5d4CCnFyBljMvVAiI/ZnCAIaTuH4gcY8wQk8TGN54hYbNzRRWTgIV2A+IFxW1fb4qboR5Zl+R+MpElbBwgttVeeeY00wwDL1tveiqbxDZnx7a+Pn0QwAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/b1845bbb629ab149a5cf025362b47d08/13566/cardcounter.png\",\n    \"srcSet\": [\"/static/b1845bbb629ab149a5cf025362b47d08/a2ead/cardcounter.png 259w\", \"/static/b1845bbb629ab149a5cf025362b47d08/13566/cardcounter.png 491w\"],\n    \"sizes\": \"(max-width: 491px) 100vw, 491px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardBody>\\n        <CDBIcon size=\\\"2x\\\" class=\\\"p-4 bg-primary\\\" [fas]=true icon=\\\"chart-line\\\"></CDBIcon>\\n        <CDBCardTitle class=\\\"lead\\\">Customers</CDBCardTitle>\\n        <CDBCardTitle tag=\\\"h2\\\">852k</CDBCardTitle>\\n        <CDBCardText [small]=true [muted]=true>Oct 1 - Dec 31,\\n            <CDBIcon [fas]=true icon=\\\"globe\\\"></CDBIcon>\\n            Worldwide\\n        </CDBCardText>\\n        <CDBCardText class=\\\"text-success\\\">\\n            <CDBIcon [fas]=true icon=\\\"angle-up\\\"></CDBIcon>\\n            27.4%\\n            <span style=\\\"font-size: 0.9em\\\" class=\\\"ml-2 text-muted\\\">Since last quarter</span>\\n        </CDBCardText>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Invoices\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"490px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a217f55aa85b4614a578052129349058/41d3c/cardinvoicelist.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"72.2007722007722%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABJ0AAASdAHeZh94AAABc0lEQVQ4y51Ui3KCMBD0/7+wY4uOOFoV5ZUHj4Db20goKu3YZua4hBybvb0Li+v1ir7vQc9B7+eD77ruZWP8go+2baGU9mashdbijUHTNOMBP1k/OZjEPKBzDlme4/NwQF4USNMUp1OCLMvx6iDYCEh0W1VohGlV17C2Ql038q6GFqZG1mTMNTNgbCVzmtZGYux9yp0wVLJRSsqlUh5EDYFG7LYOcpjJvkFRlv47ZjkCchGEda7z2tG4/lfKLMpuv0ccb73fxDGiKEKSnMcPHovBsVUJDjrFTp2hGitBCAw7oX5LlRoGfThnqrWwDaDT8ZZusSlP+Mj3uNjSv7sxZJWlogQlQJYXXiMWgxoRfI4lWeW1FpMWc+2kKDNaPbLpZ/rvbr8bNYRo2Hjd1uu11zFarbBcvuMovTgH/qTrUJTvKgtDtkPoRV9l8UzZDex/uy14AhQNL2kmt6QcelH7AlFLdsCrgHc3ZdRm2Agn0v/l5/AFn8NJkCNoPjAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/a217f55aa85b4614a578052129349058/41d3c/cardinvoicelist.png\",\n    \"srcSet\": [\"/static/a217f55aa85b4614a578052129349058/a2ead/cardinvoicelist.png 259w\", \"/static/a217f55aa85b4614a578052129349058/41d3c/cardinvoicelist.png 490w\"],\n    \"sizes\": \"(max-width: 490px) 100vw, 490px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardBody class=\\\"p-0\\\">\\n        <CDBChip class=\\\"py-3 px-3 border-bottom\\\">\\n            <div>\\n                <CDBCardTitle class=\\\"mb-3 mt-0 lead\\\">Order History</CDBCardTitle>\\n                <CDBCardText class=\\\"text-muted\\\">Manage billing information and view receipts</CDBCardText>\\n            </div>\\n        </CDBChip>\\n        <CDBChip class=\\\"py-3 px-3 border-bottom\\\">\\n            <div>\\n                <CDBCardTitle class=\\\"mb-3 mt-0 h6\\\">Invoice #120345</CDBCardTitle>\\n                <CDBCardText class=\\\"text-muted\\\">Billed August 21, 2019</CDBCardText>\\n            </div>\\n            <div class=\\\"ml-auto\\\">\\n                <CDBBtn [outline]=true size=\\\"small\\\" color=\\\"success\\\" [flat]=true>Pay now</CDBBtn>\\n            </div>\\n        </CDBChip>\\n        <CDBChip class=\\\"py-3 px-3\\\">\\n            <div>\\n                <CDBCardTitle class=\\\"mb-3 mt-0 h6\\\">Invoice #120344</CDBCardTitle>\\n                <CDBCardText class=\\\"text-muted\\\">Billed July 21, 2019</CDBCardText>\\n            </div>\\n        </CDBChip>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Ratings\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"497px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d5da6a463f9eb163eccba668116f72f6/15d25/cardrating.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"75.67567567567568%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAABwElEQVQ4y6VSXWsTQRTN/xX6BwRffKwv1se+91kCpi8iFFEKpdqKKNrWpFtisrPzvdnMfs7xTrINTbqJggNn7p07u2fux+l579E0Deq6/m8Erl7YwmHXCt/8DSGpgF7TBowxSDhHknDEjIHzpZVSomof9DseXRHeZ1hW1YJUCIl0NoNzDlmWYUb+fQXbslsjDFtYo9EQl1++giXJ1rIfkm7G1zIMTk4ZGWtX5W3+0EXameGSsIa1KbhUUNoQcQrGBQSdpdJIhIA2dmvZnT1cXfotrfc7hbBOGKC0xvhugiszwYvzPg4uBnhJCPbVZfD7+CYi2GIO4Sxkni4gXApdZA+H0srGGvy8iVBVMbTqQ+sBteGY7DFi/ha3bAipOVKrKC4JqoUkJZjHUw79+jUaYaI8Xp86DD5XODoxOPshqCUWmauQuhLWFWsw8wKzvOwmjKI7XFyP8eT5IfaeHuDN+yvcTDLEUmMqFFkFtoGY4kLbx4QsZrgeT6E/vMOn/Wf4fv4R2e8hGpVgzqZwSdwNussF3xgKOW7uYAngMRANl6MrqZScYkUOn3dgEaf7suiWTZBMkHVAEHhNA6v9P6Ll+AOosYdB8XlzBwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/d5da6a463f9eb163eccba668116f72f6/15d25/cardrating.png\",\n    \"srcSet\": [\"/static/d5da6a463f9eb163eccba668116f72f6/a2ead/cardrating.png 259w\", \"/static/d5da6a463f9eb163eccba668116f72f6/15d25/cardrating.png 497w\"],\n    \"sizes\": \"(max-width: 497px) 100vw, 497px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardBody>\\n        <CDBCardTitle class=\\\"lead\\\">Average Rating</CDBCardTitle>\\n        <CDBCardTitle tag=\\\"h2\\\">4.7</CDBCardTitle>\\n        <!-- <CDBRating [feedback]=true></CDBRating> -->\\n        <CDBCardText [muted]=true>Based on 231,156 ratings</CDBCardText>\\n        <div class=\\\"text-muted mt-4\\\">\\n            <div class=\\\"d-flex align-items-center\\\">\\n                <span>5</span>\\n                <CDBIcon [fas]=true icon=\\\"star\\\" class=\\\"mr-3\\\"></CDBIcon>\\n                <CDBProgress value=50 color=\\\"success\\\"></CDBProgress>\\n            </div>\\n            <div class=\\\"d-flex align-items-center\\\">\\n                <span>4</span>\\n                <CDBIcon [fas]=true icon=\\\"star\\\" class=\\\"mr-3\\\"></CDBIcon>\\n                <CDBProgress value=40 color=\\\"warning\\\"></CDBProgress>\\n            </div>\\n            <div class=\\\"d-flex align-items-center\\\">\\n                <span>3</span>\\n                <CDBIcon [fas]=true icon=\\\"star\\\" class=\\\"mr-3\\\"></CDBIcon>\\n                <CDBProgress value=30 color=\\\"primary\\\"></CDBProgress>\\n            </div>\\n            <div class=\\\"d-flex align-items-center\\\">\\n                <span>2</span>\\n                <CDBIcon [fas]=true icon=\\\"star\\\" class=\\\"mr-3\\\"></CDBIcon>\\n                <CDBProgress value=20 color=\\\"dark\\\"></CDBProgress>\\n            </div>\\n            <div class=\\\"d-flex align-items-center\\\">\\n                <span>1</span>\\n                <CDBIcon [fas]=true icon=\\\"star\\\" class=\\\"mr-3\\\"></CDBIcon>\\n                <CDBProgress value=10 color=\\\"danger\\\"></CDBProgress>\\n            </div>\\n        </div>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Events\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"513px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/32046189438d7cc7248c1b9f9b238286/267f6/cardeventlist.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"137.83783783783784%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAABJ0AAASdAHeZh94AAADTElEQVRIx5VWW28SURDuP/fZF1+Mpg8a45uXmLTRaFt7VZOKiRZaCqXAAi23wrKw92UX9nPm7IUFltJuMpwLy3dm5vtmDhugZzqdYjKZCPM8L54/1nzfxwYD8mLx4S8fYzEgf/DT7/ch1WooV6rodu9i0Ic+HGUMyKbrGm5vm2i2WhgoCvzwpenUD0cyfzaPDovGGJAXHof8cGfmvIoOXcphEs8Zj1GVJOFxu91Bvd5As9nCDa3L5Qpq9TpMy5oDnwFyGLTh0g9HH7eh7xzB0Q0Urkoola4ppxVcFooCqCrVkM3lcH6RhzxQMKaDLcuG63qJHPKEAI2TX5A330J++Qa21IBqmZDlAYbDIRQyVVWF8VxRhhiNRujLsohgNFIFGIMKQPbQPM1A3f6G4fttuI0mXNqzKCzDNCkF7tp8zofMOqIw3RsCanXgk7h1AtJpj03VdJEzNsu24TgObNuhdTCfB0yQElnAoB9WAFURRcFeulxFNOeRgYND7NWAMct0KjM8GAwo+TIx3KZxgHanE+RM1daEzCxTdYw+bEHfJZYNExf5PArFIirE8lk2h/xlAVelEv7+O0OlKgkAm7zkPK9g+SfkF6/Rf/4qYNm2yENFsMyM6roOwzCgaRpVEjOtCJY7na5gP5Vl7es+Rp++YNy4xZhDp8RzrsauGxNimpYQ/nqWKS9j8owl41MIOoWtkjecL2ZZI+NRpbVGzEcdKrWWk6RETHveRBizGs3FwSHrkxBgGjaXZcCog5B5FOKQ8sYs93p9UR08Z4a5Sri9RWGzvNIB+UtnzG9QrixkMn9wcHiEvf0DnP7OCKZ3dr/j+OSHqOXF6pk12JBlK3uO7pOnkJ9twujcoVKTqDmUccVN4rqMxs2t6DrZ3Lkghn/MXrJm+dpIbQ7q5z0M323BLktQDJ26uCzkwU2CpcPy4LF714vT0Wq3xV4sm0jY9mUR2t4xtJ1DeD0ZLu1b5AnXrO0E5jhBu4rKLV02yVqmEHwvkAPrTichGySfqDGwXBjYJdKSF1SqbKZh6H6oLfaEhSzKK/SStZnUX+qtNwe4cGrak9TevYCLILNQJiL5bFzLq67XZR3ec4lbYR17K8Jd8jD5V2TVX4xIFuve+w+pkXbOTBUVkAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/32046189438d7cc7248c1b9f9b238286/267f6/cardeventlist.png\",\n    \"srcSet\": [\"/static/32046189438d7cc7248c1b9f9b238286/a2ead/cardeventlist.png 259w\", \"/static/32046189438d7cc7248c1b9f9b238286/267f6/cardeventlist.png 513w\"],\n    \"sizes\": \"(max-width: 513px) 100vw, 513px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardTitle class=\\\"lead p-4 border-bottom\\\" style=\\\"font-weight: 600\\\">Events</CDBCardTitle>\\n    <CDBCardBody class=\\\"py-0\\\">\\n        <CDBChip class=\\\"border-bottom pb-2\\\">\\n            <CDBIcon size=\\\"4x\\\" [far]=true icon=\\\"calendar-alt\\\" class=\\\"text-danger\\\"></CDBIcon>\\n            <div class=\\\"ml-3\\\">\\n                <CDBCardTitle class=\\\"mb-1 lead\\\" style=\\\"font-weight: 600\\\">Newmarket Nights</CDBCardTitle>\\n                <CDBCardText class=\\\"mb-2\\\">Organized by University of Oxford</CDBCardText>\\n                <CDBCardText class=\\\"mb-0 small text-muted\\\">Time: 6:00AM</CDBCardText>\\n                <CDBCardText class=\\\"mb-0 small text-muted\\\">Place: Cambridge Boat Club, Cambridge</CDBCardText>\\n            </div>\\n        </CDBChip>\\n        <CDBChip class=\\\"border-bottom pb-2\\\">\\n            <CDBIcon size=\\\"4x\\\" [far]=true icon=\\\"calendar-alt\\\" class=\\\"text-danger\\\"></CDBIcon>\\n            <div class=\\\"ml-3\\\">\\n                <CDBCardTitle class=\\\"mb-1 lead\\\" style=\\\"font-weight: 600\\\">Noco Hemp Expo</CDBCardTitle>\\n                <CDBCardText class=\\\"mb-2\\\">Organized by University of Oxford</CDBCardText>\\n                <CDBCardText class=\\\"mb-0 small text-muted\\\">Thu, 12 Sep - Sat, 18 Sep 2020</CDBCardText>\\n                <CDBCardText class=\\\"mb-0 small text-muted\\\">PPlace: Denver Expo Club, USA</CDBCardText>\\n            </div>\\n        </CDBChip>\\n        <CDBChip class=\\\"pb-2\\\">\\n            <CDBIcon size=\\\"4x\\\" [far]=true icon=\\\"calendar-alt\\\" class=\\\"text-danger\\\"></CDBIcon>\\n            <div class=\\\"ml-3\\\">\\n                <CDBCardTitle class=\\\"mb-1 lead\\\" style=\\\"font-weight: 600\\\">Canadian National Exhibition (CNE)\\n                </CDBCardTitle>\\n                <CDBCardText class=\\\"mb-2\\\">Organized by University of Oxford</CDBCardText>\\n                <CDBCardText class=\\\"mb-0 small text-muted\\\">Fri, 20 Sep - Mon, 07 Oct 2020</CDBCardText>\\n                <CDBCardText class=\\\"mb-0 small text-muted\\\">Place: Toronto , Canada</CDBCardText>\\n            </div>\\n        </CDBChip>\\n    </CDBCardBody>\\n    <CDBCardText class=\\\"p-4 text-center pointer border-top\\\">See All</CDBCardText>\\n</CDBCard>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Alerts and Notifications\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"513px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3f62d701e9ba1926541c93f53b2baaf1/267f6/cardalertsandnotifications.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"89.96138996138995%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAABJ0AAASdAHeZh94AAABl0lEQVQ4y5WTC5OCMAyE/f+/Ekc4EBCQtzzM5SsWZQC5y8xqgTbZ7iYn0Xg+nwZHYfftgTjxMwyDPB4PqetG2rY1aJpW6ub9DHrdN47jJshhEtrsWZaJHwQSx7FEiuv1ukAU37Rot8uehOSZGR5dcwQ77Pg+J7QHkjSVy8UVz/PE9wNxXU/CKD7UdJMhVdAv1WvfbjdFIqkWSNNMyqqSsiylKArdU0uha54rXROT9vXMdGZY6UHHcQy7Rs0oy8psLF8JJlSS54VJTiFLxpqyYIhGOPlNzz19N69sWsW0S2OuAxtYDztGTHj34NoU1c59GRJGkTHH834M829Bor7vtxliRJIkilT78m4Mov8wKQxD0wnZ/S7xyzjOdV03S7VgiOgwo7F939cpaRd99rm2z7ttc2TEt/kdtzQkYOaczxLomP2ojmgIY675l2KbVyYpzY1+sWqHXoDmRSv++74zM/35DqwS0iKwAziNMRRhWkiOWYxink/FMAXQYiRbaUg1PjIFRVHqu/FfDb6elA8HrYu28hHseeIXRPGB5Efxt3MAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/3f62d701e9ba1926541c93f53b2baaf1/267f6/cardalertsandnotifications.png\",\n    \"srcSet\": [\"/static/3f62d701e9ba1926541c93f53b2baaf1/a2ead/cardalertsandnotifications.png 259w\", \"/static/3f62d701e9ba1926541c93f53b2baaf1/267f6/cardalertsandnotifications.png 513w\"],\n    \"sizes\": \"(max-width: 513px) 100vw, 513px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBCard style=\\\"width: 25rem\\\">\\n    <CDBCardBody class=\\\"py-0\\\">\\n        <CDBCardTitle class=\\\"lead m-0 py-3 border-bottom\\\">Alerts & Notifications</CDBCardTitle>\\n        <CDBChip class=\\\"py-3 border-bottom\\\">\\n            <div>\\n                <CDBCardTitle class=\\\"my-0 mb-2 h6\\\">Company News</CDBCardTitle>\\n                <p class=\\\"small m-0\\\">Get Rocket news, announcements, and product updates</p>\\n            </div>\\n            <CDBCheckbox class=\\\"ml-auto\\\"></CDBCheckbox>\\n        </CDBChip>\\n        <CDBChip class=\\\"py-3 border-bottom\\\">\\n            <div>\\n                <CDBCardTitle class=\\\"my-0 mb-2 h6\\\">Account Activity</CDBCardTitle>\\n                <p class=\\\"small m-0\\\">Get important notifications about you or activity you've missed</p>\\n            </div>\\n            <CDBCheckbox class=\\\"ml-auto\\\"></CDBCheckbox>\\n        </CDBChip>\\n        <CDBChip class=\\\"py-3\\\">\\n            <div>\\n                <CDBCardTitle class=\\\"my-0 mb-2 h6\\\">Meetups Near You</CDBCardTitle>\\n                <p class=\\\"small m-0\\\">Get an email when a Dribbble Meetup is posted close to my location</p>\\n            </div>\\n            <CDBCheckbox class=\\\"ml-auto\\\"></CDBCheckbox>\\n        </CDBChip>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Card Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {CardModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Card Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Card 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  }), \"class\"), 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  }), \"class=\\\"myClass\\\"\")), 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  }), \"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  }), \"border=true\")))), 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  }), \"class\"), 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  }), \"class=\\\"myClass\\\"\")), 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  }), \"cascade=true\")))), 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  }), \"class\"), 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  }), \"class=\\\"myClass\\\"\")), 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  }), \"cascade=true\")), 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  }), \"hover=true\")), 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  }), \"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  }), \"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  }), \"top=true\")))), 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  }), \"class\"), 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  }), \"class=\\\"myClass\\\"\")), 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  }), \"muted=true\")), 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  }), \"small=true\")))), 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  }), \"class\"), 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  }), \"class=\\\"myClass\\\"\")), 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  }), \"sub=true\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"items":[{"url":"#blog-card","title":"Blog Card","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#widget-cards","title":"Widget Cards","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#counter-card","title":"Counter Card","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#invoices","title":"Invoices","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#ratings","title":"Ratings","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#events","title":"Events","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#alerts-and-notifications","title":"Alerts and Notifications","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-card-bootstrap-modules-used","title":"Contrast Card Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/widgets.md"},"frontmatter":{"metaTitle":"Contrast Bootstrap Angular Components","metaDescription":"These are Contrast Bootstrap Angular 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":"b9eb943e-a1f5-59c8-bb9f-c6390b9e71a5"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}