https://cirrus-ui.com/_next/static/chunks/pages/layout/height-6cf3fa7fd9a5018c0f56.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[84],{"00n6":function(e,a,t){"use strict";var n;t.d(a,"a",(function(){return n})),function(e){e.ACTIVE="active",e.CHECKED="checked",e.DARK="dark",e.DISABLED="disabled",e.FIRST_OF_TYPE="first-of-type",e.FOCUS="focus",e.FOCUS_VISIBLE="focus-visible",e.FOCUS_WITHIN="focus-within",e.GROUP_FOCUS="group-focus",e.GROUP_HOVER="group-hover",e.HOVER="hover",e.LANDSCAPE="landscape",e.LAST_OF_TYPE="last-of-type",e.LIGHT="light",e.PORTRAIT="portrait",e.REDUCE_MOTION="reduce-motion",e.RESPONSIVE="responsive",e.VISITED="visited"}(n||(n={}))},GgBe:function(e,a,t){"use strict";t.r(a),t.d(a,"default",(function(){return y}));var n=t("q1tI"),s=t.n(n),l=t("8Kt/"),i=t.n(l),r=t("YFqc"),c=t.n(r),o=t("BFRS"),u=t("cjCq"),d=t("VlCm"),p=t("qnXf"),h=t("dtTl"),m=t("nLA4"),_=[{name:"Height",anchor:"#height",children:[{name:"Scaled Heights",anchor:"#scaled",children:null},{name:"Absolute Heights",anchor:"#absolute",children:null},{name:"Screen Height",anchor:"#screen",children:null},{name:"Auto",anchor:"#auto",children:null},{name:"Responsive",anchor:"#responsive",children:null}]}],v=t("C/iq"),g=t("dw6e"),f=t("N2zt"),N=t("ZIZD"),b=t("NgAj"),E=t("00n6"),x=s.a.createElement,y=Object(o.b)(x(m.a,null))((function(e){var a=[{class:"h-0",style:"height: 0;"},{class:"h-px",style:"height: 1px;"},{class:"h-auto",style:"height: auto;"},{class:"h-screen",style:"height: 100vh;"}];return a=(a=a.concat(v.e.filter((function(e){return 0!==e})).map((function(e){return{class:"h-".concat(e,"p"),style:"height: ".concat(e,"%;")}})))).concat(v.i.filter((function(e){return 0!==e})).map((function(e){return{class:"h-".concat(e),style:"height: ".concat(.5*e,"rem")}}))),x("main",{className:"page-layout"},x(i.a,null,x("title",null,v.j," Height")),x("div",null,x("section",{className:"padtop",id:"height"},x("div",{className:"content"},x(d.a,{title:"Height",link:"#height"}),x("div",{className:"divider"}),x(f.b,{version:"0.7.0",text:"Updated"}),x("p",null,"Classes to set the height of an element."),x(g.a,{classTable:a}),x("div",{className:"space"}),x(b.a,{defaultEnabledPseudos:[E.a.RESPONSIVE]}))),x("section",{className:"padtop",id:"scaled"},x("div",{className:"content"},x(d.a,{title:"Scaled Heights",link:"#scaled",size:"4"}),x("div",{className:"divider"}),x("p",null,"The ",x("code",null,"h-{{value}}p")," classes gives an element a percentage based height."),x("div",{className:"u-flex u-items-flex-end u-justify-space-evenly p-6 bg-teal-100 mb-2",style:{height:"400px"}},x("div",{className:"h-30p bg-teal-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-30p")),x("div",{className:"h-50p bg-teal-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-50p")),x("div",{className:"h-70p bg-teal-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-70p")),x("div",{className:"h-90p bg-teal-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-90p"))),x(h.a,{language:"htmlbars",code:'<div>\n    <div class="h-30p">...</div>\n    <div class="h-50p">...</div>\n    <div class="h-70p">...</div>\n    <div class="h-90p">...</div>\n</div>'}))),x("section",{className:"padtop",id:"absolute"},x("div",{className:"content"},x(d.a,{title:"Absolute Heights",link:"#absolute",size:"4"}),x("div",{className:"divider"}),x(f.b,{version:"0.7.1",text:"New"}),x("p",null,"The ",x("code",null,"h-{{value}}")," classes gives an element an absolute value based height."),x("div",{className:"u-flex u-items-flex-end u-justify-space-evenly p-6 bg-pink-100 mb-2",style:{height:"400px"}},x("div",{className:"h-6 bg-pink-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-6")),x("div",{className:"h-8 bg-pink-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-8")),x("div",{className:"h-16 bg-pink-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-16")),x("div",{className:"h-32 bg-pink-500 u-round-xs p-1 u-shadow-lg"},x("p",{className:"text-gray-000"},"h-32"))),x(h.a,{language:"htmlbars",code:'<div>\n    <div class="h-6">...</div>\n    <div class="h-8">...</div>\n    <div class="h-16">...</div>\n    <div class="h-32">...</div>\n</div>'}))),x("section",{className:"padtop",id:"screen"},x("div",{className:"content"},x(d.a,{title:"Screen Height",link:"#screen",size:"4"}),x("div",{className:"divider"}),x("p",null,"The ",x("code",null,"h-screen")," class makes an element span the entire viewport."),x("div",{className:"u-relative p-6 bg-purple-100 mb-2",style:{minHeight:"400px"}},x("div",{className:"h-screen bg-purple-500 text-gray-000 p-3 w-100p u-flex u-items-center u-justify-center u-round-xs u-shadow-lg"},x("p",null,"h-screen"))),x(h.a,{language:"htmlbars",code:'<div>\n    <div class="h-screen">...</div>\n</div>'}))),x("section",{className:"padtop",id:"auto"},x("div",{className:"content"},x(d.a,{title:"Auto",link:"#auto",size:"4"}),x("div",{className:"divider"}),x("p",null,"The ",x("code",null,"h-auto")," class makes an element use a browser determined height. This is commonly used to unset a previously set height."),x("div",{className:"u-relative p-6 bg-red-100 mb-2",style:{minHeight:"200px"}},x("div",{className:"h-auto bg-red-500 text-gray-000 p-3 w-100p u-flex u-items-center u-justify-center u-round-xs u-shadow-lg"},x("p",{className:"mb-0"},"h-auto"))),x(h.a,{language:"htmlbars",code:'<div>\n    <div class="h-auto">...</div>\n</div>'}))),x("section",{className:"padtop",id:"responsive"},x("div",{className:"content"},x(d.a,{title:"Responsive",link:"#responsive",size:"4"}),x("div",{className:"divider"}),x("span",{className:"tag-container group-tags"},x("div",{className:"tag tag--dark"},"New"),x("div",{className:"tag tag--info"},"0.7.0")),x("p",null,"All utility classes mentioned here support viewport based application. All you need to do is add a ",x("code",null,"<viewport>:<class>")," at the end of the class(es) you are using. For example, use ",x("code",null,"md:h-30p")," to apply ",x("code",null,"h-30p")," on medium screens and above."),x(h.a,{code:'

