{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-height/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"083c25f6-d12d-5995-9f0c-bd4550adbc2f","title":"Tailwind Height","slug":"/classes/tailwind-height/"},"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  \"lastUpdated\": \"20 May 2024\",\n  \"title\": \"Tailwind Height\",\n  \"metaTitle\": \"Tailwind Height\",\n  \"metaDescription\": \"Tailwind height utility provides a set of classes that enable you to set the height of an element to a specific value, percentages, or use predefined height utilities along with the default spacing scale.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-height\"\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(\"h1\", null, \"Tailwind Height\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"height\"), \" utility class in Tailwind CSS allows you to easily control the height of elements. It provides a set of classes that enable you to set the height of elements to specific values, percentages, or use predefined height utilities for common use cases.\"), mdx(\"h1\", null, \"Setting Tailwind Height\"), mdx(\"p\", null, \"To set the Tailwind height of an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-{size}\"), \" class, where {size} can be one of the following options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-{value}\"), \": This sets the height to a specific value in pixels.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-screen\"), \": This sets the height to the full height of the viewport.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-full\"), \": This sets the height to 100% of the parent container.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-auto\"), \": This sets the height to automatically adjust based on the content.\"))), mdx(\"p\", null, \"Here's an example of how to use the height utility classes:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-64\\\">\\n  This div has a height of 64 pixels.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"h-64 mx-auto text-2xl bg-blue-500 rounded-md flex items-center justify-center text-white font-extrabold py-3\"\n  }, \" This div has a height of 64 pixels.\")), mdx(\"h2\", null, \"Percentage-based Tailwind Height\"), mdx(\"p\", null, \"Tailwind CSS also provides utility classes for setting height as a percentage of the parent container's height. You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-{percentage}\"), \" class to achieve this. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-50...\\\">\\n  This div has a height of 50% of its parent container.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-green-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"h-1/2  text-2xl bg-green-500 rounded-md flex items-center justify-center text-white font-extrabold py-3\"\n  }, \"This div has a height of 50% of its parent container.\")), mdx(\"h2\", null, \"Responsive Tailwind Height\"), mdx(\"p\", null, \"Tailwind CSS allows you to control the height of elements responsively at different breakpoints. To use responsive Tailwind height classes, you can append the breakpoint prefix to the height classes. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:h-48\"), \" sets the height to 48 pixels starting from the medium breakpoint and above. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-64 md:h-48\\\">\\n  This div has a height of 64 pixels by default, and 48 pixels starting from the medium breakpoint.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-64\"), \" class is applied by default, setting the height to 64 pixels. However, starting from the medium breakpoint and above, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:h-48\"), \" class is applied, changing the height to 48 pixels.\"), mdx(\"h2\", null, \"Tailwind Height class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1/2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 50%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1/3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 33.333333%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-2/3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 66.666667%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1/4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 25%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-2/4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 50%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-3/4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 75%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1/5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 20%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-2/5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 40%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-3/5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 60%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-4/5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 80%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-1/6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 16.666667%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-2/6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 33.333333%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-3/6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 50%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-4/6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 66.666667%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-5/6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 83.333333%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-full\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 100%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"h-screen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height: 100vh;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=blog1\"\n  }, \"blog\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-height","title":"Tailwind Height"},{"url":"#setting-tailwind-height","title":"Setting Tailwind Height","items":[{"url":"#preview","title":"Preview"},{"url":"#percentage-based-tailwind-height","title":"Percentage-based Tailwind Height"},{"url":"#preview-1","title":"Preview"},{"url":"#responsive-tailwind-height","title":"Responsive Tailwind Height"},{"url":"#tailwind-height-class-table","title":"Tailwind Height class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-height.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Height","lastUpdated":"20 May 2024","metaDescription":"Tailwind height utility provides a set of classes that enable you to set the height of an element to a specific value, percentages, or use predefined height utilities along with the default spacing scale."}}},"pageContext":{"id":"083c25f6-d12d-5995-9f0c-bd4550adbc2f"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}