{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/forms","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"48bcf955-44f5-50da-939f-2e453f1890e7","title":"Forms","slug":"/contrast/angular/forms"},"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\": \"Forms\",\n  \"metaTitle\": \"Contrast Bootstrap Angular Forms\",\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(\"h1\", null, \"Forms\"), mdx(\"p\", null, \"Angular Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.\"), mdx(\"p\", null, \"While creating Contrast Design Bootstrap, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.\"), mdx(\"p\", null, \"Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.\"), mdx(\"h2\", null, \"Default Form Login\"), 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\": \"581px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3283e1abe666876bdddbb35a313451bd/92d15/1.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\": \"118.14671814671816%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAABJ0AAASdAHeZh94AAACIklEQVQ4y41VyY7aQBD1hd9FHFgykbglESGG/+A7oigcMwfEYVCIlAHM2MY23vDGmy7jZtp22zMlPbqFq6urXi2tpGmKLMukoG8i2vRoJVFoc71epahKkx6BjOYGmw6SOI4D1/MQhCE830eTkP7dwzbvnp42+PnrN/4/P2O7/ccOXWueSg02hSZ62xRyzSD9xHGMILiFFYaXWuhNnEpD5gaJK8u2mdGglXwRYkJbQyYhvtqRNXuYJAn8IMjDppApqx+R3W6Hy+VG0b1seMiGecKLYeJk2TBPFtJS8dY9pMAM08zPlgy2kS0QQIFVkDXXIYnrutjv9zDZrbquQzcM5q0Fz3Nhehk0J4HuptjbKY7nFBqD7SfMWlY2KJLLs5aHVfGc90lcICklMCsnZbPZYDKZYDablaCqKqbTKdQf3zFX+VpgNsW3r1/w5/ERPLF3g4vFAoqiSNHpdBq/EebzeW4oiqI3g6vVCr1eD/1+H4PBAMPhkGGA0WiE8XiMzw8P7P8+Pg1voD3pdbtdLJfLsocih1wuRfvFTInqjGqTeLNpAkmbIKtPG7ohKQycz2eWXT8fXxxeEMFwY1gss2GUIC303xJZKZvqAAhZt1D5HDQNtu1AY6vncv8+ML5k44rzInaCTPddD202dQ6HQ75fr9c4Hl/y/Xb7N+932cxsnTacSxLik5dEwAaI6Km09WSPlJg92b71kXrvaRSfz7anlF/4CuMlEK3QGgL+AAAAAElFTkSuQmCC')\",\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/3283e1abe666876bdddbb35a313451bd/92d15/1.png\",\n    \"srcSet\": [\"/static/3283e1abe666876bdddbb35a313451bd/a2ead/1.png 259w\", \"/static/3283e1abe666876bdddbb35a313451bd/6b9fd/1.png 518w\", \"/static/3283e1abe666876bdddbb35a313451bd/92d15/1.png 581w\"],\n    \"sizes\": \"(max-width: 581px) 100vw, 581px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\"> Sign in </p>\\n        </div>\\n        <CDBInput [material]=true hint=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBInput [material]=true hint=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <div class=\\\"d-flex flex-wrap justify-content-center align-items-center\\\">\\n            <CDBInput type=\\\"checkbox\\\"></CDBInput>\\n            <p class=\\\"m-0\\\">Remember me</p>\\n            <CDBLink to=\\\"/\\\">Forgot Password ?</CDBLink>\\n        </div>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block my-3 mx-0\\\">\\n            Sign in\\n        </CDBBtn>\\n        <p class=\\\"text-center\\\">Not a member? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Register</CDBLink>\\n        </p>\\n        <p class=\\\"text-center\\\"> or sign in with</p>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"white\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Contrast Form Login\"), 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\": \"562px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ceca5c60121eb960f255d7b76e6932c7/6e88f/2.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\": \"133.59073359073358%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABJ0AAASdAHeZh94AAACtElEQVRIx61US27iQBBtJgrJWaLZDmQzRIq4ReZSsEpYcQVW2SRSsucCGTID4ms+xoBt3P6+6Wq7icEGJdKU9NTt6urqelXlYq1WC+VyGdVqFbe3txlUKhWBn7i5uZHIs6G719fXeHx8BKvX62CMHcXZ2RkuLy/xTayFE3aERqMBdn9/Lz/o0vn5+Q7FYlHqf5RKuLv7hVKpjO9XV2CFgjxL215cXEjbZrMJVqvVTr76FTw8PIANBgM8PT3h9fUVLy8vGSg9radsnp+fMRqNwPCfhfm+D4LneeCcS7iuu9N5nv8JeFB+WBAE0jMpdV3HYrHAarWSuiiKPoUwDOVKvpj6UAf7iI4jitf0w3sOw0SZliiKTjqlc8fhUCylQ/VB/InybDaTtAnb7fYkdZJOp7Oz249QrOTUSYoSFyZIqIVHkWa35zBP9iPKi1Qa7WwzRTnmOHGfi/TdXQ7pg9pmvdlgNB5jPl9gMtHkulzqsLYcMxsYiG7SLKBnAMM1MDGBjYv8COnDtm2s1+sUNjBNE7ZIurl1oW84TNuBYTpYCqwtR5w5MpeZKk+nUxHRHIZhiKiWEoYAVVvTNFH9KZZ6HLGRAunpXsbhWFBVL6WFqk1nKxExdcGh0H16MOOQIun1euj3++gP+qApRBgOhzsMhH6YgOzovNvtyv7N9KFKLAn9y2NRFKI9nc6Es5FYNWgrD3+XwB89guV+VPlE23zQ4Dxubpo+juPEk8gLYPIQtidswlQzfbaxLcuUkY4nE1l1om2Zmz026Z8gl3K6BdSeelTt/aRvSQ7vZhwGYh8Evkw2d8VwdTna7bbQR7BFtG9vv+MCzmfovL/HTpOi5jqkPeeOpEcThBqdemwrckh7KhKNK1PQpn6lHGciDFIUFFWCn4x1esTL2Su73AGrDlXevoLDu/8Ax01sxkxEAjgAAAAASUVORK5CYII=')\",\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/ceca5c60121eb960f255d7b76e6932c7/6e88f/2.png\",\n    \"srcSet\": [\"/static/ceca5c60121eb960f255d7b76e6932c7/a2ead/2.png 259w\", \"/static/ceca5c60121eb960f255d7b76e6932c7/6b9fd/2.png 518w\", \"/static/ceca5c60121eb960f255d7b76e6932c7/6e88f/2.png 562w\"],\n    \"sizes\": \"(max-width: 562px) 100vw, 562px\",\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>\\n    <div style=\\\"background: black\\\" class=\\\"text-center text-white\\\">\\n        <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\">Sign in</p>\\n    </div>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <CDBInput label=\\\"Email\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBInput label=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <div class=\\\"mt-5 d-flex flex-wrap justify-content-center align-items-center\\\">\\n            <CDBCheckbox class=\\\"mr-2\\\"></CDBCheckbox>\\n            <p class=\\\"m-0\\\">Remember me</p>\\n            <CDBLink to=\\\"/\\\">Forgot Password ?</CDBLink>\\n        </div>\\n        <CDBBtn color=\\\"dark\\\" [outline]=true class=\\\"btn-block my-3 mx-0\\\">\\n            Sign in\\n        </CDBBtn>\\n        <p class=\\\"text-center\\\">Not a member? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Register</CDBLink>\\n        </p>\\n        <p class=\\\"text-center\\\"> or sign in with</p>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"linkedin-in\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"github\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Default Form Register\"), 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\": \"863px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e0544d80ed4b86d75159081947ad1e10/ee455/3.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\": \"112.74131274131274%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAABJ0AAASdAHeZh94AAACMUlEQVQ4y51V2ZHiMBAlAIpPjiIBaiccEuEojp0iEoIgFoLYmZ0PBnxbtmz39pMtjdbXHKpqS7Zardf9nuRBlmWU53mnFUVBduvzhQ3wQKsv1O9JktCfl1e6Px7keX6rr73GBKxP6EVSSvr79kaO45DvBw0f21cFxANpx7EgIRJGlNqR/0s1TSXFQpBk/06EOmAUxRRGkep17fK8MGNs6AchBWGoNjXzVa+RDnQxsWtm1bOrTl0pFzbClOuE+gBhYe0I5JhDHe3eZFAFayBs2x0Ni1EC1C1SNRYq9TZCmqSws2CJAEWfNGo7G2kFQakAE9DjlGGa5bLYXQK2yKgCRlwuFdCQUtUGPZB+h5RGymmakuN6ShI+Q3f5RKB+0F1aEaHG7JewQRG9pOi0teV5VtUlZBJilQ4UgA1hOACy2kAbMlMBsw7V/6SpgBhcr1dar9d0OBxov98b2263tNls6PfzM51OJ9rtduod37XP8Xik1WpF5/O5JAWPy+VCo9GIptMpTSYTGo/HyjCGLRYLenr6RfP53HzXPrPZjIbDIS2Xyw+W+xpIuN/v5Lqusk9T7guIOZAjmJiQydAsfylg23ECc2BZiFihQ8AoCtsvh/pZrgvZ8zy63W6qh0Y93+egDj0CSe9heZIMsjrCwgi0PCnqVmE0uAy0zpC6+pbyuZcFi7s0W9SNGmKMqx4GIhynJAL9O7/7jNYNBDkx0SMq6MZIhfxAaYTddQnYp+ezv6O2f5DS0BU97LKhAAAAAElFTkSuQmCC')\",\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/e0544d80ed4b86d75159081947ad1e10/ee455/3.png\",\n    \"srcSet\": [\"/static/e0544d80ed4b86d75159081947ad1e10/a2ead/3.png 259w\", \"/static/e0544d80ed4b86d75159081947ad1e10/6b9fd/3.png 518w\", \"/static/e0544d80ed4b86d75159081947ad1e10/ee455/3.png 863w\"],\n    \"sizes\": \"(max-width: 863px) 100vw, 863px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\"> Sign up </p>\\n        </div>\\n        <div class=\\\"form-row mb-n4\\\">\\n            <div class=\\\"col\\\">\\n                <CDBInput [material]=true hint=\\\"First name\\\" type=\\\"text\\\"></CDBInput>\\n            </div>\\n            <div class=\\\"col\\\">\\n                <CDBInput [material]=true hint=\\\"Last name\\\" type=\\\"text\\\"></CDBInput>\\n            </div>\\n        </div>\\n        <CDBInput [material]=true hint=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <p class=\\\"text-muted text-center small mt-n4\\\">At least 8 characters and 1 digit</p>\\n        <CDBInput [material]=true hint=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <CDBInput [material]=true hint=\\\"Phone number\\\" type=\\\"text\\\"></CDBInput>\\n        <p class=\\\"text-muted text-center small mt-n4\\\">Optional - for two step authentication</p>\\n        <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n            <CDBInput type=\\\"checkbox\\\"></CDBInput>\\n            <p class=\\\"m-0\\\">Subscribe to our newsletter</p>\\n        </div>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block my-3 mx-0\\\">\\n            Sign up\\n        </CDBBtn>\\n        <p class=\\\"text-center\\\"> or sign up with</p>\\n        <div class=\\\"row mb-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <p class=\\\"text-center m-0\\\">Already have an account? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Sign In\\n            </CDBLink>\\n        </p>\\n        <hr />\\n        <p class=\\\"text-center\\\">By clicking <em>Sign up</em> you agree to our <CDBLink class=\\\"d-inline p-0\\\"\\n                to=\\\"/\\\">terms of service</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Contrast Form Register\"), 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\": \"850px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/bf89a35b1fc781cf2e35f634efe970e9/ae694/4.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\": \"110.42471042471043%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAABJ0AAASdAHeZh94AAACEUlEQVQ4y61USY7qQAzNqv+i+y5sWCMx7bgFK0AMCzgKJ+AS3AckEASSkLky+OeZVJGJ7l50SY8quczzs8uOtt/vaTwe02q1osVi0YjpdEqTyYTm83nj/XK5pNlsRtvtlrTNZkOapn2Lz88v+vj38aNfq9UibbfbUbvdpuFwSL1er4Z+v0+j0YgxGAyo2+02+nQ6HVqv16SlaUo/rd/4SD8mTJKEbNtmOI5LSWZjew6cfd+nx+PBPkKI531S9gOPhh8giiIFaSsCdhABcRw3+sCuFDqOQ57nKekS71JrglJYJXieidW4WRDP8xWCMKwRycUKpdwwcwSQWjGiSqdwrpKh7mEeSBEiZQAX36VVTRHrer0yaYkQ6cnCB0HAL1gkfhWQGklVyjDigHZwXZcBpTKIEBEjDAWF4omniLSyJ69HebeCICSRqWYiSZiXpGmV2gaNWwRa6H6/0/l8Jl3X+Yz9dDpxNiCGH8qDXfamBmbLsngKPG6RF2QJLpcLFx42J7dV/QzDeBGiZlBgmmYNt9uNDocDHY9HJm3yARkElWrYNEayFJb14KBQgkeI4/rYSQ41KdUlPxiIbGTqsYNcv15IvHkYNSnlkUvzFw44HRC9YNPdCSkQSWlE5X9KhMVGxY5X5N4sPA4UOmF2F/3y44Dlug4X2TQtpRBdYGZAAMuLyfCJdDclO0h5dGoK/wog/A/RID9ZhHOFTQAAAABJRU5ErkJggg==')\",\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/bf89a35b1fc781cf2e35f634efe970e9/ae694/4.png\",\n    \"srcSet\": [\"/static/bf89a35b1fc781cf2e35f634efe970e9/a2ead/4.png 259w\", \"/static/bf89a35b1fc781cf2e35f634efe970e9/6b9fd/4.png 518w\", \"/static/bf89a35b1fc781cf2e35f634efe970e9/ae694/4.png 850w\"],\n    \"sizes\": \"(max-width: 850px) 100vw, 850px\",\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>\\n    <div class=\\\"text-center text-white\\\" style=\\\"background: black\\\">\\n        <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\"> Sign up </p>\\n    </div>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"form-row mb-n4\\\">\\n            <div class=\\\"col\\\">\\n                <CDBInput label=\\\"First name\\\" type=\\\"text\\\"></CDBInput>\\n            </div>\\n            <div class=\\\"col\\\">\\n                <CDBInput label=\\\"Last name\\\" type=\\\"text\\\"></CDBInput>\\n            </div>\\n        </div>\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <p class=\\\"text-muted text-center small mt-n4\\\">At least 8 characters and 1 digit</p>\\n        <CDBInput label=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <CDBInput label=\\\"Phone number\\\" type=\\\"text\\\"></CDBInput>\\n        <p class=\\\"text-muted text-center small mt-n4\\\">Optional - for two step authentication</p>\\n        <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n            <CDBCheckbox class=\\\"mr-2\\\"></CDBCheckbox>\\n            <p class=\\\"m-0\\\">Subscribe to our newsletter</p>\\n        </div>\\n        <CDBBtn color=\\\"dark\\\" [outline]=true class=\\\"btn-block my-3 mx-0\\\">\\n            Sign up\\n        </CDBBtn>\\n        <p class=\\\"text-center\\\"> or sign up with</p>\\n        <div class=\\\"row mb-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"linkedin-in\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\" [outline]=true>\\n                <CDBIcon [fab]=true icon=\\\"github\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <p class=\\\"text-center m-0\\\">Already have an account? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Sign In\\n            </CDBLink>\\n        </p>\\n        <hr />\\n        <p class=\\\"text-center\\\">By clicking <em>Sign up</em> you agree to our <CDBLink class=\\\"d-inline p-0\\\"\\n                to=\\\"/\\\">terms of service</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Default Form Subscription\"), 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\": \"847px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/de0ec1ffca95816dc369fbbbb139487e/b2cef/5.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\": \"65.25096525096525%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABJ0AAASdAHeZh94AAABWElEQVQ4y6WSS27CMBCGs2TPQ7BhjbggKx4CIc7AiTgC20LLAqlQFDuOYzv5O2Nq2pAgqnakzx55xuN5OCqKAnmeP+RenvlGISAL64FwWSYJpJQQQkBrXfH76ct6KWBdNm+HA/b7V7zsdng/nfBISgGZLMsgKJOEMorjmBCkS2Q6JZumXXtdUqZCXDMO5HlRDcgH1lo45/zOxMrhLC0uCWPwLixU5r58rrAe7j8t2TiA7vvdkIu2gCt+WTI3/PxxgabSQ+NprXI3kNqhlEv+/gauhrrvUimZ4X4kSsEYi79IJSAHkjKBUimVn/kWMGma+ocUEc7uKWVojPEvrNdrNBoN9Ho9dDodT6vVQr/fx3A4xGAwQLfbRbvdvtmbzaa3b7dbH4MnHvHCstlsMBqNMJvNMJ1OPZPJBPP5HKvVCsvl8nYW7OPxGIvFAsfj8VZ2xAoP478SEvsELgLGkLK5YA4AAAAASUVORK5CYII=')\",\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/de0ec1ffca95816dc369fbbbb139487e/b2cef/5.png\",\n    \"srcSet\": [\"/static/de0ec1ffca95816dc369fbbbb139487e/a2ead/5.png 259w\", \"/static/de0ec1ffca95816dc369fbbbb139487e/6b9fd/5.png 518w\", \"/static/de0ec1ffca95816dc369fbbbb139487e/b2cef/5.png 847w\"],\n    \"sizes\": \"(max-width: 847px) 100vw, 847px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\">Subscribe</p>\\n        </div>\\n        <p class=\\\"text-center mt-4 font-weight-light\\\">Join our mailing list. We write rarely, but only the\\n            best content.</p>\\n        <CDBLink class=\\\"text-center p-0 font-weight-light\\\" to=\\\"/\\\">See the last newsletter</CDBLink>\\n        <CDBInput [material]=true hint=\\\"Name\\\" type=\\\"text\\\"></CDBInput>\\n        <CDBInput [material]=true hint=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block my-3 mx-0\\\">\\n            Subscribe\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Contrast Form Submission\"), 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\": \"803px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0826e0422407ee91c5d3b516e3918899/e1031/6.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\": \"73.74517374517376%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAABqUlEQVQ4y6VSTU/CQBDdABEunIhKYjzxt0jAED5+CFf+Dz+Aj8CRhLNyALWALd0tWKB97kzdGrCYqJO8zOzMm5fZnRXb7Rbj8Rij0SgRw+EQvV4P/X6fkcSh/sFggMViATGdTpHL5ZBKpZDJZE6QTqeRz+dRLBZxfXODQqGg8+lvvGw2CyEEOp0OxGQy4cMlXGlyqVTC3f09brXoT9x2uw0xn8/RbDZRr9fZNxoN9ga1Wg2VSgXValXjQdd1/ozTarVQLpfR7XYhkGBBECAIQ/xkVCbGOUtQ8/F4BC1HSgmlPLiuy/HKUXh9k7BsBUv757XEi4aUiuuulOylUjgcDqzDguGFaaQPbN4B149iewc475enJq1YcL/fw9NTkqcz5fle5mJhQC2MMKB6xDHe9LAgme/7fFXfjwSZcAHhGUj0RNAczHua+DdInJAemJbzF6PXiQUJnucxlAZvjjap1OfmVQyz1WjTXznaMk0pzHSWZfF0RIjEI+9uNpjNZnh8fMJqtTrhkN/tdliv1ywa/0OC4ziwbTsRy+WSQY1Jdcqb3yHiL/JPMzof7gUDm6CvsboAAAAASUVORK5CYII=')\",\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/0826e0422407ee91c5d3b516e3918899/e1031/6.png\",\n    \"srcSet\": [\"/static/0826e0422407ee91c5d3b516e3918899/a2ead/6.png 259w\", \"/static/0826e0422407ee91c5d3b516e3918899/6b9fd/6.png 518w\", \"/static/0826e0422407ee91c5d3b516e3918899/e1031/6.png 803w\"],\n    \"sizes\": \"(max-width: 803px) 100vw, 803px\",\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>\\n    <div class=\\\"text-center text-white\\\" style=\\\"background: black\\\">\\n        <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\">Subscribe</p>\\n    </div>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <p class=\\\"text-center mt-2\\\">Join our mailing list. We write rarely, but only the best content.</p>\\n        <CDBLink class=\\\"text-center p-0\\\" to=\\\"/\\\">See the last newsletter</CDBLink>\\n        <CDBInput label=\\\"Name\\\" type=\\\"text\\\"></CDBInput>\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBBtn color=\\\"dark\\\" [outline]=true class=\\\"btn-block my-3 mx-0\\\">\\n            Subscribe\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Default Form Contact\"), 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\": \"572px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/dcb52bba37231374f8f108547d0fb4da/a805e/7.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\": \"132.81853281853282%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABJ0AAASdAHeZh94AAACCklEQVRIx6VVyW7CMBDNt3JFgsIfcODAIj6KY1VxqLoci0rVsrTZSSC28+ox2GRFpB1p5Ngenmd5M1hpmkII8W/lnIOwLH1Am1tUXLuTOJYGqxK6I9H3dXb6rgR4eU1t8Pa2xOPTM56k3t8/YLV6x/PLK+LDIWdfC1h8kfJCPz4ej4jjGIwxRHIVBQcqAUkZ42AShHOBplIJuNnusN19w/X8QgpuLFgx5AsNmlGpElCBXqlio5BJqAC24+LHdvD94yC9WObCapRDKkoiK0nVNCFlQOq66iZi6zMC93wfQRAo+hSLddVDriijqXPqzSRJ8LVe4321gh+EpeKRLa2VgFEUY73ZKgBajxKs1I4mvJN3gXyEUqUfynsovxW5lTK15+dJws+EF/rMTBmReaQU8sVQmAKk9apt6ooShnsZ7hYb2S0fn2uE++jmKVMCzCZWqNCZyVNdqxnAKg+v0aceMDU5rS2KaNh+lPckYdWAat5Fe9i2LSeOB98P4MnJ40tiE7lpdV3vvLpwHAdBGFbnMCsHOVS5yI99zUnd+0StfRRlPOUnQPogodd6vR7a7Ta63a7STqejVjrvS70rnPf7PbRaLcznc4VBXWVRmCTL5RKWZf1Jh8Ohicx4SHmZzWYYjUYYj8dG9X4ymeTOSafTKQaDARaLhRkk5n/5v2JymCUz5aCp0kjTYIT1C+kO/siA1iSCAAAAAElFTkSuQmCC')\",\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/dcb52bba37231374f8f108547d0fb4da/a805e/7.png\",\n    \"srcSet\": [\"/static/dcb52bba37231374f8f108547d0fb4da/a2ead/7.png 259w\", \"/static/dcb52bba37231374f8f108547d0fb4da/6b9fd/7.png 518w\", \"/static/dcb52bba37231374f8f108547d0fb4da/a805e/7.png 572w\"],\n    \"sizes\": \"(max-width: 572px) 100vw, 572px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\"> Contact us </p>\\n        </div>\\n        <CDBInput [material]=true hint=\\\"Name\\\" type=\\\"text\\\"></CDBInput>\\n        <CDBInput [material]=true hint=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <p class=\\\"text-center m-0\\\">Subject</p>\\n        <CDBSelect [options]=\\\"option\\\" selected=\\\"Feedback\\\"></CDBSelect>\\n        <CDBInput hint=\\\"Message\\\" type=\\\"textarea\\\"></CDBInput>\\n        <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n            <CDBInput [material]=true type=\\\"checkbox\\\"></CDBInput>\\n            <p class=\\\"m-0\\\">Send me a copy of this message</p>\\n        </div>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block my-3 mx-0\\\">\\n            Send\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Contrast Form Contact\"), 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\": \"611px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3f3a65d635677e81771642147319e377/36bb5/8.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\": \"134.36293436293437%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABJ0AAASdAHeZh94AAACNklEQVRIx61Uy27iMBQN4rGcfsb0E6ZSR5p2xIIdP4goAiRWIGDNB/ATSCiIkEACYSgJIcmtj4uDQ5MmM51IB9vX5vg+jq9C7FssFjQYDGg0Gn3AcDhMnAuMx2Pq9/s0nU5BRQp+ut0uKYryJdRqtSthr9fjxnK5TMVikUqlEhUKBfp2d0fPz7/p6ekXPf58pB8PD3R//52fxRmcrVQqfF2v16+E7Xb7yx5Wq9Ur4Ww2o2azyYlv0Wq16OWlxUcBeb/T6VCj0aDJZPJOGIYh/a8PXNzD8/lMnufR6XSiP4cDHV5fyXEcbsvCSZpHIQdBwBc+I95sNmRZW3KOx+jWPABH5KFY3IYPex6kEvp+QI7r8nARfj7PUjwUubRtm+zdjg4sl3lCDvKGjKl8UJAHCWSphEkf9kxWpPXGJJelQRDfyiWREKNlWWSaJu33++iPsPtSFMLu+z6HmCeGDDLDMGi73WYKOQdhQsgZxUjNIcsEvwWe7ViV7Z3N5ONG0gjCFHyqQzYid5AOcgk9JhXhQ0FSi5Lwx3ey5LCzCS9PSfYqqxehOXwqbOTryBqDe3mC6CLQH54i1kcGrLEPCAdShR0yQsPQaaXrrPOYXEYYtdWKdyFdN5jNouVSI1VdsIu8SDZR+xILtC6hQRRFYL1eX9qaFdvDHOfhuYgwRqgzrzwpJyIc2OfzedSB5D1IDIh1bEGI8FRVJU3TWEjLCFjf2uQ9dKmYh/KNf9OlZenEcig/n3+FIH8DrrebVTrjHIEAAAAASUVORK5CYII=')\",\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/3f3a65d635677e81771642147319e377/36bb5/8.png\",\n    \"srcSet\": [\"/static/3f3a65d635677e81771642147319e377/a2ead/8.png 259w\", \"/static/3f3a65d635677e81771642147319e377/6b9fd/8.png 518w\", \"/static/3f3a65d635677e81771642147319e377/36bb5/8.png 611w\"],\n    \"sizes\": \"(max-width: 611px) 100vw, 611px\",\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>\\n    <div style=\\\"background: black\\\" class=\\\"text-center text-white\\\">\\n        <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\">Contact Us</p>\\n    </div>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <CDBInput label=\\\"Name\\\" type=\\\"text\\\"></CDBInput>\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <p class=\\\"text-center m-0 text-muted\\\">Subject</p>\\n        <CDBSelect2 color=\\\"white\\\" [options]=\\\"option\\\" selected=\\\"Feedback\\\"></CDBSelect2>\\n        <CDBInput label=\\\"Message\\\" type=\\\"textarea\\\"></CDBInput>\\n        <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n            <CDBInput type=\\\"checkbox\\\"></CDBInput>\\n            <p class=\\\"m-0\\\">Send me a copy of this message</p>\\n        </div>\\n        <CDBBtn color=\\\"dark\\\" [outline]=true class=\\\"btn-block my-3 mx-0\\\">\\n            Send\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Login Form with Icons\"), 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\": \"616px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4dcbfab57302820018a849de5a9c6703/40040/9.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,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAABeUlEQVQ4y51SuU7DQBD1H8Cf0FIAgpYe0fADdEgcNQ2IKBUFCCGgBQklbbpALiQoqFCiJEWoSEjhWFbw+tp97GHHTmJz5ElP9o7Hb+bNrAYOSmkqfd8fY1oeY0xIQQsFRWCSSUjKE4USBeM/CdiEoNlsodv7RLfbw3D4NfY9RGqH8Q4EHNtGrfaEh8cymi0l/C/BpC4noWbGAtJ0QQHXdWEYBgYDHZZlYXJhqmhULIylCorhOo4Dm1sV4mFy1FHE+FL+ZDm0nXxNWFDc/d1yv9+HruuSpmkmXhUBMZJO533kLLFDn/qwbAKLXxfCbRPHhseTf2KqZcooZsWUoOt78pBrVbFdPMNB5Qa75SvJvcq1PO/zZzy2U7rE0fMdiOeImYwakoK2p4a7VchCO1yAll2FllmGdrLE39cwf7EJ7XRdnTMriseLmDvfgEGGiO9BCnpBh68fbdy+FZFvVJFrVBTr5YhBLM95Xy+h0H6R7qYshwuZBYyOL+UbUzRvlM7Npt4AAAAASUVORK5CYII=')\",\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/4dcbfab57302820018a849de5a9c6703/40040/9.png\",\n    \"srcSet\": [\"/static/4dcbfab57302820018a849de5a9c6703/a2ead/9.png 259w\", \"/static/4dcbfab57302820018a849de5a9c6703/6b9fd/9.png 518w\", \"/static/4dcbfab57302820018a849de5a9c6703/40040/9.png 616w\"],\n    \"sizes\": \"(max-width: 616px) 100vw, 616px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n        </div>\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\" icon=\\\"envelope\\\"></CDBInput>\\n        <CDBInput label=\\\"Password\\\" type=\\\"password\\\" icon=\\\"lock\\\"></CDBInput>\\n        <CDBBtn color=\\\"success\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Login\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Login Form with Outside Label\"), 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\": \"572px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ba6a38133f11e922421f9ee7a67d40fe/a805e/10.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\": \"93.05019305019306%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAABJ0AAASdAHeZh94AAABmUlEQVQ4y52US07DMBCGyxZRhFhwAbYcpzteEltWXUFB4gDcAQEtlDsgteJxAZaA2qwK6qZxAnHTxE5+bDePNnWM1JE+KR7Zv2fmT1KJoghlcM7nMO2N4xgyKnKjXOgoRtm+VFQJpg+6mEwm8AVhGML3fe0l6UVawWJ1lmXh+eUV/b6F94/P7FBxn1ZQe7vIMcaMlZUKep4Hx/1R2ISA8ejf2RlbluaEohqWYHI0SgTkbGeNyQTLXDWFNKzX65lnmDPfyiLTPGNcX6EM2W4YMgSijSCYIg+YZmg2hVJlyMh2BERBx36pYNGwwgxROsPchDhrVe4MggDD4VBfYZrIbjO0mF4sBQeDLyWuf23kkPkiPGEhH8XlLS8fGlO4+iJi3HTHqF97OLunOL3LkevzNkVjJt8QnLQoLh4oXMrVec4LgrVLgpWajY0Dgupeio3tYwc7dQebhwRrYl3dJ1gXrO4SbB3Z+B4FSohxnv8PpWDn7RdXjw5aXRfNjpMh15LbmVwzWbefXFCfJRXyfIZc9b8ccTz9s6fu/wEpBrSUlnvoPgAAAABJRU5ErkJggg==')\",\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/ba6a38133f11e922421f9ee7a67d40fe/a805e/10.png\",\n    \"srcSet\": [\"/static/ba6a38133f11e922421f9ee7a67d40fe/a2ead/10.png 259w\", \"/static/ba6a38133f11e922421f9ee7a67d40fe/6b9fd/10.png 518w\", \"/static/ba6a38133f11e922421f9ee7a67d40fe/a805e/10.png 572w\"],\n    \"sizes\": \"(max-width: 572px) 100vw, 572px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-4\\\">\\n            <p class=\\\"h4\\\"> Sign in </p>\\n        </div>\\n        <label htmlFor=\\\"defaultLoginEmail\\\" class=\\\"text-muted m-0\\\">\\n            Your email\\n        </label>\\n        <CDBInput id=\\\"defaultLoginEmail\\\" class=\\\"mt-n3\\\" type=\\\"email\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultLoginPassword\\\" class=\\\"text-muted m-0\\\">\\n            Your password\\n        </label>\\n        <CDBInput id=\\\"defaultLoginPassword\\\" class=\\\"mt-n3\\\" type=\\\"password\\\"></CDBInput>\\n        <CDBBtn color=\\\"primary\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Login\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Sign Up Form with Icon\"), 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\": \"632px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/aad92d9d6c0266a05aff16f4b5e241a8/084e2/11.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\": \"99.22779922779922%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABJ0AAASdAHeZh94AAAB4klEQVQ4y6VUPU/bUBSN+gOK1F/QqSN/BjGCuiEGlm4VE1SoAxtT9y5FIPgDFR0IMBOk8s1W0yJiv2fHTvyVwzu234sxjhPUqxz53Zt3T8657zktqEjTFEmSZM8yWIvj+Nmzbg+fjOFwiJYmZFKOat5UH0uokaZ5k2VZ+HnwC7d3d+h0zvD334NpfL5/gkK99jwPp50OrPt7XF3fwHbEC5WNhJxHkoxmUxfZ7AoS3TeWMIoi2LYN6brodrvZOgxD06SVla02EtaB86yebFld46HQZlS6JlRsVFR/aLJCGMtCSnQfH7M1ycv2qqc71Sk3RZW00TJtBkEA3/fR7/cxGAwMfFU3BzStQlqmXVedsqvuoBACUuW8j7QfBP1cUUGSFET/bVkTTLzYVNjr9TLLVMY11XEMw9JlZvCeEgz9EtQQxsqyC6/nwxGyAPNA2VMzVm8RoT7ZHmIsYTql5aYRGEK+vyrF5Z8Yh79DnFyGOL7IcXQeon3OdaTqI3DftRVj1F8ijGIWUixuSbTmHLz76GBm0cHbBQcfViRmP0m8XxZZzjq/fzNvY+mbhO6nQUMYFwp32h4+f3fwZVtg/YfAmsLXXYHNPYGNnTxnnd+vqn37Jx7y/poZ5rKJ5BVIzd+dJnwC3oIIkuWCNF4AAAAASUVORK5CYII=')\",\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/aad92d9d6c0266a05aff16f4b5e241a8/084e2/11.png\",\n    \"srcSet\": [\"/static/aad92d9d6c0266a05aff16f4b5e241a8/a2ead/11.png 259w\", \"/static/aad92d9d6c0266a05aff16f4b5e241a8/6b9fd/11.png 518w\", \"/static/aad92d9d6c0266a05aff16f4b5e241a8/084e2/11.png 632w\"],\n    \"sizes\": \"(max-width: 632px) 100vw, 632px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4 font-weight-bold\\\"> Sign up </p>\\n        </div>\\n        <CDBInput label=\\\"Your name\\\" type=\\\"text\\\" icon=\\\"user\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBInput label=\\\"Your email\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBInput label=\\\"Confirm your email\\\" type=\\\"email\\\" icon=\\\"exclamation-triangle\\\" iconClass=\\\"text-muted\\\">\\n        </CDBInput>\\n        <CDBInput label=\\\"Your Password\\\" type=\\\"password\\\" icon=\\\"lock\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBBtn color=\\\"primary\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Register\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Sign Up Form Outside Label\"), 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\": \"576px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2b8c50187fbd786552f6bd3336233e5f/533c1/12.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\": \"132.81853281853282%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABJ0AAASdAHeZh94AAACGUlEQVRIx6VUTU/bQBD1BVHaU/9By4kLAnGqgFML3KB/r9f+BG5InCoVQUorcaI5tCAwiWM+7MRO/JHYft3xesPa3jWhjPS0u2P7eWbnzRhpmiJJEohVQJwnk0nJ3wQygz7MsgxVU/majAjpGyWhONu2jfPz3zDNG/TsW3a+nT6vokbInWme6qQI3/M8tNttWFYPVs9mpHbph+K7WoRkdFdufwDP9+G4fQxHgTI1OSrZp4xQ7FPpLAokID8fj8fTYtQIZeJZQOY4DqIoUhOqCsOjyrTQ3qG4g1EQIAhDjNj9RXH8MtnQ6g9HBYYIw0iKUg9thDpxZxrdifflDBVVzkp3N0txhOwaZVMVriwVla9EmEjCJkETSNwPDls9Wl12Hj6/KKL1EjFl8glSF7YKjcKu9qqq5WYuisqeio6Kp40wZG0URXEubgJpscn006YImS6fCkFTZ8BGF+31cplh2jw1rqpkpmkiCAJ9yvle0Vo1FJV9uL9HXPS8MsKsICyhQiSjMeX8wTORFitkwoR1CFlwdorOx2V0t1bQ2VpF59MK26/C2tuA9XkT1u46utvc32HvdHfWcPNhEf7BPk+ZTW9OyDZk/rdD/J0zcPGqwDxfr96/xvXSW1y9W8DFwqP/8o2BP4YB9+sXTsjukhNSazFHPOjD/XnMcFLGjyO4re98lf2/WnBaRwjv7DxtkakxbTv8n2VS+5H9A+etIPEJcndhAAAAAElFTkSuQmCC')\",\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/2b8c50187fbd786552f6bd3336233e5f/533c1/12.png\",\n    \"srcSet\": [\"/static/2b8c50187fbd786552f6bd3336233e5f/a2ead/12.png 259w\", \"/static/2b8c50187fbd786552f6bd3336233e5f/6b9fd/12.png 518w\", \"/static/2b8c50187fbd786552f6bd3336233e5f/533c1/12.png 576w\"],\n    \"sizes\": \"(max-width: 576px) 100vw, 576px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\"> Sign up </p>\\n        </div>\\n        <label htmlFor=\\\"defaultRegisterName\\\" class=\\\"text-muted m-0\\\">\\n            Your name\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterName\\\" class=\\\"mt-n3\\\" type=\\\"text\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultRegisterEmail\\\" class=\\\"text-muted m-0\\\">\\n            Your email\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterEmail\\\" class=\\\"mt-n3\\\" type=\\\"email\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultRegisterEmailConfirm\\\" class=\\\"text-muted m-0\\\">\\n            Confirm your email\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterEmailConfirm\\\" class=\\\"mt-n3\\\" type=\\\"email\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n            Your password\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterPassword\\\" class=\\\"mt-n3\\\" type=\\\"password\\\"></CDBInput>\\n        <CDBBtn color=\\\"danger\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Register\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Subscription Form with Icon\"), 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\": \"577px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/162f9fc93ac0e87a2ac3c3adf6971980/065e2/13.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\": \"79.92277992277992%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABJ0AAASdAHeZh94AAABZ0lEQVQ4y51U227CMAzd/3/RtGmCPW9sH1DeQLBCb0lDr0nO7JSMUjUgZuk0bmMfX+L0CSTGmFlorWcRsrXW4okf/mWKkMzZXhFyhKkDSxzH2Gy22O33SLMM0XqNPM+90ZUPc1wRepIh4hAgiiK8Ld6xWC7x8bnC88srVl/fI7s7hLfKnGZzgZ0nZOl7jbIsUdc1qqqClNLp3saD4/rgnmiWUNMqhIBSyhEXReGIQwcxJnqo5NBYeQRL5qPn7LjME2XGetM0/8vQ9ZAIeSy4d1KWTmdiTpybb+wMbpUcFnsHk5L1OcOmsxAnDVkZgnZQtcGpuYD3yjNYr9pQD2mYE9GTgXXEjJbATmlJe9LgKAza3u8bdKQnoqPVuMsw6aFBnHeOsCWDwcGgUAb7TGObaOxo7fVAxmA9zlsKPCEcLjY5yxo/SYlDpnBIBxxJT3KF9Az/nW1iWtOici37+zmMR8I3+FEZj9EvMrrpwizGLvYAAAAASUVORK5CYII=')\",\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/162f9fc93ac0e87a2ac3c3adf6971980/065e2/13.png\",\n    \"srcSet\": [\"/static/162f9fc93ac0e87a2ac3c3adf6971980/a2ead/13.png 259w\", \"/static/162f9fc93ac0e87a2ac3c3adf6971980/6b9fd/13.png 518w\", \"/static/162f9fc93ac0e87a2ac3c3adf6971980/065e2/13.png 577w\"],\n    \"sizes\": \"(max-width: 577px) 100vw, 577px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4 font-weight-bold\\\"> Subscribe </p>\\n        </div>\\n        <CDBInput label=\\\"Your name\\\" type=\\\"text\\\" icon=\\\"user\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBInput label=\\\"Your email\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBBtn [outline]=true color=\\\"primary\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Send\\n            <CDBIcon [far]=true icon=\\\"paper-plane\\\"></CDBIcon>\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Subscription Form with Outside Label\"), 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\": \"600px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/6bed047502272da455263116c45854bf/0a47e/14.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\": \"91.11969111969113%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAABJ0AAASdAHeZh94AAABYklEQVQ4y5VUi27CMAzk/79urEPbNAmNCWkSUOgrbd43O11ZaNMOLJ2cOM7Fie2svPdwziVhbTy2N/MxmIdlxQN2Zj1GSlJ+w/4rIZ8wdmZb13UBWmsIIdDSOHXQJMKBMBZrDV42G6yfM7y+vSPLMjytMxiKJj58npB0WVWoG4GiLCHaNtiWrr8cIWmlNF3PkFbQxkyewDk/gpsnTEWSSkDqqrNvGBP2doJPwP1FvRhhJ2W4bq81/D9RLieFpG6akJS6bigp3e3bJaJkLER4XxGPEzX7hkPFz7VWEr8dcldhPyKzEZriDHPJI5xhq5JQwNZVmN+sF5dQv1NCvi5l1uSnoe/4WNIG9vANezrA7HfwNO/tffvp/AirZNg/JaRyEV+fkOcc8nSEJOeOiNrdFi3ZxfaD5r09rJMf+zutpoRDMlQrIKl0pGiuWtEPI6mvg47srNl/+CuvhOOf41GJ97L+AfjDi4M49p0uAAAAAElFTkSuQmCC')\",\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/6bed047502272da455263116c45854bf/0a47e/14.png\",\n    \"srcSet\": [\"/static/6bed047502272da455263116c45854bf/a2ead/14.png 259w\", \"/static/6bed047502272da455263116c45854bf/6b9fd/14.png 518w\", \"/static/6bed047502272da455263116c45854bf/0a47e/14.png 600w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\"> Subscribe </p>\\n        </div>\\n        <label htmlFor=\\\"defaultSubscribeName\\\" class=\\\"text-muted m-0\\\">\\n            Your name\\n        </label>\\n        <CDBInput id=\\\"defaultSubscribeName\\\" class=\\\"mt-n3\\\" type=\\\"text\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultSubscribeEmail\\\" class=\\\"text-muted m-0\\\">\\n            Your email\\n        </label>\\n        <CDBInput id=\\\"defaultSubscribeEmail\\\" class=\\\"mt-n3\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBBtn [outline]=true color=\\\"danger\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Send\\n            <CDBIcon [far]=true icon=\\\"paper-plane\\\"></CDBIcon>\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Contact Form with Icon\"), 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\": \"630px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3958182cbf0b976a566b70234cf8d233/f058b/15.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\": \"112.35521235521236%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAABJ0AAASdAHeZh94AAABm0lEQVQ4y51VW3LDIAzM/a/U9jN9Tn/bHiAfiZ3ENmDeoCIyOOD4kZaZHWyBV1ok4Y33HhDOuX8jceDY4IO1diBN89wYO8+/HwhzgrSglIKqrqFpWiCEAuccuo6AMebGSSK+IcyfD4cDPDw+wXb7DO8fn/D1/QMvr2/BybFwPEuYb1ga6bzyc5uNkPc9UJrkdcDCe1wfkeSJHAdUEEopgTEGXIhwbiQS4z4/QzgmvkvyWsksSsbo2jZkNcg+nU5R/tS5XSPzy5KxJFA2lowIsrXWK1JXJLuR7Hs6CD+ZjZCGRNShmBGci9WErGYZZ5SNUvMeXcJCYeMZ2kEK9mfCxTaWf0eEmOWmOQ9ZRulVVRWtORXZbFKmanGpJVcL29pcms8w/a61KaRPXl9/Gc6vSBa9Bs5KSG5ABEhhbtbQPlmHCCUNMKriBmuDE+vjTFsFjGjozrKw476eqeBI42lG6VdCuBAeKxpIw03TcaCdiKj3NGK/I4MN1xkRcK5ZjPxC6Mp/CkJwGe5EEbskQQgZgT2e23Ef2p11xT/lF3KzxpWz1SZUAAAAAElFTkSuQmCC')\",\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/3958182cbf0b976a566b70234cf8d233/f058b/15.png\",\n    \"srcSet\": [\"/static/3958182cbf0b976a566b70234cf8d233/a2ead/15.png 259w\", \"/static/3958182cbf0b976a566b70234cf8d233/6b9fd/15.png 518w\", \"/static/3958182cbf0b976a566b70234cf8d233/f058b/15.png 630w\"],\n    \"sizes\": \"(max-width: 630px) 100vw, 630px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4 font-weight-bold\\\"> Write to Us </p>\\n        </div>\\n        <CDBInput label=\\\"Your name\\\" type=\\\"text\\\" icon=\\\"user\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBInput label=\\\"Your email\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBInput label=\\\"Subject\\\" type=\\\"text\\\" icon=\\\"tags\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBInput label=\\\"Your message\\\" type=\\\"textarea\\\" icon=\\\"pencil-alt\\\" iconClass=\\\"text-muted\\\"></CDBInput>\\n        <CDBBtn [outline]=true color=\\\"secondary\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Send\\n            <CDBIcon [far]=true icon=\\\"paper-plane\\\"></CDBIcon>\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Contact Form with Icon\"), 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\": \"626px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/302b71138e2ef3508bf7b0f04e5380c3/af590/16.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\": \"136.67953667953668%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABJ0AAASdAHeZh94AAABqklEQVRIx61W23KDIBDN/39h25fmwTRtI2q4ySWyZVGMMWDIpDtzBoX1uHt2QXfgbRgGuFwuYVwC51JI+TnnkAp2eIGTz1h8eHkfOWZCHCPQ8K2f+z28vX9AVVVQHb48DtB23UwSfWOkd4RrI4TA8fgNtR9J00BdE6CUlRGi9X0PQvbAuQDpx9KUs4Raa0+qAnGv9Cj4qgAj3IRh1i+r4TqSHNbrDwmvb3aJCIebCJ3LpKymlIWQoHzKpZYvilJjUYQIxONaPu1/1TBFniVMNftWhBkNnW8bE1I11hZHuKkhFoM0rddRvk44Oiwr555IOaNhiiT0m7tHESGeMNYibADev9SHqCFlDM7+RKlJA92ZBhmGXMo4bms4OiBJae891DB1PG0dY9uEhUTFhOmzLwPvjxvATh+oZFGetweNLbkBwfQNcK4XBqRYrfl5TjVYk4gQoZUFRtW8S8YmB2Cdhq5RcDpK73MJQcXiKWmBMxUiXRH6b4cdoKmZf5hDOwGvyYkB+aVQ/1BoCZ/Xu5ZD7ecFXxEuNcDdgSeO8dATjLFXLOajX/ybiK32B6mgVt0MNbfLAAAAAElFTkSuQmCC')\",\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/302b71138e2ef3508bf7b0f04e5380c3/af590/16.png\",\n    \"srcSet\": [\"/static/302b71138e2ef3508bf7b0f04e5380c3/a2ead/16.png 259w\", \"/static/302b71138e2ef3508bf7b0f04e5380c3/6b9fd/16.png 518w\", \"/static/302b71138e2ef3508bf7b0f04e5380c3/af590/16.png 626w\"],\n    \"sizes\": \"(max-width: 626px) 100vw, 626px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-4\\\">\\n            <p class=\\\"h4\\\"> Write to Us </p>\\n        </div>\\n        <label htmlFor=\\\"defaultContactName\\\" class=\\\"text-muted m-0\\\">\\n            Your name\\n        </label>\\n        <CDBInput id=\\\"defaultContactName\\\" class=\\\"mt-n3\\\" type=\\\"text\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultContactEmail\\\" class=\\\"text-muted m-0\\\">\\n            Your email\\n        </label>\\n        <CDBInput id=\\\"defaultContactEmail\\\" class=\\\"mt-n3\\\" type=\\\"email\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultContactSubject\\\" class=\\\"text-muted m-0\\\">\\n            Subject\\n        </label>\\n        <CDBInput id=\\\"defaultContactSubject\\\" class=\\\"mt-n3\\\" type=\\\"text\\\"></CDBInput>\\n        <label htmlFor=\\\"defaultContactMessage\\\" class=\\\"text-muted m-0\\\">\\n            Your message\\n        </label>\\n        <CDBInput id=\\\"defaultContactMessage\\\" class=\\\"mt-n3\\\" type=\\\"textarea\\\"></CDBInput>\\n        <CDBBtn [outline]=true color=\\\"secondary\\\" class=\\\"btn-block mt-5 mx-auto\\\">\\n            Send\\n            <CDBIcon [far]=true icon=\\\"paper-plane\\\"></CDBIcon>\\n        </CDBBtn>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Form Login\"), 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\": \"562px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a38e8762c245dc068817dd26a4d4f2a0/6e88f/17.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\": \"123.16602316602317%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAYAAAAxFw7TAAAACXBIWXMAABJ0AAASdAHeZh94AAACcUlEQVQ4y41V227aQBA1UkQSogBSIsQLEhI85turSn1pvqDtQ/MF0HBPufiC7/eTGRsb29gOIx2td3b2eGZ2dlYIwxC+7yMIglLwWhZ1dswlJIQ8lqEoVXYJsZBMyoT1oihCVTVomo7jUS39SWJ7QRgbnz0LAh+vP1/x7fsP/H17w6/ff2DZTsb2K8KS0Fhs264NuZLQcZwITOB5HoreB0FZ7vJ5zBHquk75UrHf72GaZu0hlHmcI4yV+ZCrSiTFaUPlKXuFWku+k9CyYB2nRTeM6hzqmobdbkvY4XA4QJZlhEFZmcQ6k8imk0k5YfxHH67rpmAPWMeeWo4P8wTDjueWy6g5lDrRPGClAzuLQOe1oUi3NCpuRR0y1us1ZrMZ5vN5Cp5Pp1O8v/+j+QzLxRyLE3h9vVpl8kyEiXecr5eXF9zd3aHb7aLdbuPx8RHPz88Yj8cYDAZ4enqKdLzW6XRwf3+P4XAIRVEiDk5NSihJUrRREATc3t6i2Wzi5uYGrYcHjEYj9Ho9tFqtSMdrbNNoNNDv9yNnUsJsyB8fH1gul1hRGDxyChiLxYJwnmdtNptNPuS6Q3EcG6KsRCVkmhbdoHi8utvkmyXiwtUNOKcSMqjuikVf3HvRvsIwdl+SxKj/sfDpipRjlu32f+Tl+brWdJuElL3hBsHJ5u/pdII9hc3fnGdFOcKl76sabPZJ4JFvTLLBpZwipJvjObTmfe1h2lAtCwdRitqZcjxGJSXLEo4GeU43RCVe24s2XEfoUIPlEFVqFjGhDJlIVdPHhtIqmSEMF7kunyub4qtXL2GKylfv4r0tvMVnBGeUNFzm+gToclw1xI+GggAAAABJRU5ErkJggg==')\",\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/a38e8762c245dc068817dd26a4d4f2a0/6e88f/17.png\",\n    \"srcSet\": [\"/static/a38e8762c245dc068817dd26a4d4f2a0/a2ead/17.png 259w\", \"/static/a38e8762c245dc068817dd26a4d4f2a0/6b9fd/17.png 518w\", \"/static/a38e8762c245dc068817dd26a4d4f2a0/6e88f/17.png 562w\"],\n    \"sizes\": \"(max-width: 562px) 100vw, 562px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n        </div>\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBInput label=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <p class=\\\"mt-n3 text-right\\\">\\n            <CDBLink class=\\\"p-0\\\" to=\\\"/\\\">Forgot Password ?</CDBLink>\\n        </p>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block my-4 mx-0\\\">\\n            Sign in\\n        </CDBBtn>\\n        <p class=\\\"text-center\\\"> or sign in with</p>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"white\\\" class=\\\"m-0\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <hr />\\n        <p class=\\\"text-center\\\">Not a member? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Sign up</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Sign Up\"), 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\": \"627px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5234b447a68b66700d39744da6b1d670/e9c9b/18.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\": \"100.38610038610038%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABJ0AAASdAHeZh94AAACtklEQVQ4y4VTS08TURTmj7hG49KFrAygLlxgfCW6EqIL3OsCUdm4MNGQuFBJ3KgBDAngxkSD1vCwtdBCeUVNIBKTSmk7Q8s82unMtPN5zp2ZMgNtuMmXc+7c737ndacFtGq1WkNUq9UQmvEYvBzHQQs7TObNQTRajXh8PyTIEYICvq9pGv5tb0PXdRQKBRiVSujcX4cyDAoGs2Oh5ZVVIbq5uYlCce+QIPtNBesIRD243J45dds0Q16mWYGiKJBlmXwTwWCHgga+Nc2wWq3Btm1YliV8n9wIXLVzVMn75KCQcwCuWIUGVPGG1HDKHI7LzOclKnlXgKcszkNlun2TJJkgNRf0ycIPvzxmeNYJ7I+YMoMzLJVKyFGWHJ2RVSzkdMpId5DVXGwrwI7qwLQdL8Om79DhDSzqjVkxCNQnqoZhepZh2GRtB+5zbJChbbs9GJ9No/91Ck9Gf2LgzTrm1vKoWgbKZQOGQSiXCSWUDRNlCyJDblOoh6IHjhvh8eIWTo3M4Nx4FKfHohj+nYalF6Foe1A1skqRBlWEXjEh0YDNerP3/zSRoaqZ2MmUsP63iPgfGYmtXWE30gp2ZZsmT9OXSESyXD9nEKjX2TIydE/XzXDJU7EMrt+NoXcgiTuPEuj1cLs/jpt9UXT3xdB9Pyb8nv559DxwcevhAm7ci2EumfX+Kk/w40oWF54ncHVoCZdfLgpcepFE1+AMup5GcHFwGl3Pvgl7hc4EXi3h2lBK3Iv8yrvT9gUnN3JoG1vC+Q+rODuxgs6JZXQMR9E+EkfH+zjODH1G5+Qq2t/OomM0Ls6Zx/y2sRQ+bUlhwXfpPI5NL+Pk9zWcIByfTqE1kkDrlwW0fiVMzZPlPdlIUpwzj/l8bzIju4J+D3foQf9QVSRUDQs+FJWs6tkGewLz+V7etOpD+Q+v4shogGH3jgAAAABJRU5ErkJggg==')\",\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/5234b447a68b66700d39744da6b1d670/e9c9b/18.png\",\n    \"srcSet\": [\"/static/5234b447a68b66700d39744da6b1d670/a2ead/18.png 259w\", \"/static/5234b447a68b66700d39744da6b1d670/6b9fd/18.png 518w\", \"/static/5234b447a68b66700d39744da6b1d670/e9c9b/18.png 627w\"],\n    \"sizes\": \"(max-width: 627px) 100vw, 627px\",\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>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <div class=\\\"text-center mt-4 mb-2\\\">\\n            <p class=\\\"h4\\\"> Sign up </p>\\n        </div>\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBInput label=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <div class=\\\"d-flex align-items-center\\\">\\n            <CDBCheckbox class=\\\"mr-2\\\"></CDBCheckbox>\\n            <p class=\\\"mb-0 ml-2\\\">Accept the <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">terms and conditions\\n                </CDBLink>\\n            </p>\\n        </div>\\n        <div class=\\\"d-flex mt-4 align-items-center\\\">\\n            <CDBBtn color=\\\"none\\\"\\n                style=\\\"background: linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\"\\n                class=\\\"btn-block mx-0\\\">\\n                Sign up\\n            </CDBBtn>\\n            <p class=\\\"ml-auto mb-0\\\">Have an account? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Log in</CDBLink>\\n            </p>\\n        </div>\\n    </CDBCardBody>\\n    <div class=\\\"pt-4\\\"\\n        style=\\\"background: linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\">\\n        <p class=\\\"text-center m-0\\\"> or sign up with</p>\\n        <div class=\\\"row mb-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n    </div>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Login Form\"), 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\": \"610px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ba3f71e952e6165400b56cfab98e58e5/5aae9/19.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\": \"109.26640926640927%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAABJ0AAASdAHeZh94AAADKUlEQVQ4y6VUW08TURDmd5iYFPgLvplIARMJqFhCFFCkL775aIyY+KAmJKhcxMQYY0QwSiIJQRQhEYEaCqX3WhR8UUAosLttodAt3Us/5+z2CqUxcZNvZ87MnO/MnMsUgb5QKAani4Pby8PtyYUrC+48cLl5+PwC4nGFUaGI/WxE1HTDCnOrDS235nJgbp2H+bZdQ8sBP4u/cnMW1+87EAzHMoSzSwLqHtnR2O1CQ7cTDV1J0PjiAyvq26YIk7jU6dBsKT+LryfbtWdeCJH9DKHlVxCnXzhxts+Dmldu1PR7Uc1knxdVz60w3nsDY9s7VPe6kn4f+fTYMy/daBz4Bm43i3DyTwgnhzyoHPGh4oMfxrczKB9yoXzYg7LeCVR+WkT5oAPGgVlUjH5HWf8UjIN2VFLsqWEvTGML4KJZhB83Qzj2xY3SaS9Kpn0oHreheNKDErIZRiyazTA+B8PYHEq++mEYtaL4swOlFh+OU9yJGT8CsSzCxaiI9rUNdAa20LG+iY4NDh1MZ9jkMzYGpjNbMuYhjZ9ubGFHlnXCBPsntP9/fQlVRSKVoUIDmUglRUWcVorLCukKZGYvAEmTCU1XCemSUwOJyMLhMCGESCSir0wLHQU2L1vPIcw4dGfKltLzIXvBvIRMsiwVKpdBJr1QhqyK7LmHSpZp73iehyAI9L6DWvlqvlKTcnllRZtzdIYEhQ4mBVY+OzBF8yNdIh2pDmRseQkLXAoqb5sy5hGKSuCoDwTpHocJMuNOHDhllg37onsUvCVS2QQuCdKFoITAxi6Wl3msB/awEohhZV3EWkCktqVqC+YQSrLey17PrKKi3Ya6Hidqux2ofezE+a55VN15j+q7YzA9ceMC2Uw9DoIT57rs8K9u6/uvZBMqOuHg702YLAswzy3hqoafaLb+QNO4FU0TdjQn7S1Mzi7iMvkWw7uHCdN7qG02nZoUhyRGIcdEqPF9MilQZQnKfoxsUcSpEciSokEtfLH1I4iKIjiOpy68rUkhGKK9FMDxQbpSPLidOAL0kLYoOVHWe8GRL0XDP3WDRBpqvrfMXkZK/hvUHJm6dn8B7gsxsNOocWcAAAAASUVORK5CYII=')\",\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/ba3f71e952e6165400b56cfab98e58e5/5aae9/19.png\",\n    \"srcSet\": [\"/static/ba3f71e952e6165400b56cfab98e58e5/a2ead/19.png 259w\", \"/static/ba3f71e952e6165400b56cfab98e58e5/6b9fd/19.png 518w\", \"/static/ba3f71e952e6165400b56cfab98e58e5/5aae9/19.png 610w\"],\n    \"sizes\": \"(max-width: 610px) 100vw, 610px\",\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>\\n    <div style=\\\"background: linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\"\\n        class=\\\"text-center\\\">\\n        <p class=\\\"h5 mt-2 mt-5 mb-2 font-weight-bold\\\">Login</p>\\n        <div class=\\\"row mb-3 d-flex justify-content-center\\\">\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"linkedin-in\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"none\\\" class=\\\"m-0\\\" style=\\\"box-shadow: none\\\">\\n                <CDBIcon [fab]=true icon=\\\"github\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n    </div>\\n    <CDBCardBody class=\\\"mx-4\\\">\\n        <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n        <CDBInput label=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n        <p class=\\\"text-right\\\">Forgot <CDBLink class=\\\"d-inline p-0 ml-auto\\\" to=\\\"/\\\">Password ?</CDBLink>\\n        </p>\\n        <CDBBtn color=\\\"none\\\"\\n            style=\\\"background: linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\"\\n            class=\\\"btn-block my-3 mx-0 font-weight-bold\\\">\\n            Login\\n        </CDBBtn>\\n        <p class=\\\" text-right mt-4\\\">Don't have an account? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Sign Up\\n            </CDBLink>\\n        </p>\\n\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Sign Up with Background Image\"), 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\": \"572px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/07e4e96d0ef6de14c9fe2ea9d8a5729d/a805e/20.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\": \"111.96911196911196%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAABJ0AAASdAHeZh94AAAEP0lEQVQ4y62UaW9UVRiAp8tMO3Rm2unsnX3f986+z7RFNKlGZBFBoUAXCe5oVFQEJMYf4DeUpK2JCfjBBBJ/AP4Rf0UJ4fG9M0SZfjTe5Jlz7j33POd933PmqpDri+tf4vV5KBRy5LJpCrkMxXyGZaFUyFIuKuSoLI+oDsnTqBTJp2OcP/cmT548UVSolJ+b394gGY/SrFdpVEs0a0K9TLu+TEehUaLbKNNtCq0aPYV2jZVuQ6QFti9fGBfeunmDTCIqE6siK9OqV0RUptnuU+8do9Xt0xY6vT79dp1+pyE0We23h4vvbF4cF34nwlwyNly9rciaVXqNZSpHzxA/+QOF9ffIr78v7VVW22UG3SaDTp3VXotmtSgRbowL79z6hkI6Sq9ZEWFJopMUpd9vleWZpFkvjpBFes2SRFkRYZW1fkOEBXYOp3zn5tfkE2EG7SqDliKSKGtSu1qRjkzo1ArDiBV5rzVCkStUC0k2N86OCz/5+EMsJj35bEJ2NklTCt0qpanJy+1yjoFENRBJX9pevUBjOUklE6aej5INO3jn1Pph4VWsizPEIm5CQRchv5tCwiuTAmTjQSFMJSs1rqSFFL1qmkE9y6CRpV6IsHXh1LjwypVtJiZVWOxWLNZFTGYjDrsJr9OC32nG57QScNrIx7zUsgHqWT+dUpz1tSalpJtL514fF+5sX0KlUmGz2XG7XHjcgseN07WEx2UhJWlFA07iQTfFpJ/lYfRhVlolEl4jb584Ni786IMt9FoVHqcJq8mAyWjAaFzAbDaxZJcI3TbCviUifidRaWM+B6mgg1xkSYSLvHX8qAgP/hVub29yRITJmEOOQViOjGyI1CuViuEOp/FEMriDCRz+FHZvEps3hTOUJxzPEHIucPq1tUMp72wxNa3CadcR8s6RiRrJxRcJunSYTfMs2fS4HfO47PMEPQvyjkTtMhH2WnCatbx6rDsu3Ny8PKyht/cVvhOPcK//iv/4feEBsVPC6d+InHxA6I37w77yLHzydwKv/MjsjEb+WWUODl4Qbm1tDoWh03+QvA6JT4XPIHINBt/DitC6DanPIXptRFz68Xf/QqfX05IPx8GLEW49j9Dir2AMvYTO02HO3cbg67Lg72GLrWAKr2CJrGIK9lhQngfXMPpbqNWTvHy0dSjly6Njo5udZFpau3mOgNuMx2Eg4JFa+Syyw1ZcjkU0ejNanYEZqblBNlIt51f5Qh0cvLDLFzfOj4RHZpnRqOXIzGO3WjEtGuXomLFJ326zYjDMo9bb0C2YmTuixaDTDudVSsVx4aWNC8OBOa0G7cwUmqkJpmXl6UlpJ5QoJtBMT6JRT6FVTzAraSr3s5rp4bxqpTQuPHvmzHDgv5JOJceFfz5+zE937/LL/j77e7vs7Y7Y398d3T9nd3fEP+N7e9y79zOPHj7k6dOnI+GzZ8/4vy7F9TfN2JKnNcqkzAAAAABJRU5ErkJggg==')\",\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/07e4e96d0ef6de14c9fe2ea9d8a5729d/a805e/20.png\",\n    \"srcSet\": [\"/static/07e4e96d0ef6de14c9fe2ea9d8a5729d/a2ead/20.png 259w\", \"/static/07e4e96d0ef6de14c9fe2ea9d8a5729d/6b9fd/20.png 518w\", \"/static/07e4e96d0ef6de14c9fe2ea9d8a5729d/a805e/20.png 572w\"],\n    \"sizes\": \"(max-width: 572px) 100vw, 572px\",\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\\n    style=\\\" background: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJh); background-size: cover; position: relative;\\\">\\n    <CDBMask overlay=\\\"darkStrong\\\" class=\\\"flex-center\\\"></CDBMask>\\n    <div style=\\\"z-index: 2\\\">\\n        <CDBCardBody class=\\\"mx-4\\\">\\n            <div class=\\\"text-center mt-5 mb-2\\\">\\n                <p class=\\\"h4 font-weight-bold text-primary\\\"> Sign <span class=\\\"h4 font-weight-bold\\\">up</span>\\n                </p>\\n            </div>\\n            <CDBInput [material]=true label=\\\"E-mail\\\" type=\\\"email\\\"></CDBInput>\\n            <CDBInput [material]=true label=\\\"Password\\\" type=\\\"password\\\"></CDBInput>\\n            <div class=\\\"d-flex mt-3 align-items-center justify-content-center\\\">\\n                <CDBCheckbox></CDBCheckbox>\\n                <p class=\\\"text-white mb-0 ml-2\\\">Accept the <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">terms and\\n                        conditions</CDBLink>\\n                </p>\\n            </div>\\n            <CDBBtn color=\\\"primary\\\" class=\\\"btn-block mx-0 my-4\\\">\\n                Sign up\\n            </CDBBtn>\\n            <p class=\\\"text-white text-center mb-5\\\">Have an account? <CDBLink class=\\\"d-inline p-0\\\" to=\\\"/\\\">Log\\n                    in\\n                </CDBLink>\\n            </p>\\n        </CDBCardBody>\\n    </div>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\n\")), mdx(\"h2\", null, \"Sign In Forms\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"876px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3072f127d2d2af56b2798a96cae03d55/1b1d5/21.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\": \"101.15830115830116%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABJ0AAASdAHeZh94AAACFklEQVQ4y61UPY/aQBA9HTWGS01Fgy7SpaWiIVfy3xAFSORaQBQI8QeiKH8guo4il0NgwGD8hQ0G25iXnTX47EAuJLmRnnZnPXo7M36zV7vdDkd43sv+b+D7frheua6L/X6P/zUi8zzvQMicyWSCMYNhGFBVDXQFXXQJTgnZYb/fx+cvX/H96QnfHh950D8T+v5bl7z3sVqtYSyXsO1N0GwW4F8IyvKkZOrdZCphKklYLBSYpoklu+A1UIyqqtA0nXMQ16FkH47jYrPZYLvd8r3rejzgVXhBDGX2Sw9ZyWsq2eRkxxIuQbQ1sZIVRcFwJGIkipBlmZWh8XICaAeoMei6zuUmsTaRhSW/hbCDSYuU3Ol0UKlUUKvVUK1WY3h4+IR6vX5yTrHlchm9Xu8lQ2Il9mKxiEQigXQ6DUFIIpkMIAgCstksMpkMUqkU92klvLu5QeL6GqVSiRPSDw0zNE2L/36N9UXXDSajJRTWpwXrrSwv+Er+bDaDOB6zMZ2y/k3x43mAOfse6yER2rYNa7WCZREs7v/O6HLSIIH0u2YK4TqM9vD4BBHISLiNRgPdbhftdpuvrVYLzWaTZeLEpHUyKeREZ5JMZPLJ5XIoFArI5/O4v/+Iu7sPeH97G2YfVcdZwujrQZnSGFL/JGmG+VzG82CA4XB0Nv5E2JcYf9Ej1USNOEJCx3G486fZpZhzcXRGHLT/CY2Nza/N6hUDAAAAAElFTkSuQmCC')\",\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/3072f127d2d2af56b2798a96cae03d55/1b1d5/21.png\",\n    \"srcSet\": [\"/static/3072f127d2d2af56b2798a96cae03d55/a2ead/21.png 259w\", \"/static/3072f127d2d2af56b2798a96cae03d55/6b9fd/21.png 518w\", \"/static/3072f127d2d2af56b2798a96cae03d55/1b1d5/21.png 876w\"],\n    \"sizes\": \"(max-width: 876px) 100vw, 876px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"), \"\\n\", 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\": \"872px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e8fdbce9bf4d84937c82af2dd9fb1dc5/65654/22.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\": \"101.93050193050193%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABJ0AAASdAHeZh94AAACJUlEQVQ4y5VUS27iQBDNNdjyWbBBmqBwADTZcIDkHIgFICQuMBESYoHgXBPNRIQBRjEYxuAfxjZg3nTVYMcGMyQlPZlqul5Xvarum/1+D8Jutwvgr30GftzNdrvF4XBA1E796+Z5HpMyoeft8Ws0wmg8wXQ2e6cVB8WBbL1eY7VaMXRdjxLSptfXIb4/P+PHzxcs/iicfhypv6YoCgaDAYbDIWYiCb/sY4YeHMeBaZqwLEucbsXIEDV/P2W62WxOM/TEog1TELnullK40oA9E4QzPyt5KbSQplO8vUmYLxasi6Zp/4VuGJBlmWPIiCsomb6O4/Ip5H8GZxmSQ1qomg5baHM6l5cQ3ndWMpU5Go8xnvyGPJ9juVxyJxVl+e83+2EoPDKSJJ2XfK2jH7FgbPyU2+02KpUK6vU6arVaBM1mE41GI/Cr1SqD9pbLZXS73fcMicx1XZRKJSQSCaTTaSSTyQCpVAqFuzvc3n4J1tLpFK9nMhmOeXx4YELiCQ22i41tH+Gwb4pGGeaax8PgIbagqhpruFqprO1MnkPTDZZtG+4y3RCDAgWIgPxLRjOoqiqTU2PoxhxOu0ykvrBk1MWnp2/o9XrodDro9/usc6vVErfKChrBc3icxwhh+Bkim0wmyGazKBaLKBQKuL//inw+j1wux7fIfyQuPF9e7DNlCx0dIbR91JQ0ozLjXqAI4Ydn7VhanBFxQEjtpu81UMCl/3yOv0TayeJFF6HoAAAAAElFTkSuQmCC')\",\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/e8fdbce9bf4d84937c82af2dd9fb1dc5/65654/22.png\",\n    \"srcSet\": [\"/static/e8fdbce9bf4d84937c82af2dd9fb1dc5/a2ead/22.png 259w\", \"/static/e8fdbce9bf4d84937c82af2dd9fb1dc5/6b9fd/22.png 518w\", \"/static/e8fdbce9bf4d84937c82af2dd9fb1dc5/65654/22.png 872w\"],\n    \"sizes\": \"(max-width: 872px) 100vw, 872px\",\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    \"), \"\\n\", 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5470a76af5e659e78e49d4c804a54c3c/8802b/23.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\": \"81.46718146718148%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABJ0AAASdAHeZh94AAACWUlEQVQ4y3VTy04iURDt/9A9DJFxpQk/4B/AuHQBK2fpn5CMC2fphAWJEwxL185CZgcGRhEF5KHTNA1NN908ztxTejvgaCWV+zp17qm6dY35fI7FYoHlcinO+VufzWYgTtt7GO0GwfQgCMS5+dZ83xdC3w/geZ5cTNOjnpPH4MSyLFxdlVCt/YHjTEKADiAhrXF/j8r1NYa2LevhcIi7uzvcq31eFCpkoKhbufE9hc5kgsHAgqWIGMx9ktr2KCyLoVMxFdAejeSm6XQq7rpeWAriuCah67pyTkISMWaNkAvLGmKgUh+PHQmgO44jgauEpjkQ7OQVQ6dK4kLCQBGOVTCVMhX98nrUKXsqiDXWalZdd0OYcr//hKfnZ1UPGyOVOt00zbX6UH2318dftc9zjWUcFcqjiEKVEgPpVPrRo3jeVNV5rEjGKmb2Hy5UyDo8Pj6i0+nI2O120ev1ZM066v6k4oeHB7RaLTSbTcHqOH2pQeaLiwtEIhHEYp+ws7OD3d1dbG1tYXNzE9lsNlRwdHSEjY0NxONxJBIJbH/eRjQaVXExlMtlwUhj85UqlYo06e3tLW5ubqRZuUelulepplaricp6vS74RqOBarUqWUoN9S/gZiqVQiaTwdfDQ+zt7aFYLMqZ7jva8fE3JJNJHBwcIJ1OY3//i3rQflhrg/Whtdtt5HI5nJ2doVAo4OTkO0ql33Kme5F2efkL+Xxe4X6icH6O09Mf0iHho+h03rPZbB5+Sxb8I1zwyiGEBOvv5q50P933X77g+ndUZ+pPu+5E5p73gtPf7x8+96F+/xzuIgAAAABJRU5ErkJggg==')\",\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/5470a76af5e659e78e49d4c804a54c3c/e3189/23.png\",\n    \"srcSet\": [\"/static/5470a76af5e659e78e49d4c804a54c3c/a2ead/23.png 259w\", \"/static/5470a76af5e659e78e49d4c804a54c3c/6b9fd/23.png 518w\", \"/static/5470a76af5e659e78e49d4c804a54c3c/e3189/23.png 1035w\", \"/static/5470a76af5e659e78e49d4c804a54c3c/8802b/23.png 1135w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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 class=\\\"shadow\\\">\\n    <CDBCardBody class=\\\"p-5\\\">\\n        <div class=\\\"mt-4 mb-5\\\">\\n            <p class=\\\"h2 font-weight-bold\\\">Sign up</p>\\n        </div>\\n        <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n            Username\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterUsername\\\" [background]=true hint=\\\"Username\\\" class=\\\"mt-n3\\\" type=\\\"text\\\">\\n        </CDBInput>\\n        <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n            Password\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterPassword\\\" [background]=true hint=\\\"Password\\\" class=\\\"mt-n3\\\" type=\\\"password\\\">\\n        </CDBInput>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block mb-3 mt-5\\\">\\n            Sign up\\n        </CDBBtn>\\n        <p class=\\\"text-muted\\\">By Clicking sign up, you agree to the Contrast <CDBLink style=\\\"font-weight: 600\\\"\\n                class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">terms and conditions\\n            </CDBLink>\\n        </p>\\n        <div class=\\\"d-flex align-items-center\\\">\\n            <span style=\\\"border: 0.5px solid black; width: 45%\\\"></span>\\n            <span class=\\\"text-center\\\" style=\\\"width: 10%\\\">OR</span>\\n            <span style=\\\"border: 0.5px solid black; width: 45%\\\"></span>\\n        </div>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"dark\\\" [flat]=true class=\\\"mx-2\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <p class=\\\"text-muted text-center\\\">Have an Account? <CDBLink style=\\\"font-weight: 600\\\"\\n                class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">Sign In</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n<CDBCard class=\\\"shadow\\\">\\n    <CDBCardBody class=\\\"p-5\\\">\\n        <div class=\\\"my-4 d-flex align-items-center\\\">\\n            <div>\\n                <p class=\\\"h4 font-weight-bold\\\">Sign up</p>\\n                <p class=\\\"m-0\\\" style=\\\"font-weight: 600\\\">Let's get started</p>\\n            </div>\\n            <div class=\\\"ml-auto\\\">\\n                <CDBBtn [outline]=true color=\\\"dark\\\" class=\\\"px-4\\\" style=\\\"font-weight: 600\\\">Sign Up\\n                </CDBBtn>\\n            </div>\\n        </div>\\n        <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n            Username\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterUsername\\\" [background]=true hint=\\\"Username\\\" class=\\\"mt-n3\\\" type=\\\"text\\\">\\n        </CDBInput>\\n        <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n            Password\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterPassword\\\" [background]=true hint=\\\"Password\\\" class=\\\"mt-n3\\\" type=\\\"password\\\">\\n        </CDBInput>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block mb-3 mt-5\\\">\\n            Sign up\\n        </CDBBtn>\\n        <p class=\\\"text-muted\\\">By Clicking sign up, you agree to the Contrast <CDBLink style=\\\"font-weight: 600\\\"\\n                class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">terms and conditions\\n            </CDBLink>\\n        </p>\\n        <div class=\\\"d-flex align-items-center\\\">\\n            <span style=\\\"border: 0.5px solid black; width: 45%\\\"></span>\\n            <span class=\\\"text-center\\\" style=\\\"width: 10%\\\">OR</span>\\n            <span style=\\\"border: 0.5px solid black; width: 45%\\\"></span>\\n        </div>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"dark\\\" [flat]=true class=\\\"mx-2\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <p class=\\\"text-muted text-center\\\">Have an Account? <CDBLink style=\\\"font-weight: 600\\\"\\n                class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">Sign In</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n</div>\\n<div class=\\\"example\\\">\\n<CDBCard class=\\\"shadow\\\">\\n    <CDBCardBody class=\\\"p-5\\\">\\n        <div class=\\\"mt-4 mb-5\\\">\\n            <p class=\\\"h2 font-weight-bold\\\">Sign in</p>\\n        </div>\\n        <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n            Username\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterUsername\\\" [background]=true hint=\\\"Username\\\" class=\\\"mt-n3\\\" type=\\\"text\\\">\\n        </CDBInput>\\n        <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n            Password\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterPassword\\\" [background]=true hint=\\\"Password\\\" class=\\\"mt-n3\\\" type=\\\"password\\\">\\n        </CDBInput>\\n        <CDBLink style=\\\"font-weight: 600\\\" class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">Forgot Password?</CDBLink>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block mb-3 mt-5\\\">\\n            Sign in\\n        </CDBBtn>\\n        <div class=\\\"d-flex align-items-center\\\">\\n            <span style=\\\"border: 0.5px solid #555; width: 45%\\\"></span>\\n            <span class=\\\"text-center\\\" style=\\\"width: 10%\\\">OR</span>\\n            <span style=\\\"border: 0.5px solid #555; width: 45%\\\"></span>\\n        </div>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"dark\\\" [flat]=true class=\\\"mx-2\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <p class=\\\"text-muted text-center\\\">Don't have an Account? <CDBLink style=\\\"font-weight: 600\\\"\\n                class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">Sign Up</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n<CDBCard class=\\\"shadow\\\">\\n    <CDBCardBody class=\\\"p-5\\\">\\n        <div class=\\\"my-4 d-flex align-items-center\\\">\\n            <div>\\n                <p class=\\\"h4 font-weight-bold\\\">Sign in</p>\\n                <p class=\\\"m-0\\\" style=\\\"font-weight: 600\\\">Welcome Back.</p>\\n            </div>\\n            <div class=\\\"ml-auto\\\">\\n                <CDBBtn [outline]=true color=\\\"dark\\\" class=\\\"px-4\\\" style=\\\"font-weight: 600\\\">Sign Up\\n                </CDBBtn>\\n            </div>\\n        </div>\\n        <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n            Username\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterUsername\\\" [background]=true hint=\\\"Username\\\" class=\\\"mt-n3\\\" type=\\\"text\\\">\\n        </CDBInput>\\n        <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n            Password\\n        </label>\\n        <CDBInput id=\\\"defaultRegisterPassword\\\" [background]=true hint=\\\"Password\\\" class=\\\"mt-n3\\\" type=\\\"password\\\">\\n        </CDBInput>\\n        <CDBLink style=\\\"font-weight: 600\\\" class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">Forgot Password?</CDBLink>\\n        <CDBBtn color=\\\"dark\\\" class=\\\"btn-block mb-3 mt-5\\\">\\n            Sign in\\n        </CDBBtn>\\n        <div class=\\\"d-flex align-items-center\\\">\\n            <span style=\\\"border: 0.5px solid #555; width: 45%\\\"></span>\\n            <span class=\\\"text-center\\\" style=\\\"width: 10%\\\">OR</span>\\n            <span style=\\\"border: 0.5px solid #555; width: 45%\\\"></span>\\n        </div>\\n        <div class=\\\"row my-3 d-flex justify-content-center\\\">\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn color=\\\"dark\\\" [flat]=true class=\\\"mx-2\\\">\\n                <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n            </CDBBtn>\\n            <CDBBtn [flat]=true color=\\\"dark\\\">\\n                <CDBIcon [fab]=true icon=\\\"google-plus-g\\\"></CDBIcon>\\n            </CDBBtn>\\n        </div>\\n        <p class=\\\"text-muted text-center\\\">Don't have an Account? <CDBLink style=\\\"font-weight: 600\\\"\\n                class=\\\"d-inline p-0 text-dark\\\" to=\\\"/\\\">Sign Up</CDBLink>\\n        </p>\\n    </CDBCardBody>\\n</CDBCard>\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n  selector: 'app-forms',\\n  templateUrl: './forms.component.html',\\n  styleUrls: ['./forms.component.scss'],\\n})\\nexport class FormsComponent implements OnInit {\\n  option = [\\n    {\\n      text: 'Select Option',\\n      icon: 'stack-overflow',\\n    },\\n    {\\n      text: 'Another Option',\\n      icon: 'reddit',\\n    },\\n    {\\n      text: 'Option 3',\\n      icon: 'instagram',\\n    },\\n    {\\n      text: 'Option 4',\\n    },\\n    {\\n      text: 'Last Option',\\n    },\\n  ];\\n\\n  constructor() {}\\n\\n  ngOnInit(): void {}\\n}\\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 Input Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {FormsModule} from '@angular/forms';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Input Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Input 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  }), \"containerClass\"), 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 class to wrapping div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"containerClass=\\\"wrapper\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"error\"), 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 error message for the labels data-error attribute\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"error=\\\"Ouch!\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hint\"), 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 placeholder for the Input\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"hint=\\\"Placeholder\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"value\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number, Boolean or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"The value of the input element (use with the controlled input)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"value=\\\"I am controlled\\\" onChange={this.handleChange}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"material\"), 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  }), \"Changes component styles for material theme\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"material=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"valueDefault\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"The default value of the input (use with the uncontrolled input)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"valueDefault=\\\"I am uncontrolled\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"id\"), 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  }), \"Required! Set the id of the input element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"id=\\\"myId\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"label\"), 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  }), \"Add label to the component; you can attach jsx elements (f.e. links)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"label=\\\"My custom input\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"labelClass\"), 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  }), \"Add custom class to label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"labelClass=\\\"My custom label class\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"labelId\"), 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 custom id to label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"labelId=\\\"myId\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"lg\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes size of the component; available \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lg\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"sm\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"size=\\\"lg\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"success\"), 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 success message for the labels data-success attribute\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"success=\\\"Great!\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"type\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"text\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"The type of the input element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"type=\\\"checkbox\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"inputRef\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Object or function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Allows to attach Angular Ref to the input component; accepts only Callback Ref\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"inputRef={ref => this.myRef = ref }\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), 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 font awesome icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"caret-right\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconBrand\"), 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  }), \"Use this property to set brand icon (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fab\"), \")\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"twitter\\\" iconBrand=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconLight\"), 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  }), \"Use this property to set light icon (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fal\"), \")\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"twitter\\\" iconLight=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconRegular\"), 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  }), \"Use this property to set regular icon (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"far\"), \")\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"twitter\\\" iconRegular=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconClass\"), 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 to icon element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"caret-right\\\" iconClass=\\\"my-class\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disable\"), 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  }), \"Disables Input component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"disabled=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"group\"), 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  }), \"Add .form-group class to the wrapping div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"error=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"filled\"), 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  }), \"Add filled-in style to checkbox/radio button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"type=\\\"checkbox\\\" filled=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"validate\"), 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  }), \"Adds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \".validate\"), \" class to the Input component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"validate=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"gap\"), 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  }), \"Creates gap inside checkbox/radio button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"type=\\\"checkbox\\\" gap=true\")))), 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":[{"url":"#forms","title":"Forms","items":[{"url":"#default-form-login","title":"Default Form Login","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"},{"url":"#typescript","title":"typescript"}]}]}]}]},{"url":"#contrast-form-login","title":"Contrast Form Login","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"},{"url":"#typescript-1","title":"typescript"}]}]}]}]},{"url":"#default-form-register","title":"Default Form Register","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"},{"url":"#typescript-2","title":"typescript"}]}]}]}]},{"url":"#contrast-form-register","title":"Contrast Form Register","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"},{"url":"#typescript-3","title":"typescript"}]}]}]}]},{"url":"#default-form-subscription","title":"Default Form Subscription","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"},{"url":"#typescript-4","title":"typescript"}]}]}]}]},{"url":"#contrast-form-submission","title":"Contrast Form Submission","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"},{"url":"#typescript-5","title":"typescript"}]}]}]}]},{"url":"#default-form-contact","title":"Default Form Contact","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"},{"url":"#typescript-6","title":"typescript"}]}]}]}]},{"url":"#contrast-form-contact","title":"Contrast Form Contact","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"},{"url":"#typescript-7","title":"typescript"}]}]}]}]},{"url":"#login-form-with-icons","title":"Login Form with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-8","title":"html"},{"url":"#typescript-8","title":"typescript"}]}]}]}]},{"url":"#login-form-with-outside-label","title":"Login Form with Outside Label","items":[{"items":[{"items":[{"items":[{"url":"#html-9","title":"html"},{"url":"#typescript-9","title":"typescript"}]}]}]}]},{"url":"#sign-up-form-with-icon","title":"Sign Up Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-10","title":"html"},{"url":"#typescript-10","title":"typescript"}]}]}]}]},{"url":"#sign-up-form-outside-label","title":"Sign Up Form Outside Label","items":[{"items":[{"items":[{"items":[{"url":"#html-11","title":"html"},{"url":"#typescript-11","title":"typescript"}]}]}]}]},{"url":"#subscription-form-with-icon","title":"Subscription Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-12","title":"html"},{"url":"#typescript-12","title":"typescript"}]}]}]}]},{"url":"#subscription-form-with-outside-label","title":"Subscription Form with Outside Label","items":[{"items":[{"items":[{"items":[{"url":"#html-13","title":"html"},{"url":"#typescript-13","title":"typescript"}]}]}]}]},{"url":"#contact-form-with-icon","title":"Contact Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-14","title":"html"},{"url":"#typescript-14","title":"typescript"}]}]}]}]},{"url":"#contact-form-with-icon-1","title":"Contact Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-15","title":"html"},{"url":"#typescript-15","title":"typescript"}]}]}]}]},{"url":"#form-login","title":"Form Login","items":[{"items":[{"items":[{"items":[{"url":"#html-16","title":"html"},{"url":"#typescript-16","title":"typescript"}]}]}]}]},{"url":"#sign-up","title":"Sign Up","items":[{"items":[{"items":[{"items":[{"url":"#html-17","title":"html"},{"url":"#typescript-17","title":"typescript"}]}]}]}]},{"url":"#login-form","title":"Login Form","items":[{"items":[{"items":[{"items":[{"url":"#html-18","title":"html"},{"url":"#typescript-18","title":"typescript"}]}]}]}]},{"url":"#sign-up-with-background-image","title":"Sign Up with Background Image","items":[{"items":[{"items":[{"items":[{"url":"#html-19","title":"html"},{"url":"#typescript-19","title":"typescript"}]}]}]}]},{"url":"#sign-in-forms","title":"Sign In Forms","items":[{"items":[{"items":[{"items":[{"url":"#html-20","title":"html"},{"url":"#typescript-20","title":"typescript"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-input-bootstrap-modules-used","title":"Contrast Input Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/forms.md"},"frontmatter":{"metaTitle":"Contrast Bootstrap Angular Forms","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":"48bcf955-44f5-50da-939f-2e453f1890e7"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}