12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { AspectRatio } from 'welcome-ui/AspectRatio'\nimport { Box } from 'welcome-ui/Box'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"AspectRatio","pathToFile":"/AspectRatio/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"square","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#square","textDecoration":{"hover":"underline"},"children":"Square"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ratio default is set to ","position":{"start":{"line":4,"column":1,"offset":13},"end":{"line":4,"column":25,"offset":37}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"4 / 3","position":{"start":{"line":4,"column":25,"offset":37},"end":{"line":4,"column":32,"offset":44}}}],"position":{"start":{"line":4,"column":25,"offset":37},"end":{"line":4,"column":32,"offset":44}}},{"type":"text","value":", and the child image or video get and ","position":{"start":{"line":4,"column":32,"offset":44},"end":{"line":4,"column":71,"offset":83}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"object-fit: cover","position":{"start":{"line":4,"column":71,"offset":83},"end":{"line":4,"column":90,"offset":102}}}],"position":{"start":{"line":4,"column":71,"offset":83},"end":{"line":4,"column":90,"offset":102}}},{"type":"text","value":".","position":{"start":{"line":4,"column":90,"offset":102},"end":{"line":4,"column":91,"offset":103}}}],"position":{"start":{"line":4,"column":1,"offset":13},"end":{"line":4,"column":91,"offset":103}}},"children":["Ratio default is set to ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"4 / 3"}],", and the child image or video get and ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"object-fit: cover"}],"."]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can change ","position":{"start":{"line":6,"column":1,"offset":105},"end":{"line":6,"column":16,"offset":120}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ratio","position":{"start":{"line":6,"column":16,"offset":120},"end":{"line":6,"column":23,"offset":127}}}],"position":{"start":{"line":6,"column":16,"offset":120},"end":{"line":6,"column":23,"offset":127}}},{"type":"text","value":" by ","position":{"start":{"line":6,"column":23,"offset":127},"end":{"line":6,"column":27,"offset":131}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1","position":{"start":{"line":6,"column":27,"offset":131},"end":{"line":6,"column":30,"offset":134}}}],"position":{"start":{"line":6,"column":27,"offset":131},"end":{"line":6,"column":30,"offset":134}}},{"type":"text","value":" to get a square:","position":{"start":{"line":6,"column":30,"offset":134},"end":{"line":6,"column":47,"offset":151}}}],"position":{"start":{"line":6,"column":1,"offset":105},"end":{"line":6,"column":47,"offset":151}}},"children":["You can change ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"ratio"}]," by ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"1"}]," to get a square:"]}],"\n",["$","$L20","div-0",{"code":"import { AspectRatio } from 'welcome-ui/AspectRatio'\n\nconst Example = () => {\n return (\n \n

\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"AspectRatio","pathToFile":"/AspectRatio/docs/examples/ratio.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"video","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#video","textDecoration":{"hover":"underline"},"children":"Video"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Embed a youtube video","position":{"start":{"line":12,"column":1,"offset":234},"end":{"line":12,"column":22,"offset":255}}}],"position":{"start":{"line":12,"column":1,"offset":234},"end":{"line":12,"column":22,"offset":255}}},"children":"Embed a youtube video"}],"\n",["$","$L20","div-1",{"code":"import { AspectRatio } from 'welcome-ui/AspectRatio'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"AspectRatio","pathToFile":"/AspectRatio/docs/examples/video.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"map","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#map","textDecoration":{"hover":"underline"},"children":"Map"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Embed a Google map","position":{"start":{"line":18,"column":1,"offset":336},"end":{"line":18,"column":19,"offset":354}}}],"position":{"start":{"line":18,"column":1,"offset":336},"end":{"line":18,"column":19,"offset":354}}},"children":"Embed a Google map"}],"\n",["$","$L20","div-2",{"code":"import { AspectRatio } from 'welcome-ui/AspectRatio'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"AspectRatio","pathToFile":"/AspectRatio/docs/examples/map.tsx","withCodeEditor":true}]]}]]}],["$","$L22",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#square","id":"square","title":"Square"},{"href":"#video","id":"video","title":"Video"},{"href":"#map","id":"map","title":"Map"}]}]}]]