1<div class="md:h-30p">\n    \x3c!-- ... --\x3e\n</div>',language:"html"}),x("p",null,"For more information, visit the"," ",x(c.a,{href:"/fundamentals/viewports"},x("a",{className:"u u-LR"},"Viewports"))," ","documentation."))),x(p.a,{lookupProps:{sectionName:N.h,pageName:"Height"}})),x(u.a,{entries:_}))}))},N2zt:function(e,a,t){"use strict";t.d(a,"a",(function(){return l})),t.d(a,"b",(function(){return i}));var n=t("q1tI"),s=t.n(n).a.createElement,l=function(e){return s("span",{className:"tag-container group-tags"},s("div",{className:"tag "+e.leftProps.classes},e.leftProps.text),s("div",{className:"tag "+e.rightProps.classes},e.rightProps.text))},i=function(e){var a;return s(l,{leftProps:{classes:"tag--dark",text:null!==(a=e.text)&&void 0!==a?a:"New"},rightProps:{classes:"tag--info",text:e.version}})}},NgAj:function(e,a,t){"use strict";t.d(a,"a",(function(){return o}));var n=t("q1tI"),s=t.n(n),l=t("00n6"),i=t("PX7u"),r=t("N2zt"),c=s.a.createElement,o=function(e){var a=[l.a.ACTIVE,l.a.CHECKED,l.a.DARK,l.a.DISABLED,l.a.FIRST_OF_TYPE,l.a.FOCUS,l.a.FOCUS_VISIBLE,l.a.FOCUS_WITHIN,l.a.GROUP_FOCUS,l.a.GROUP_HOVER,l.a.HOVER,l.a.LANDSCAPE,l.a.LAST_OF_TYPE,l.a.LIGHT,l.a.PORTRAIT,l.a.REDUCE_MOTION,l.a.RESPONSIVE,l.a.VISITED],t=new Set(e.defaultEnabledPseudos);return c(s.a.Fragment,null,c("h6",{className:"font-normal"},"Supported Pseudo-Variants"),c(r.b,{version:"0.8.0"}),c("div",{className:"u-flex u-gap-1 u-flex-wrap"},a.map((function(a){return c("div",{className:"tag text-md u-border-1 u-unselectable ".concat(e.defaultEnabledPseudos&&t.has(a)?"border-gray-800 text-gray-100 bg-gray-800 u-shadow-sm":"border-gray-300 text-gray-500 bg-transparent"),key:a},a)}))),c("div",{className:"space"}),c("p",null,"See more ",c(i.b,{url:"/fundamentals/pseudo-variants"},"pseudo-variants"),"."))}},PX7u:function(e,a,t){"use strict";t.d(a,"a",(function(){return c})),t.d(a,"b",(function(){return o}));var n=t("Ff2n"),s=t("YFqc"),l=t.n(s),i=t("q1tI"),r=t.n(i).a.createElement,c=function(e){var a,t=e.children,s=Object(n.a)(e,["children"]);return r("a",{className:"u u-LR ".concat(null!==(a=s.classes)&&void 0!==a?a:""),target:"_blank",href:s.url,rel:"noopener noreferrer",style:{cursor:"pointer"}},t)},o=function(e){var a=e.children,t=Object(n.a)(e,["children"]);return r(l.a,{href:t.url},r("a",{className:"u u-LR",href:t.url,style:{cursor:"pointer"}},a))}},VlCm:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Headline}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("q1tI"),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("P5Jw"),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__),__jsx=react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement,Headline=function Headline(props){var _props$size,HeaderTag="h".concat(null!==(_props$size=props.size)&&void 0!==_props$size?_props$size:"1"),_useState=Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),currentUrl=_useState[0],setCurrentUrl=_useState[1];function getUrlWithoutAnchor(){return currentUrl.replace(/#.*$/,"")}return Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){setCurrentUrl(eval("window.location.href;"))}),[]),__jsx(HeaderTag,null,__jsx(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default.a,{text:getUrlWithoutAnchor()+props.link},__jsx("a",{className:"tooltip tooltip--left mr-1","data-tooltip":"Copy",style:{cursor:"pointer"}},"#")),props.title)}},cjCq:function(e,a,t){"use strict";t.d(a,"a",(function(){return l}));var n=t("q1tI"),s=t.n(n).a.createElement,l=function(e){return Object(n.useEffect)((function(){if(document.querySelector(".toc__nav")){!function(e){var a=new IntersectionObserver((function(e){e.forEach((function(e){var a=e.target.getAttribute("id");document.querySelector('.toc__nav li a[href="#'.concat(a,'"]'))&&(e.intersectionRatio>0?document.querySelector('.toc__nav li a[href="#'.concat(a,'"]')).parentElement.classList.add("active"):document.querySelector('.toc__nav li a[href="#'.concat(a,'"]')).parentElement.classList.remove("active"))}))}));document.querySelectorAll("section[id]").forEach((function(e){a.observe(e)}))}()}})),s("nav",{className:"toc__nav"},s("span",{className:"uppercase text-gray-600 font-bold text-xs"},"Contents"),function e(a){return s("ul",null,a.map((function(a){return s("li",{key:a.name},s("a",{href:a.anchor},a.name),a.children&&e(a.children))})))}(e.entries))}},dtTl:function(e,a,t){"use strict";t.d(a,"a",(function(){return d}));var n=t("q1tI"),s=t.n(n),l=t("P5Jw"),i=t.n(l),r=t("IP2g"),c=t("uUdh"),o=t("c2c2"),u=s.a.createElement,d=function(e){var a,t,s=Object(n.useState)(!1),l=s[0],d=s[1];return u("div",{className:"codeblock-wrapper u-relative mb-2"},u(c.a,{className:"codeblock pl-2 pr-3 py-1 u-shadow-lg h-100p ".concat(null!==(a=e.classes)&&void 0!==a?a:""," ").concat(e.breakAll?"break-all":""),language:"htmlbars"===e.language?"html":e.language,style:null!==(t=e.style)&&void 0!==t?t:o.duotoneDark},e.code),u(i.a,{text:e.code,onCopy:function(){d(!0),setTimeout((function(){return d(!1)}),3e3)}},u(r.a,{className:"fa-wrapper u-absolute text-gray-200",icon:["fas",l?"clipboard-check":"clipboard"],style:{cursor:"pointer",right:"1.5rem",top:"1.2rem"}})))}},dw6e:function(e,a,t){"use strict";t.d(a,"a",(function(){return l}));var n=t("q1tI"),s=t.n(n).a.createElement,l=function(e){return s("table",{className:"class-table table fixed-head u-text-left"},s("thead",null,s("tr",null,s("th",{style:{width:"200px"}},"Class"),s("th",null,"Styles"))),s("tbody",null,e.classTable.map((function(e,a){return s("tr",{key:a},s("td",{style:{width:"200px"}},s("code",{className:"text-blue-600 bg-blue-100"},e.class)),s("td",null,s("pre",null,s("code",{className:"text-purple-600 bg-transparent"},e.style))))}))))}},h4W1:function(e,a,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/layout/height",function(){return t("GgBe")}])},qnXf:function(e,a,t){"use strict";t.d(a,"a",(function(){return o}

