{"componentChunkName":"component---src-templates-windframedocs-js","path":"/windframe/docs/layers/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"77b59220-a9b6-5710-b91e-6c7a0582cbfe","title":"Layers","slug":"/docs/layers/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Layers\",\n  \"metaTitle\": \"Using Windframe Layers\",\n  \"metaDescription\": \"How to use Layers on Windframe\",\n  \"canonicalUrl\": \"https://windframe.dev/docs/layers\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Windframe Layers is a powerful feature that allows you to organize and manage different elements of your design in a hierarchical structure. With Layers, you can easily control the visibility, position, and interaction of elements, making it easier to work with complex designs and layouts.\"), mdx(\"h2\", null, \"Accessing the Layers Panel\"), mdx(\"p\", null, \"To access the Layers panel in Windframe, follow these steps:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 1:\"), \" Open Windframe editor.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 1:\"), \" upload or choose any template you want to work on.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 3:\"), \" Select any section of the template, you will see on the left sidebar the layer section.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\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\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d60ae1a5d96e8faea3320b56a901bb18/b59fb/selected-layer.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"63.32046332046332%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAC1UlEQVQ4y52TXUiTYRTHd2tfmp9TNz822eamzi1TwiCzCKorL4LIuuoDippUrpJSIzUp6kYRwYs+KES6iPSmUlIz8yYKopA+saVmHy6n6fa6vduv531FqYugOvDn4XnOc/7POed/Ho2zaBOmonLidXYyzAWkZjlJ1OeQlJ5LUlouKZn52Jwl5BSUkm5eq/q0GXkk6G1kmosw5heRYluDwVpIjrMMjcHkIDbRIC7loDMXsjo1m+hkC9FaCysSslguEBVnICrWwCqtmZVJJpbFG4nTiUcz8olJziZGayIxzSL2djSWtduJz1qPyVpMrn09B11uDhx2s++Qm9r6yzRcbKb+QhONl1qoqKzm9NkL6r6lrZ3r7Z00tV6hsqaJPa5WSrftFBluqURbegJH4Q7WOYoZ9YzxrxYRmAvD8ao6NKki1RS9SZRswyL69Prte/VSOBz+BTKyHFoKlmV5yRcKhZBDQdXnqjyDJsXgQIHO6MBWsJG370ZU52zAj38+gCzNIkkSUlAmMDyBNOljPiTh9/vV80gkIh4IqzEV7mo0eqOTGNFovVA3W6j5YWyMqfFJenbV07G/Ba2ri7RD7TRfvcOLwSEGhl7ybPgjHo+HiYnPS5kq5j4tSs4Uo5Cgs6kZqoTjE0yPeLi08xhHy/ayua6WRPtWHjccZ1Zk+fWLl6nJafzTM8wJKCUvElbVNIqShdTxYlQWCDfw4dNXJl895VqdFZd7M887CqgoL6O/dg9KmN/nZcY3zY+ZH6LswFI/FTtVcx5NshhSBQqhdU0JI55RfN5v9HbdYLC/m96e2zzouc+TRw9p65yio/s7oWCAgBQkpJJFfifUpuehINWYj1WI8urNuz+OxxevhNc3ryquCKEQKWswuDABJ6sb0Cx+L12WonIpo+Of+F87c+6i6GGmHUVpU14xFtHDqzdv8aB/kLvdfdzr6f8r3O3upW9giN17j/ATyhDb1YSFDQYAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"layers\",\n    \"title\": \"layers\",\n    \"src\": \"/static/d60ae1a5d96e8faea3320b56a901bb18/e3189/selected-layer.png\",\n    \"srcSet\": [\"/static/d60ae1a5d96e8faea3320b56a901bb18/a2ead/selected-layer.png 259w\", \"/static/d60ae1a5d96e8faea3320b56a901bb18/6b9fd/selected-layer.png 518w\", \"/static/d60ae1a5d96e8faea3320b56a901bb18/e3189/selected-layer.png 1035w\", \"/static/d60ae1a5d96e8faea3320b56a901bb18/b59fb/selected-layer.png 1285w\"],\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(\"h2\", null, \"Understanding Layers\"), mdx(\"p\", null, \"In Windframe, each element on the canvas is represented as a layer in the Layers panel. Layers are organized in a hierarchical structure, with parent and child relationships. This structure allows you to control the stacking order and positioning of elements in your design.\"), mdx(\"p\", null, \"By default, elements added to the canvas are placed at the top level of the layer hierarchy. You can then organize them into groups or nested structures by creating parent-child relationships between layers.\"), mdx(\"h2\", null, \"Working with Layers\"), mdx(\"p\", null, \"To work with layers in Windframe, you can use the following functionalities:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Selecting Layers:\"), \" Clicking on a layer in the Layers panel will select the corresponding element on the canvas. This allows you to edit the properties and styles of the selected element.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Reordering Layers:\"), \" You can change the stacking order of elements by dragging and dropping layers within the Layers panel. Layers higher in the list appear visually above layers lower in the list on the canvas.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Nesting Layers:\"), \" Layers can be nested within other layers by dragging and dropping them onto a parent layer in the Layers panel. This allows you to create hierarchical structures and control the visibility and positioning of elements within groups.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Hiding/Showing Layers:\"), \" You can hide or show layers by toggling the visibility icon next to each layer in the Layers panel. This allows you to focus on specific elements or temporarily hide elements during the design process.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Deleting Layers:\"), \" To remove a layer from your design, select it in the Layers panel and press the delete key.\"))), mdx(\"h2\", null, \"Reordering layers\"), mdx(\"p\", null, \"Follow the steps below to reorder layers:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 1\"), \" Open the Windframe editor and navigate to your project.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 2\"), \" Select the component you wish to edit it's layer.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\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\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/18023cff08ed1c2dc825b2ba70a788f6/ad00e/selecting-layer.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"46.71814671814671%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACjUlEQVQozyWR6UsTcBjH9w+EV+a10k13qc3UMtIyDxQjIux62+2SDLrMggpEKogiqF4UViBGmUbmdObJdG2u5kzJprM8JkaJc8NM0Ez36ac98OV58xzfQxKflIEsLpsoVQpSRTJrpXH4h6kE1PiHqgiTbVqFX4iSNcExBIZrCJUlsm6DVnQtiVsKSN9ZiiIui0hlEhL/EAVSeQKR6hQy8/Zz6kwJBUUlHC+8yFHdeXRFlzhxuphjhRc4cvIs18vuUXLtFjoxd0R3DoV2OzGaPNaGJxEs3YgkUDCJVG4W3xJ4/qqWLwNOLF1WPO4pvB43Sz4fy75lVmrS7cFksWG2djMzO8fi4l9S0neTmpXPtsx85JpUJEHhatZHJxEYoeFZZTV6QwNFhw9xt+wq7fWvcXwbwN5ro6XVQKfVir7ZSHVtA8YuO5NTHpLT8kjPPUB6zj7BMH7lYCxyITcoIpZHT5/D8hKOXjtt7ww0NjXR19PF4MBnhl1jdJqN6BvrqTEYsNpsuKe9qwdj4tOIUqei1Bxd8VBOuCxWmK3icUUVyzNexhwOnENOeux2PjXr6ftoZmR4iOFPNkwtrbyorsHc2sz0tIcdOfkkbMlatU0qT0QSEZWNKm4PweuTBcNK5v/4+PFzktm5OeYXFnANDTLidOAadjI5Mc64a4LB0a98mxrD7fWSlr2XsEgtIRs2CgjJKrWOlK3FhEVlUPGiilHXb9rq2uio0/O5uwefCGNRhLIorPDxv/rHv/PAUIf31yyZuw6KXS1+6xQEiIAlAaHR4oOGIKmGG3fu8/aNiSuXHqLTlXLzdjmWD920d7zHaLLwobuXvv4Byp+8pOBkCe1GiwhkHzJlMlJVGsrcy/wD9hrC176GgY4AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"selecting-components\",\n    \"title\": \"selecting-components\",\n    \"src\": \"/static/18023cff08ed1c2dc825b2ba70a788f6/e3189/selecting-layer.png\",\n    \"srcSet\": [\"/static/18023cff08ed1c2dc825b2ba70a788f6/a2ead/selecting-layer.png 259w\", \"/static/18023cff08ed1c2dc825b2ba70a788f6/6b9fd/selecting-layer.png 518w\", \"/static/18023cff08ed1c2dc825b2ba70a788f6/e3189/selecting-layer.png 1035w\", \"/static/18023cff08ed1c2dc825b2ba70a788f6/ad00e/selecting-layer.png 1366w\"],\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(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 3\"), \" Locate the Layers panel, which is located on the left side of the editor interface after selecting an element.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\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\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5d0a39f089f1ea30b802d127ff0b829a/fbfd6/layers.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.87644787644788%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAC20lEQVQozzWS/0vTeRzHP/+CZWbbrM2VTt1nSzdti615JmVTj4J+CCHKIsoo+npXUBZRvwh3EHdQdFdhFlx2oFdLp2lbzlYmajYz0znv5peV39JpKknwuHdCL3j+8uL5w+P1fL4kR8FBsqxO7A4nFkcB6dYtGLNyMWRuJsvuJHvrTqzZhRjMOUuShayOQkwbt2LL3U7hj7+S57xIpi1f7AuQYhNkdGoZWbsepcZAvMZIbEIasao0Vq6RUadsIF5tZLkyFZU2A7OtAF26A+XaDFRJJhJTt7DBcoo4lYXliiSk1dp0VmrWs6v4CO2vu/D5X9E/EKa7J8j7vgGh0JJ6gwO0dQToDPTQ3vlWeP7j+YtWUjM2kWy0sTbNzjr9D0iKb0SC5ujpCwS631Faeo47f16j3e8l8KaNz1/mCfb3MjQc5mlzC+X3/uZWxX1C4RFGxybQZ+aQt30PuflF4gIjkjLRyIoEPQeO/MzgSIS7t69TVvoT7upK/C+a6Al20/Tcg9fXSJ23EY+/hUd1jbR39RIeigg6u6DMRm/KQakWhAlak8jKQHHJKb4uLjL1IUIo2Ie7vp4mTwOBl14iY6MMDg/h9zzhcW0Ndx7c53Vbq9hFkEV5GRvz0OgspMp7kayWS6Tod7Pn0DEW5+YId3YSCoX4Nxwm9KaD1tpq2lqa6evqoL+1Bd8zH66HLnqFbzjykaxN+cimbFZ/K0mrR0pMtqFINLOv5ATTc18ZiHxiJjrF3Pw80zNRxsZHGReEnyYnmIxGmZqeoW9ykHezYYZGPiy92QrRwbJVOmLi1iHFqVJEhmmUHD/L+Pg8leVuqm7epeK3P4iITBcWvxCdneXzwgLfp7Lex5Ub5UxMTAlCJwq1gZh4HYokG1JMfLIgTGdH0X6q/nnK6ZNXOXzsF4r2nafir0c8dLmpdtXhqm3A3eClpt5DWdnvnDlzmQdVLsz2behkK3EaM3LRbf4HFaP8BEesmDAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"layers\",\n    \"title\": \"layers\",\n    \"src\": \"/static/5d0a39f089f1ea30b802d127ff0b829a/e3189/layers.png\",\n    \"srcSet\": [\"/static/5d0a39f089f1ea30b802d127ff0b829a/a2ead/layers.png 259w\", \"/static/5d0a39f089f1ea30b802d127ff0b829a/6b9fd/layers.png 518w\", \"/static/5d0a39f089f1ea30b802d127ff0b829a/e3189/layers.png 1035w\", \"/static/5d0a39f089f1ea30b802d127ff0b829a/fbfd6/layers.png 1357w\"],\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(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 4\"), \". Find the layer you want to move and While holding down the mouse button, drag the layer to the desired position within the Layers panel and release the mouse in the new position.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\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\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4350244fd1b05f2f582c3f0465a47ae5/fbfd6/change-position.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.87644787644788%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACzElEQVQozzWS60sTUBjG9y9YZjZn6bxN3Rw6L5tMXSZlXqIg+rAvXQmLpHsGZRH1RSiIgqKbqAVlgVYrp2lbTlcmajZT0zlrXlbe0nlFCX4dBx14OIfDw8vvfZ9XYsg7TLwuF11GLtqMPPHeijo5i7ikLSSn5WDYthudIZ+4xEyfVEK6jHw0qdvQZ+0kf8cNsnMuk6RfrZGHJCBYRWComqDwBDaIe1X+wbH4y2JZv0lFSHQKgSFq1gbFIAtLIFGfhyI+w+eXRWqQx2wlRXuaAJmWtdJIJBvD431FjPuP0f6lC5v9MwODbrp7nXzvHxRy+dTnHKStw0Gno5f2zm/C85Pmj63EJKQTpdYTHptGhHIzEukqkaApPHMJR3cPxcUXKH9wh3a7FcfXNuaXF3EO9DE84uZ9UwtlT17wqOIZLvcoY+OTKJMyyd65l6xco+hAjSRIrmZdsJLDx84xNOrhceldSorPYq6uxP6xkV5nN43NFqy2BmqtDVjsLbyubaC9qw/3sEfQpQlKA0pNJkEhgjA4TCNmFce+I6f5u7LC9C8PLmc/5ro6Gi31OD5Z8YyPMTQyjN3yjjc1byl//owvba3iz4NKhJeQmk2oQkuMah+SFO0VNNF7OFJQyPLCAu7OTlwuFz/cblxfO2itqaatpYn+rg4GWluwfbBhemWiT/hGPL9JTs9FpTGwcTWkMCUSeZQemVzDoYKTzCz8ZdDzh1nvNAuLi8zMehmfGGNCEP6ZmmTK62V6Zpb+qSF65twMj/7yrdk6kcGaDQr8AiLE2siifWtScOI8ExOLVJaZqXr4mIpb9/GImS6tLOOdm2N+aYn/p7LOxrV7ZUxOTgvCHKQhcfgFKpBG6pH4BUYhlcezy3iQqpfvOXPqJkePX8d44CIVT1/zymSm2lSLqaYec72Vt3UWSkpuU1R0ledVJhLTtqNQ6QgITURlLOUfx3b77BdnEGAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"selecting-layer-change\",\n    \"title\": \"selecting-layer-change\",\n    \"src\": \"/static/4350244fd1b05f2f582c3f0465a47ae5/e3189/change-position.png\",\n    \"srcSet\": [\"/static/4350244fd1b05f2f582c3f0465a47ae5/a2ead/change-position.png 259w\", \"/static/4350244fd1b05f2f582c3f0465a47ae5/6b9fd/change-position.png 518w\", \"/static/4350244fd1b05f2f582c3f0465a47ae5/e3189/change-position.png 1035w\", \"/static/4350244fd1b05f2f582c3f0465a47ae5/fbfd6/change-position.png 1357w\"],\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(\"p\", null, \"The moved layer is shown below.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\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\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3f719cd240c0b7519696869fdd8350bc/78797/position-layer.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.98455598455598%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAC70lEQVQoz02S2UvUURzF5y8IW9XCtWazpnEcLbVpiiShHvIh6KGHiOolegjsxaJohYiM0KBIbE/EEkvHZcZtXPoljZpLblOmjk7j7rS4zLj06c4viC4c7vfLvd/DOedeRVxiCpqdR9kQYSRam0CY0kiYKl70OtaHbWPtphiCRb15a5KMQL9qvZKgEJVchwfuhusIVxvR6NNQBAUrWRe6hShNPNHbkomJM8uDkdqdKHXJqAPYbiLedADdjhR0CftQ600kmtM4dOQUu/cfxpCUKs4PotyejGJ1iJqNUbEoBZnWuJc+Zz8ZFy9x/EgaZ04e483zh+Tl5dHe8xWpqQWLtQbJ0YH3+0/m5n38+DXL5PQMy8srpGdcCyhUESIsRWl2oI3by7B7FOdnJ/Wlr3h0L5O2pgbKKiwUlVuobmyixFZNT7+LxeVlFpf+wr+4RGCdOy8I14Rq2BQdK0Mdu5uhkW+4XS7a2tqx2ip5+uIlhUWvqbdXUWApIb+wgPYWB/MLPhZ8fhmz8wsyYXrG1b8Kw7bECRhQiWxGRieQym08e5DLs5cF1NY34u7rpcNeh63WTnFJMb0drfz+LXOwJKz6/P8pDAoWCqMMgtCISih0uT14vTMMDn0V9kcYnZ7GNTJMd3cXrW2tNNrK6O7qpH9wgI6eTjzjYwLjMuGFK7cChBEiQ5FjpEZYNothDy7PEI52B01SDbWFueTfuUB9TTnSB4laaynvpAasVRU0SI00f2xGarDjX5jj0o1MFHr9ZXYl3UZvOCsUmhh0uXGPuuns+8TbFw/IOX+SN4+z6HX24hZKxrxenP1fBFELnokpBoaHeV9Xzax3iovXBWFouJlodSoRyj2oDWYmpmaY/+llcvwbze+qcdRZCSTkW1lhzi8ewOdjSkQyNjku9z7x2j/mZmXL127eRbF2o1JY1grEiI9pIr+olNdPnpOTfZ+7Wdnk5jzEYquhuKyS4vIqgUpKKqr+1YH9rTiziy914nQ6fwBEaFdqddnUIgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"position-layer\",\n    \"title\": \"position-layer\",\n    \"src\": \"/static/3f719cd240c0b7519696869fdd8350bc/e3189/position-layer.png\",\n    \"srcSet\": [\"/static/3f719cd240c0b7519696869fdd8350bc/a2ead/position-layer.png 259w\", \"/static/3f719cd240c0b7519696869fdd8350bc/6b9fd/position-layer.png 518w\", \"/static/3f719cd240c0b7519696869fdd8350bc/e3189/position-layer.png 1035w\", \"/static/3f719cd240c0b7519696869fdd8350bc/78797/position-layer.png 1125w\"],\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(\"h2\", null, \"Renaming a layer\"), mdx(\"p\", null, \"To change a layer's name from its default, triple-click the layer name, enter the new name, and either press Enter or click outside the layer name input field to save the changes\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\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\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/09cde83db401a570007136ab440b0cc0/04784/renamed-layer.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.98455598455598%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADCElEQVQozy2Sa0zTVxjG+9kPXjqxdIClWCrT3qCAVGVkIAazLC5zGzHLFlxnvERjIt6iLtHE+G2fjCQLXruNwLLFIIjS1tklCKVhaJRqVIRWKe2/F4ReKAWT3w7Ff/Lk/56Tc573fZ7nyLS6KtT6BlYXGCnQlKIoNJCj0rNSWYI8bwPyjz8hV2WgsKQSpdrI8jVagWJWKLTirJGcAh05a3UUaKsor/gZ2UfiQk5eCSqtmWLDVsyb6ym11FMmYKysZb1hi1hvY1PN5+jKP0NvrsFUUcuu3QfY2fgT1fVf8alA2ZbtFG2oRrZSdMorMqHZaBGbDbwa8xEYGWHU6+X5My8DHg9D953YO7u43tbO33+24x8bJZWeJx5PEY29Iz2X4VZXL7lqE7JVueuFJD1ri81ZQikS4x+7k5u2P7C1/8XL8TeEJgJ4n47gGXQz7H6IJIUIhiUiU1FmEkkWv+57TiG7YokwX0yoFN4ZLduZDIUZ9j6i1+XA4ejGectG9++X8fznwXGvi3/td7jvctJj76HP3Yfb3Y8UDNB5xy5y0C1JXiTMX1eKsaqeoBRhQnrLyIundF79hetn93Lb1sJrvw//5CSBSATP0CCvfT7eBkMMDfbz5oWX2z1OlEWlyFYoNChUOpGgAZNliXDSP86rl8/oar+Bp+8B8fkFojMzRKankWJTwudRAkL2VDwhGoSFh2k6u3sp2liFTJFfhlZjIV9dnpUcCkcJi47ex8O4BdmYqGeSKabF5SwSiaxvi3Vc/OcSmayHdx2upVDK9Kf5pvoCdea9mEQoISnKeGSBeCrNXCZDMpkkkUqREvXsByTTaZHyHNPpJAPvnhMjQa/dhVLYJlsmL0S+Ws1yuQqNeHP+iSAdbQ/o+NVG26UWOq7cZHY2LYhTWYlxMWFm4X12Kt9EjOaWVlyPnvBwYEhI3ozMWFnDl9/uofH7/VgPNtN67TdOn7rIFzu+o25bIw07vqZp3xH2HGrm+LGTWA+f5OiZ85w4e44m62Fqtu7kx91WfrAeEI++mv8BbJRKro7+gC0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"renamed-layer\",\n    \"title\": \"renamed-layer\",\n    \"src\": \"/static/09cde83db401a570007136ab440b0cc0/e3189/renamed-layer.png\",\n    \"srcSet\": [\"/static/09cde83db401a570007136ab440b0cc0/a2ead/renamed-layer.png 259w\", \"/static/09cde83db401a570007136ab440b0cc0/6b9fd/renamed-layer.png 518w\", \"/static/09cde83db401a570007136ab440b0cc0/e3189/renamed-layer.png 1035w\", \"/static/09cde83db401a570007136ab440b0cc0/04784/renamed-layer.png 1174w\"],\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    \"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#accessing-the-layers-panel","title":"Accessing the Layers Panel"},{"url":"#understanding-layers","title":"Understanding Layers"},{"url":"#working-with-layers","title":"Working with Layers"},{"url":"#reordering-layers","title":"Reordering layers"},{"url":"#renaming-a-layer","title":"Renaming a layer"}]},"parent":{"__typename":"File","relativePath":"docs/layers.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Using Windframe Layers","metaDescription":"How to use Layers on Windframe"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/javascript/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/react/chart/","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel/","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe/","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown/","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll/","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader/","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker/","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable/","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/javascript/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/angular/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown/","title":"Dropdown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe/","title":"Iframe"}}},{"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/spinner/","title":"Spinner"}}},{"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/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask/","title":"Mask"}}},{"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":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable/","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables/","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel/","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker/","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown/","title":"Dropdown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe/","title":"IFrame"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover/","title":"Popover"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/fixed_datatables/","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/react/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/components/index/","title":"Tailwind Components"}}},{"node":{"fields":{"slug":"/components/tailwind-alerts/","title":"Tailwind CSS Alert"}}},{"node":{"fields":{"slug":"/components/tailwind-badge/","title":"Tailwind CSS Badge"}}},{"node":{"fields":{"slug":"/components/tailwind-button/","title":"Tailwind CSS Button"}}},{"node":{"fields":{"slug":"/components/tailwind-card/","title":"Tailwind CSS Cards"}}},{"node":{"fields":{"slug":"/components/tailwind-footer/","title":"Tailwind CSS Footer"}}},{"node":{"fields":{"slug":"/components/tailwind-forms/","title":"Tailwind CSS Forms"}}},{"node":{"fields":{"slug":"/components/tailwind-gallery/","title":"Tailwind CSS Gallery"}}},{"node":{"fields":{"slug":"/components/tailwind-indicator/","title":"Tailwind CSS Indicator"}}},{"node":{"fields":{"slug":"/components/tailwind-modal/","title":"Tailwind CSS Modal"}}},{"node":{"fields":{"slug":"/components/tailwind-navbar/","title":"Tailwind CSS Navbar"}}},{"node":{"fields":{"slug":"/components/tailwind-pagination/","title":"Tailwind CSS Pagination"}}},{"node":{"fields":{"slug":"/components/tailwind-progressbar/","title":"Tailwind CSS Progress Bar"}}},{"node":{"fields":{"slug":"/components/tailwind-rating/","title":"Tailwind CSS Rating"}}},{"node":{"fields":{"slug":"/components/tailwind-sidebar/","title":"Tailwind CSS Sidebar"}}},{"node":{"fields":{"slug":"/components/tailwind-stepper/","title":"Tailwind CSS Stepper"}}},{"node":{"fields":{"slug":"/components/tailwind-tabs/","title":"Tailwind CSS Tab"}}},{"node":{"fields":{"slug":"/components/tailwind-table/","title":"Tailwind CSS Table"}}},{"node":{"fields":{"slug":"/docs/adding-custom-template/","title":"Adding Custom Template on Windframe"}}},{"node":{"fields":{"slug":"/docs/adding-elements/","title":"Adding Elements"}}},{"node":{"fields":{"slug":"/docs/adding-ui-library/","title":"Adding UI library in Windframe"}}},{"node":{"fields":{"slug":"/docs/ai-experiments/","title":"AI Experiments"}}},{"node":{"fields":{"slug":"/docs/built-in-templates/","title":"Built in Templates"}}},{"node":{"fields":{"slug":"/docs/canvas-toolbar/","title":"Canvas Toolbar"}}},{"node":{"fields":{"slug":"/docs/creating-new-project/","title":"Creating New Project"}}},{"node":{"fields":{"slug":"/docs/editing-existing-project/","title":"Editing Existing Project"}}},{"node":{"fields":{"slug":"/docs/editing-templates/","title":"Editing Templates"}}},{"node":{"fields":{"slug":"/docs/element-quick-actions/","title":"Element Quick Action"}}},{"node":{"fields":{"slug":"/docs/exporting-project/","title":"Exporting Projects"}}},{"node":{"fields":{"slug":"/docs/history/","title":"History"}}},{"node":{"fields":{"slug":"/docs/import-external-css/","title":"Importing your CSS code into Windframe"}}},{"node":{"fields":{"slug":"/docs/import-tailwind-config/","title":"Importing Tailwind CSS configuration into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-component/","title":"Import your JSX Components into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-jsscript/","title":"Importing JS/Script into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-templates/","title":"Importing HTML Component/Template into Windframe"}}},{"node":{"fields":{"slug":"/docs/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/docs/layers/","title":"Layers"}}},{"node":{"fields":{"slug":"/docs/publish-project/","title":"Publishing Projects"}}},{"node":{"fields":{"slug":"/docs/section-code-editor/","title":"Section Code Editor"}}},{"node":{"fields":{"slug":"/docs/windframe-ai/","title":"AI-Generated Templates"}}},{"node":{"fields":{"slug":"/docs/toolbar/","title":"Windframe Toolbar"}}},{"node":{"fields":{"slug":"/Tailwind-css-slider/","title":"Tailwind Slider: Elevate Your Website Design with Dynamic Content"}}},{"node":{"fields":{"slug":"/How-to-add-color-to-Tailwind/","title":"How to add Fonts in Tailwind CSS"}}},{"node":{"fields":{"slug":"/awesome-10-projects-built-with-tailwind/","title":"10 Awesome Project built with Tailwind CSS"}}},{"node":{"fields":{"slug":"/bootstrap-5-all-you-need-to-know/","title":"All you need to know about Bootstrap 5"}}},{"node":{"fields":{"slug":"/Tailwind-width/","title":"Tailwind CSS Width: Complete Guide to Width Classes, Full Width, Fit Content & More"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes/","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/create-animation-with-tailwind-css/","title":"How to create Tailwind CSS Animations"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast/","title":"Bootstrap 5 navbar-How To Create A Beautiful Navbar Using Bootstrap 5."}}},{"node":{"fields":{"slug":"/create-datatable-in-angular-10/","title":"How To Create A Data table Using Angular Bootstrap"}}},{"node":{"fields":{"slug":"/create-bootstrap-charts-using-bootstrap5/","title":"Bootstrap Charts: How To Create Bootstrap 5 Charts with Chart.js (Line, Bar, Pie & Doughnut)"}}},{"node":{"fields":{"slug":"/create-datepicker-with-contrast/","title":"How to create a React datepicker using React Bootstrap."}}},{"node":{"fields":{"slug":"/create-datatable-with-contrast/","title":"How to create a beautiful Bootstrap Data table with Icons"}}},{"node":{"fields":{"slug":"/create-multiselect-with-contrast/","title":"How to create a beautiful React multiselect."}}},{"node":{"fields":{"slug":"/create-forms-with-contrast/","title":"React bootstrap 5 form- How to create React Bootstrap 5 Forms"}}},{"node":{"fields":{"slug":"/create-progress-with-contrast/","title":"React Bootstrap Progress bar-How to create a beautiful React Bootstrap 5 progress bar."}}},{"node":{"fields":{"slug":"/create-select-with-contrast/","title":"How to create a beautiful React Bootstrap select with icons."}}},{"node":{"fields":{"slug":"/create-responsive-sidebar-in-react/","title":"How to create a responsive React Bootstrap Sidebar"}}},{"node":{"fields":{"slug":"/create-stepper-with-contrast/","title":"Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper"}}},{"node":{"fields":{"slug":"/create-tables-with-contrast/","title":"How to create a beautiful React Bootstrap table."}}},{"node":{"fields":{"slug":"/create-tabs-with-contrast/","title":"How to create beautiful React Bootstrap 5 tabs"}}},{"node":{"fields":{"slug":"/create-timepicker-with-contrast/","title":"How to create a React Timepicker using React Bootstrap."}}},{"node":{"fields":{"slug":"/css-animations/","title":"Introduction to CSS Animations"}}},{"node":{"fields":{"slug":"/css-backgrounds/","title":"CSS Backgrounds"}}},{"node":{"fields":{"slug":"/css-borders/","title":"CSS Borders"}}},{"node":{"fields":{"slug":"/css-colors/","title":"CSS Colors"}}},{"node":{"fields":{"slug":"/css-combinators/","title":"CSS Combinators"}}},{"node":{"fields":{"slug":"/css-font/","title":" CSS Fonts"}}},{"node":{"fields":{"slug":"/css-flexbox/","title":"CSS Flexbox"}}},{"node":{"fields":{"slug":"/css-grid/","title":"CSS Grid"}}},{"node":{"fields":{"slug":"/css-height-and-width/","title":"CSS Height And Width"}}},{"node":{"fields":{"slug":"/css-margins/","title":"CSS Margins"}}},{"node":{"fields":{"slug":"/css-icons/","title":"HTML Icons: How to Add Icons to Your HTML Page Using CSS and Icon Libraries"}}},{"node":{"fields":{"slug":"/css-overflow/","title":"CSS Overflow"}}},{"node":{"fields":{"slug":"/css-padding/","title":"CSS Padding"}}},{"node":{"fields":{"slug":"/css-pagination/","title":"Tutorial: CSS Pagination"}}},{"node":{"fields":{"slug":"/css-syntax-and-selector/","title":"CSS Syntax and Selector"}}},{"node":{"fields":{"slug":"/css-text-and-layout/","title":"CSS Text and Layout"}}},{"node":{"fields":{"slug":"/css-transform-translate/","title":"CSS transform and translate"}}},{"node":{"fields":{"slug":"/css-tutorial-1/","title":"Introduction to CSS"}}},{"node":{"fields":{"slug":"/css-website-layout/","title":"Full Website Layout"}}},{"node":{"fields":{"slug":"/css-z-index/","title":"CSS Z-Index"}}},{"node":{"fields":{"slug":"/css.outlines/","title":"CSS Outlines"}}},{"node":{"fields":{"slug":"/differences-between-tailwind-css-and-sass/","title":"Differences between Tailwind CSS and SASS/SCSS"}}},{"node":{"fields":{"slug":"/diffrences-between-tailwind-css-and-bootstrap/","title":"Differences Between Tailwind CSS and Bootstrap"}}},{"node":{"fields":{"slug":"/how-to-add-icons-to-your-bootstrap-5-project/","title":"Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project"}}},{"node":{"fields":{"slug":"/how-to-add-tailwind-css-colors-and-fonts-to-your-project/","title":"How to add tailwind CSS colors to your project"}}},{"node":{"fields":{"slug":"/how-to-add-tailwind-css-grid-to-your-project/","title":"How to use Tailwind CSS Grid."}}},{"node":{"fields":{"slug":"/how-to-build-tailwindcss-progressbar/","title":"How to build Tailwind Progress Bar."}}},{"node":{"fields":{"slug":"/how-to-build-tailwindcss-timepicker-with-tailwind-element/","title":"How to build Tailwind css timepicker with Tailwind elements"}}},{"node":{"fields":{"slug":"/how-to-create-a-bootstrap5-modal/","title":"How to create a Bootstrap 5 Modal."}}},{"node":{"fields":{"slug":"/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/","title":"How to create a Responsive Navigation bar Using Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-a-react-modal-using-tailwind-css/","title":"How to create a React Modal using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-create-a-responsive-bootstrap-5-sidebar/","title":"Bootstrap 5 Sidebar-How to create a Responsive Bootstrap 5 Sidebar"}}},{"node":{"fields":{"slug":"/how-to-create-a-responsive-react-sidebar-design-using-tailwind-css/","title":"How to Create a Responsive React Sidebar Design Using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-create-an-angular-bootstrap-sidebar/","title":"How to create a Angular Bootstrap Sidebar"}}},{"node":{"fields":{"slug":"/how-to-create-and-style-a-responsive-form-using-tailwindcss/","title":"Tailwind form-How to create and style a Responsive Form using Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-5-checkbox/","title":"How to create Beautiful Bootstrap 5 Checkboxes and Radios."}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-5-navbars/","title":"How to create Beautiful Bootstrap 5 Navbars"}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-tabs-in-bootstrap-5/","title":"How to create Beautiful Bootstrap Tabs in Bootstrap 5"}}},{"node":{"fields":{"slug":"/how-to-create-react-forms-using-tailwind-css/","title":"How to create Tailwind CSS React Forms."}}},{"node":{"fields":{"slug":"/how-to-create-react-tables-using-tailwind-css/","title":"How to create Tailwind Tables using React."}}},{"node":{"fields":{"slug":"/how-to-create-react-tabs-with-tailwind-css/","title":"How to Create React Tabs with Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-dropdown/","title":"How to create Tailwind CSS dropdown"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-components-for-your-website/","title":"How to create Tailwind CSS Components for your Website"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-modal/","title":"How to create Tailwind CSS Modal:A Step-by-Step Guide"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-tables/","title":"How to Create Tailwind CSS Table-Comprehensive Guide with Templates & Examples"}}},{"node":{"fields":{"slug":"/how-to-implement-a-react-step-progress-bar-using-tailwind-css/","title":"How to Implement a React Step Progress Bar Using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-implement-dark-mode-in-tailwind-css/","title":"How to implement dark mode in React using tailwind css."}}},{"node":{"fields":{"slug":"/how-to-install-tailwind-css-in-laravel/","title":"How to install Tailwind CSS with Laravel"}}},{"node":{"fields":{"slug":"/how-to-install-tailwind-css-in-vuejs/","title":"How to Install Tailwind CSS in Vue.js"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-flex/","title":"How to use Tailwind CSS Flex"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-in-HTML/","title":"How to use Tailwind CSS in HTML"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-in-react/","title":"How To Use Tailwind CSS In React."}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/","title":"How to use tailwind css padding, margin and border in your project."}}},{"node":{"fields":{"slug":"/how-to-use-the-tailwind-css-JIT-CDN/","title":"Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN"}}},{"node":{"fields":{"slug":"/html-5-formating/","title":"Html 5 formating"}}},{"node":{"fields":{"slug":"/html-5-layout/","title":"Html 5 Layout"}}},{"node":{"fields":{"slug":"/html-basic-tags-example/","title":"Html 5 Basic Tags Example"}}},{"node":{"fields":{"slug":"/html-editors/","title":"Html Editors"}}},{"node":{"fields":{"slug":"/html-element/","title":"All you need to know about Html Elements"}}},{"node":{"fields":{"slug":"/html-file-path/","title":"HTML File path, Charset and Meta"}}},{"node":{"fields":{"slug":"/html-forms/","title":"HTML Forms"}}},{"node":{"fields":{"slug":"/html-javascript/","title":"Including JavaScript in your HTML project."}}},{"node":{"fields":{"slug":"/html-quotations/","title":"HTML Quotations and comments"}}},{"node":{"fields":{"slug":"/html-responsive/","title":"Creating Responsive HTML web design"}}},{"node":{"fields":{"slug":"/html-table/","title":"HTML Tables, Classes and Ids"}}},{"node":{"fields":{"slug":"/introduction-to-html/","title":"Introducing HTML"}}},{"node":{"fields":{"slug":"/javascript-array-method/","title":"Tutorial: Javascript Array Method"}}},{"node":{"fields":{"slug":"/javascript-arrays/","title":"Tutorial: Javascript Arrays"}}},{"node":{"fields":{"slug":"/javascript-arrow-functions/","title":"Tutorial: Javascript Arrow Functions"}}},{"node":{"fields":{"slug":"/javascript-basics/","title":"Basics of Javascript"}}},{"node":{"fields":{"slug":"/javascript-booleans/","title":"Tutorial: Javascript Boolean"}}},{"node":{"fields":{"slug":"/javascript-class/","title":"Tutorial: Javascript Classes"}}},{"node":{"fields":{"slug":"/javascript-control-flow/","title":"Tutorial: Javascript Control Flow"}}},{"node":{"fields":{"slug":"/javascript-data-type/","title":"Tutorial: Javascript Data Type"}}},{"node":{"fields":{"slug":"/javascript-date-object/","title":"Tutorial: Javascript Date Objects"}}},{"node":{"fields":{"slug":"/javascript-display/","title":"Tutorial: Javascript Data Output"}}},{"node":{"fields":{"slug":"/javascript-events/","title":"Tutorial: Javascript Events"}}},{"node":{"fields":{"slug":"/javascript-for-loop/","title":"Tutorial: Javascript Loop"}}},{"node":{"fields":{"slug":"/javascript-functions/","title":"Tutorial: Javascript Functions"}}},{"node":{"fields":{"slug":"/javascript-how-it-works/","title":"Tutorial: How Javascript Works"}}},{"node":{"fields":{"slug":"/javascript-html-dom-events/","title":"Tutorial: Javascript Dom Events"}}},{"node":{"fields":{"slug":"/javascript-html-dom-methods/","title":"Tutorial: Javascript Dom Methods"}}},{"node":{"fields":{"slug":"/javascript-iteration/","title":"Tutorial: Javascript Array Iteration"}}},{"node":{"fields":{"slug":"/javascript-let-and-const/","title":"Tutorial: Javascript Let And Const"}}},{"node":{"fields":{"slug":"/javascript-math-object/","title":"Tutorial: Javascript Math Object"}}},{"node":{"fields":{"slug":"/javascript-number-methods/","title":"Tutorial: Javascript Number Methods"}}},{"node":{"fields":{"slug":"/javascript-object/","title":"Tutorial: Javascript Objects"}}},{"node":{"fields":{"slug":"/javascript-operator/","title":"Tutorial: Javascript Operator"}}},{"node":{"fields":{"slug":"/javascript-scope/","title":"Tutorial: Javascript Scope"}}},{"node":{"fields":{"slug":"/javascript-sort/","title":"Tutorial: Sorting In Javascript"}}},{"node":{"fields":{"slug":"/javascript-statement/","title":"Tutorial: Javascript statement, syntax and comments"}}},{"node":{"fields":{"slug":"/javascript-string-methods/","title":"Tutorial: Javascript String Methods"}}},{"node":{"fields":{"slug":"/javascript-this-keyword/","title":"Tutorial: Javascript This Keyword"}}},{"node":{"fields":{"slug":"/javascript-tutorial-1/","title":"Introduction to Javascript"}}},{"node":{"fields":{"slug":"/javascript-variables/","title":"Tutorial: Javascript Variables"}}},{"node":{"fields":{"slug":"/setting-up-your-first-project-using-tailwind-css/","title":"How to set up your first Tailwind CSS Project"}}},{"node":{"fields":{"slug":"/tailwind-3.0-is-finally-out/","title":"Tailwind 3.0 is finally available. here are all the major changes"}}},{"node":{"fields":{"slug":"/tailwind-css-10-templates-and-themes/","title":"10 tailwind CSS templates and themes"}}},{"node":{"fields":{"slug":"/tailwind-css-in-nextjs/","title":"How to use and set up Tailwind CSS with Nextjs."}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react/","title":"How to use Bootstrap in React Using a React Library"}}},{"node":{"fields":{"slug":"/what-is-nodejs-and-express/","title":"What is Nodejs, Express and When Should It Be Used."}}},{"node":{"fields":{"slug":"/why-tailwind-css-is-good/","title":"Why is Tailwind CSS better than other CSS framework"}}},{"node":{"fields":{"slug":"/classes/Z-index/","title":"Tailwind CSS Z-index"}}},{"node":{"fields":{"slug":"/classes/index/","title":"Tailwind CSS Classes"}}},{"node":{"fields":{"slug":"/classes/tailwind-align-items/","title":"Tailwind Align Items"}}},{"node":{"fields":{"slug":"/classes/tailwind-align-self/","title":"Tailwind Align Self"}}},{"node":{"fields":{"slug":"/classes/tailwind-animation/","title":"Tailwind Animation"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-attachment/","title":"Tailwind Background Attachment"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-clip/","title":"Tailwind Background Clip"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-color/","title":"Tailwind Background Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-image/","title":"Tailwind CSS Background Image"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-origin/","title":"Tailwind CSS Background Origin"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-position/","title":"Tailwind CSS Background Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-repeat/","title":"Tailwind CSS Background Repeat"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-size/","title":"Tailwind CSS Background Size"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-collapse/","title":"Tailwind Border Collapse"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-radius/","title":"Tailwind CSS Border Radius"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-spacing/","title":"Tailwind CSS Border Spacing"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-style/","title":"Tailwind CSS Border Style"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-width/","title":"Tailwind CSS Border Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-box-shadow-color/","title":"Tailwind CSS Box Shadow Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-box-shadow/","title":"Tailwind CSS Box Shadow"}}},{"node":{"fields":{"slug":"/classes/tailwind-content/","title":"Tailwind CSS Content"}}},{"node":{"fields":{"slug":"/classes/tailwind-display/","title":"Tailwind CSS Display"}}},{"node":{"fields":{"slug":"/classes/tailwind-fill/","title":"Tailwind CSS Fill"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-direction/","title":"Tailwind CSS Flex Direction"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-grow/","title":"Tailwind CSS Flex Grow"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-shrink/","title":"Tailwind CSS Flex Shrink"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-wrap/","title":"Tailwind CSS Flex wrap"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex/","title":"Tailwind CSS Flex"}}},{"node":{"fields":{"slug":"/classes/tailwind-floats/","title":"Tailwind CSS Floats"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-family/","title":"Tailwind Font Family"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-size/","title":"Tailwind CSS Font size"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-weight/","title":"Tailwind CSS Font Weight"}}},{"node":{"fields":{"slug":"/classes/tailwind-gap/","title":"Tailwind CSS Gap"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-columns/","title":"Tailwind CSS Grid Auto Columns"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-flow/","title":"Tailwind CSS Grid Auto Flow"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-rows/","title":"Tailwind CSS Grid Auto Rows"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-column-start-end/","title":"Tailwind CSS Grid Column Start/End"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-column/","title":"Tailwind CSS Grid Template Column"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-row-start-end/","title":"Tailwind CSS Grid Row Start/End"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-row/","title":"Tailwind CSS Grid Template Row"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid/","title":"Tailwind Grid"}}},{"node":{"fields":{"slug":"/classes/tailwind-height/","title":"Tailwind Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-hyphens/","title":"Tailwind CSS Hyphens"}}},{"node":{"fields":{"slug":"/classes/tailwind-invisible/","title":"Tailwind CSS Invisibility"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-content/","title":"Tailwind CSS Justify Content"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-items/","title":"Tailwind CSS Justify-items"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-self/","title":"Tailwind CSS Justify Self"}}},{"node":{"fields":{"slug":"/classes/tailwind-letter-spacing/","title":"Tailwind CSS Letter-spacing"}}},{"node":{"fields":{"slug":"/classes/tailwind-line-clamp/","title":"Tailwind CSS Line Clamp"}}},{"node":{"fields":{"slug":"/classes/tailwind-lineheight/","title":"Tailwind CSS Line-height"}}},{"node":{"fields":{"slug":"/classes/tailwind-list-style-position/","title":"Tailwind CSS List Style Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-list-style-type/","title":"Tailwind CSS List Style Type"}}},{"node":{"fields":{"slug":"/classes/tailwind-margin/","title":"Tailwind Margin"}}},{"node":{"fields":{"slug":"/classes/tailwind-max-height/","title":"Tailwind CSS Max-Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-max-width/","title":"Tailwind CSS Max-Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-min-height/","title":"Tailwind CSS Min-Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-min-width/","title":"Tailwind CSS Min-Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-object-fit/","title":"Tailwind CSS Object Fit"}}},{"node":{"fields":{"slug":"/classes/tailwind-object-positions/","title":"Tailwind CSS Object Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-opacity/","title":"Tailwind CSS Opacity"}}},{"node":{"fields":{"slug":"/classes/tailwind-order/","title":"Tailwind CSS Order"}}},{"node":{"fields":{"slug":"/classes/tailwind-overflow/","title":"Tailwind CSS Overflow"}}},{"node":{"fields":{"slug":"/classes/tailwind-overscroll-behaviour/","title":"Tailwind CSS Overscroll Behaviour"}}},{"node":{"fields":{"slug":"/classes/tailwind-padding/","title":"Tailwind Padding"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-content/","title":"Tailwind CSS Place-content"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-items/","title":"Tailwind CSS Place-items"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-self/","title":"Tailwind CSS Place-self"}}},{"node":{"fields":{"slug":"/classes/tailwind-position/","title":"Tailwind CSS Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-rotate/","title":"Tailwind CSS Rotate"}}},{"node":{"fields":{"slug":"/classes/tailwind-scale/","title":"Tailwind CSS Scale"}}},{"node":{"fields":{"slug":"/classes/tailwind-screen-readers/","title":"Tailwind CSS Screen Reader"}}},{"node":{"fields":{"slug":"/classes/tailwind-skew/","title":"Tailwind CSS Skew"}}},{"node":{"fields":{"slug":"/classes/tailwind-stroke-width/","title":"Tailwind CSS Stroke Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-stroke/","title":"Tailwind CSS Stroke"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-align/","title":"Tailwind CSS Text-align"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-color/","title":"Tailwind CSS Text Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration-style/","title":"Tailwind CSS Text Decoration Style"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration-thickness/","title":"Tailwind CSS Text Decoration Thickness"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration/","title":"Tailwind CSS Text Decoration"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-indent/","title":"Tailwind CSS Text Indent"}}},{"node":{"fields":{"slug":"/classes/tailwind-transform-origin/","title":"Tailwind CSS Transform Origin"}}},{"node":{"fields":{"slug":"/classes/tailwind-transform/","title":"Tailwind CSS Transform"}}},{"node":{"fields":{"slug":"/classes/tailwind-translate/","title":"Tailwind CSS Translate"}}},{"node":{"fields":{"slug":"/classes/tailwind-vertical-align/","title":"Tailwind CSS Vertical Align"}}},{"node":{"fields":{"slug":"/classes/tailwind-whitespace/","title":"Tailwind CSS Whitespace"}}},{"node":{"fields":{"slug":"/classes/tailwind-width/","title":"Tailwind CSS Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-word-break/","title":"Tailwind CSS Word Break"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-color/","title":"Tailwind Border Color"}}},{"node":{"fields":{"slug":"/unit/first-block-page/","title":"Contrast Headers Blocks Page"}}}]}},"pageContext":{"id":"77b59220-a9b6-5710-b91e-6c7a0582cbfe"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","956403285"]}