{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/box","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"b3ebbc6e-21c1-534c-91b7-330893b67e8b","title":"Box","slug":"/contrast/react/components/box"},"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\": \"Box\",\n  \"metaTitle\": \"Box Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a Box Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Box\"), mdx(\"p\", null, \"React Bootstrap boxes are layout components which help to write build components for of the CSS utility needs.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Box component can be any component from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"React.ElementType\"), \" like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"span\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"img\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"video\"), \" etc. The basic component is a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \".\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", null, \"Span\"), mdx(\"div\", null, \"Div\"), mdx(\"p\", null, \"Paragraph\"), mdx(\"section\", null, \"Section\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBox, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Box = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBBox tag=\\\"span\\\">\\n              Span\\n            </CDBBox>\\n            <CDBBox tag=\\\"div\\\">\\n              Div\\n            </CDBBox>\\n            <CDBBox tag=\\\"p\\\">\\n              Paragraph\\n            </CDBBox>\\n            <CDBBox tag=\\\"section\\\">\\n              Section\\n            </CDBBox>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Display\"), mdx(\"p\", null, \"With CDBox component you can set any display CSS style from Bootstrap 4 to CDBox component like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"d-none\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"d-flex\"), \" etc.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"d-flex\"\n  }, \"Display FLex\"), mdx(\"div\", {\n    className: \"d-block\"\n  }, \"Display Block\"), mdx(\"div\", {\n    className: \"d-inline\"\n  }, \"Display Inline\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBox, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Box = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBBox display=\\\"flex\\\">\\n              Display Flex\\n            </CDBBox>\\n            <CDBBox display=\\\"block\\\">\\n              Display Block\\n            </CDBBox>\\n            <CDBBox display=\\\"none\\\">\\n              Dislpay None\\n            </CDBBox>\\n            <CDBBox display=\\\"inline\\\">\\n              Display Inline\\n            </CDBBox>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Flex\"), mdx(\"p\", null, \"With CDBox component you can set flexbox CSS styles to this component and render it on your website. You can use props \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"justifyContent\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flex\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alignItems\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alignContent\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alignSelf\"), \".\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"d-flex justify-content-center\"\n  }, \"Justify Content Center\"), mdx(\"div\", {\n    className: \"d-flex justify-content-end\"\n  }, \"Justify Content End\"), mdx(\"div\", {\n    className: \"d-flex flex-column\"\n  }, mdx(\"p\", null, \"Column\"), mdx(\"p\", null, \"Column\"), mdx(\"p\", null, \"Column\")), mdx(\"div\", {\n    className: \"d-flex\",\n    flex: \"row\"\n  }, mdx(\"p\", null, \"Row\"), mdx(\"p\", null, \"Row\"), mdx(\"p\", null, \"Row\")), mdx(\"div\", null, mdx(\"div\", {\n    className: \"d-flex flex-fill\"\n  }, mdx(\"div\", {\n    as: \"p\"\n  }, \"Fill\")), mdx(\"div\", {\n    className: \"d-flex flex-row align-items-start\"\n  }, \"Align Items Start\"), mdx(\"div\", {\n    className: \"d-flex flex-row align-items-center\"\n  }, \"Align Items Center\"), mdx(\"div\", {\n    className: \"d-flex align-content-start\"\n  }, \"Align Content Start\"), mdx(\"div\", {\n    className: \"d-flex align-content-center\"\n  }, \"Align Content Center\"), mdx(\"div\", {\n    className: \"d-flex align-self-start\"\n  }, \"Align Self Start\"), mdx(\"div\", {\n    className: \"d-flex align-self-center\"\n  }, \"Align Self Center\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBox, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Box = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBBox display=\\\"flex\\\" justifyContent=\\\"center\\\">\\n              Justify Content Center\\n            </CDBBox>\\n            <CDBBox display=\\\"flex\\\" justifyContent=\\\"end\\\">\\n              Justify Content End\\n            </CDBBox>\\n            <CDBBox display=\\\"flex\\\" flex=\\\"column\\\">\\n              <CDBBox tag=\\\"p\\\">Column</CDBBox>\\n              <CDBBox tag=\\\"p\\\">Column</CDBBox>\\n              <CDBBox tag=\\\"p\\\">Column</CDBBox>\\n            </CDBBox>\\n            <CDBBox display=\\\"flex\\\" flex=\\\"row\\\">\\n              <CDBBox tag=\\\"p\\\">Row</CDBBox>\\n              <CDBBox tag=\\\"p\\\">Row</CDBBox>\\n              <CDBBox tag=\\\"p\\\">Row</CDBBox>\\n            </CDBBox>\\n            <CDBBox display=\\\"none\\\">\\n              <CDBBox display=\\\"flex\\\" flex=\\\"fill\\\">\\n                <CDBBox tag=\\\"p\\\">Fill</CDBBox>\\n              </CDBBox>\\n              <CDBBox display=\\\"flex\\\" flex=\\\"row\\\" alignItems=\\\"start\\\">\\n                Align Items Start\\n              </CDBBox>\\n              <CDBBox display=\\\"flex\\\" flex=\\\"row\\\" alignItems=\\\"center\\\">\\n                Align Items Center\\n              </CDBBox>\\n              <CDBBox display=\\\"flex\\\" alignContent=\\\"start\\\">\\n                Align Content Start\\n              </CDBBox>\\n              <CDBBox display=\\\"flex\\\" alignContent=\\\"center\\\">\\n                Align Content Center\\n              </CDBBox>\\n              <CDBBox display=\\\"flex\\\" alignSelf=\\\"start\\\">\\n                Align Self Start\\n              </CDBBox>\\n              <CDBBox display=\\\"flex\\\" alignSelf=\\\"center\\\">\\n                Align Self Center\\n              </CDBBox>\\n            </CDBBox>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Colors\"), mdx(\"p\", null, \"With CDBox component you can set text CSS colors to element between \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBox\"), \" component.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"text-danger\"\n  }, \"Red Color\"), mdx(\"div\", {\n    className: \"text-success\"\n  }, \"Green Color\"), mdx(\"div\", {\n    className: \"text-warning\"\n  }, \"Yellow Color\"), mdx(\"div\", {\n    className: \"text-primary\"\n  }, \"Blue Color\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBox, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Box = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBBox color=\\\"red\\\">\\n              Red Color\\n            </CDBBox>\\n            <CDBBox color=\\\"green\\\">\\n              Green Color\\n            </CDBBox>\\n            <CDBBox color=\\\"yellow\\\">\\n              Pink Color\\n            </CDBBox>\\n            <CDBBox color=\\\"blue\\\">\\n              Blue Color\\n            </CDBBox>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Background Colors\"), mdx(\"p\", null, \"With CDBox component you can set background CSS colors to element to CDBox component.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"bg-success\"\n  }, \"Success Background\"), mdx(\"div\", {\n    className: \"bg-secondary\"\n  }, \"Secondary Background\"), mdx(\"div\", {\n    className: \"bg-danger\"\n  }, \"Danger Background\"), mdx(\"div\", {\n    className: \"bg-warning\"\n  }, \"Warning Background\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBox, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Box = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBBox bg=\\\"success\\\">\\n              Success Background\\n            </CDBBox>\\n            <CDBBox bg=\\\"secondary\\\">\\n              Secondary Background\\n            </CDBBox>\\n            <CDBBox bg=\\\"danger\\\">\\n              Danger Background\\n            </CDBBox>\\n            <CDBBox bg=\\\"warning\\\">\\n              Warning Background\\n            </CDBBox>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Box component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.\"), mdx(\"h2\", null, \"Contrast Box Import Statement\"), mdx(\"p\", null, \"In order to use Box component make sure you have imported proper module first.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBBox } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Box Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBBox component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox className=\\\"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  }), \"Change color of text in the CDBox component. Choose one of these from CDB: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"red\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pink\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"purple\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"deep-purple\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"indigo\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cyan\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"teal\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"yellow\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"amber\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"orange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"deep-orange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"brown\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue-grey\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cdb-color white\"), \". You can also chose default colors from Bootstrap like: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default,\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dark\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"muted\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox color=\\\"pink\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"alignContent\"), 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  }), \"Set align-content class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stretch\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"around\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox alignContent=\\\"start\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"alignItems\"), 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  }), \"Set align-items class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stretch\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox alignItems=\\\"start\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"alignSelf\"), 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  }), \"Set align-self class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stretch\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox alignSelf=\\\"start\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"bgColor\"), 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 of the box component. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dark\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox bgColor=\\\"light\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"display\"), 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  }), \"Set display to element. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"none\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inline\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inline-block\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"block\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"table\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"table-row\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"table-cell\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"flex\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inline-flex\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox display=\\\"inline\\\" ...>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"flex\"), 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  }), \"Set flex class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"row\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"column\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"row-reverse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"column-reverse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wrap\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"nowrap\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wrap-reverse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fill\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grow-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grow-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shrink-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shrink-1\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox flex=\\\"column\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"justifyContent\"), 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  }), \"Set justify-content to children od CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"around\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBox justifyContent=\\\"start\\\" ...>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"m\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String or Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"With margin you can set margin top/bottom/right/left/x/y from 0 to 5. You can use string or number.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBox m=\\\"5\\\" .../>, <CDBox mt=\\\"1\\\" .../>, <CDBox mb=\\\"4\\\" .../>, <CDBox my={2} .../>, <CDBox mx={4} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"p\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String or Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"With padding you can set padding top/bottom/right/left/x/y from 0 to 5. You can use string or number.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBox p=\\\"5\\\" .../>, <CDBox pt=\\\"1\\\" .../>, <CDBox pb=\\\"4\\\" .../>, <CDBox py={2} .../>, <CDBox px={4} .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#box","title":"Box","items":[{"url":"#examples","title":"Examples"},{"url":"#display","title":"Display"},{"url":"#flex","title":"Flex"},{"url":"#colors","title":"Colors"},{"url":"#background-colors","title":"Background Colors"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-box-import-statement","title":"Contrast Box Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/box.mdx"},"frontmatter":{"metaTitle":"Box Component for Contrast Bootstrap React","metaDescription":"Building a Box Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"b3ebbc6e-21c1-534c-91b7-330893b67e8b"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}