1));var n=t("q1tI"),s=t.n(n),l=t("YFqc"),i=t.n(l),r=t("ZIZD"),c=s.a.createElement,o=function(e){if(!(e.nextLink||e.prevLink)===!e.lookupProps)throw Error("Either provide prev/next link or sidebar config map");var a=e.lookupProps?r.a.get(e.lookupProps.sectionName).lowerEntry(e.lookupProps.pageName):null,t=e.lookupProps?r.a.get(e.lookupProps.sectionName).higherEntry(e.lookupProps.pageName):null;return c("section",{className:"padtop"},c("div",{className:"content"},c("div",{className:"divider"}),c("div",{className:"pagination no-bullets"},a&&c("div",{className:"pagination-item pagination-prev"},c(i.a,{href:a[1].url},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Prev"),c("h5",{className:"font-alt font-light m-0"},a[1].text)))),t&&c("div",{className:"pagination-item pagination-next"},c(i.a,{href:t[1].url},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Next"),c("h5",{className:"font-alt font-light m-0"},t[1].text)))),e.prevLink&&c("div",{className:"pagination-item pagination-prev"},c(i.a,{href:e.prevLink.link},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Prev"),c("h5",{className:"font-alt font-light m-0"},e.prevLink.name)))),e.nextLink&&c("div",{className:"pagination-item pagination-next"},c(i.a,{href:e.nextLink.link},c("a",{className:"u-block"},c("p",{className:"pagination-item-subtitle"},"Next"),c("h5",{className:"font-alt font-light m-0"},e.nextLink.name)))))))}}},[["h4W1",0,2,1,3,4,5,6]]]);