[{"data":1,"prerenderedAt":868},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/components/spacer":270,"docs-bottom-nav":795},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":272,"body":273,"description":787,"extension":788,"meta":789,"navigation":790,"path":160,"seo":791,"sitemap":792,"stem":793,"__hash__":794},"docs/docs/components/spacer.md","Spacer Component",{"type":274,"value":275,"toc":778},"minimark",[276,280,284,289,297,304,433,439,452,456,459,463,469,472,478,503,506,554,567,570,574,577,612,619,630,637,661,672,696,708,712,722,729,733,740,774],[277,278,272],"h1",{"id":279},"spacer-component",[281,282,283],"p",{},"The Spacer component in Maizzle makes it super simple to add consistent, accessible vertical spacing to your HTML emails.",[285,286,288],"h2",{"id":287},"usage","Usage",[281,290,291,292,296],{},"The Spacer component is defined in ",[293,294,295],"code",{},"components/spacer.html",".",[281,298,299,300,303],{},"This enables the ",[293,301,302],{},"\u003Cx-spacer>"," syntax, which you can use like this:",[305,306,313],"pre",{"className":307,"code":308,"highlights":309,"language":311,"meta":312,"style":312},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cx-main>\n  \u003Ctable>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cx-spacer height=\"32px\" />\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[310],5,"html","",[293,314,315,331,342,353,364,393,403,413,423],{"__ignoreMap":312},[316,317,320,324,328],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"soJEP","\u003C",[316,325,327],{"class":326},"sizJ4","x-main",[316,329,330],{"class":322},">\n",[316,332,334,337,340],{"class":318,"line":333},2,[316,335,336],{"class":322},"  \u003C",[316,338,339],{"class":326},"table",[316,341,330],{"class":322},[316,343,345,348,351],{"class":318,"line":344},3,[316,346,347],{"class":322},"    \u003C",[316,349,350],{"class":326},"tr",[316,352,330],{"class":322},[316,354,356,359,362],{"class":318,"line":355},4,[316,357,358],{"class":322},"      \u003C",[316,360,361],{"class":326},"td",[316,363,330],{"class":322},[316,365,368,371,374,378,381,384,388,390],{"class":366,"line":310},[318,367],"highlight",[316,369,370],{"class":322},"        \u003C",[316,372,373],{"class":326},"x-spacer",[316,375,377],{"class":376},"sQMLp"," height",[316,379,380],{"class":322},"=",[316,382,383],{"class":376},"\"",[316,385,387],{"class":386},"sfCc6","32px",[316,389,383],{"class":376},[316,391,392],{"class":322}," />\n",[316,394,396,399,401],{"class":318,"line":395},6,[316,397,398],{"class":322},"      \u003C/",[316,400,361],{"class":326},[316,402,330],{"class":322},[316,404,406,409,411],{"class":318,"line":405},7,[316,407,408],{"class":322},"    \u003C/",[316,410,350],{"class":326},[316,412,330],{"class":322},[316,414,416,419,421],{"class":318,"line":415},8,[316,417,418],{"class":322},"  \u003C/",[316,420,339],{"class":326},[316,422,330],{"class":322},[316,424,426,429,431],{"class":318,"line":425},9,[316,427,428],{"class":322},"\u003C/",[316,430,327],{"class":326},[316,432,330],{"class":322},[281,434,435,436,296],{},"You can use it anywhere you'd use a ",[293,437,438],{},"\u003Cdiv>",[281,440,441,442,445,446,451],{},"If you need to add space between ",[293,443,444],{},"\u003Ctr>",", see the ",[447,448,450],"a",{"href":449},"/docs/examples/spacers#row","Row Spacer example"," instead.",[285,453,455],{"id":454},"props","Props",[281,457,458],{},"You can pass props to the component via HTML attributes, to control its height.",[460,461,462],"h3",{"id":462},"height",[281,464,465,466],{},"Default: ",[293,467,468],{},"undefined",[281,470,471],{},"This will define the height of the Spacer.",[281,473,474,475,296],{},"You may use any CSS unit that you prefer, it doesn't have to be ",[293,476,477],{},"px",[305,479,482],{"className":307,"code":480,"filename":481,"language":311,"meta":312,"style":312},"\u003Cx-spacer height=\"1em\" />\n","emails/example.html",[293,483,484],{"__ignoreMap":312},[316,485,486,488,490,492,494,496,499,501],{"class":318,"line":319},[316,487,323],{"class":322},[316,489,373],{"class":326},[316,491,377],{"class":376},[316,493,380],{"class":322},[316,495,383],{"class":376},[316,497,498],{"class":386},"1em",[316,500,383],{"class":376},[316,502,392],{"class":322},[281,504,505],{},"That will render the following HTML:",[305,507,509],{"className":307,"code":508,"filename":481,"language":311,"meta":312,"style":312},"\u003Cdiv style=\"line-height: 1em;\" role=\"separator\">‍\u003C/div>\n",[293,510,511],{"__ignoreMap":312},[316,512,513,515,518,521,523,525,528,530,533,535,537,540,542,545,548,550,552],{"class":318,"line":319},[316,514,323],{"class":322},[316,516,517],{"class":326},"div",[316,519,520],{"class":376}," style",[316,522,380],{"class":322},[316,524,383],{"class":376},[316,526,527],{"class":386},"line-height: 1em;",[316,529,383],{"class":376},[316,531,532],{"class":376}," role",[316,534,380],{"class":322},[316,536,383],{"class":376},[316,538,539],{"class":386},"separator",[316,541,383],{"class":376},[316,543,544],{"class":322},">",[316,546,547],{"class":326},"‍",[316,549,428],{"class":322},[316,551,517],{"class":326},[316,553,330],{"class":322},[281,555,556,557,559,560,563,564,296],{},"If ",[293,558,462],{}," is omitted, the Spacer will render as ",[293,561,562],{},"\u003Cdiv role=\"separator\">‍\u003C/div>",", which will render as an empty space that is as high as its parent element's ",[293,565,566],{},"line-height",[460,568,569],{"id":569},"mso-height",[281,571,465,572],{},[293,573,468],{},[281,575,576],{},"Override the height of the Spacer in Outlook for Windows.",[305,578,580],{"className":307,"code":579,"filename":481,"language":311,"meta":312,"style":312},"\u003Cx-spacer height=\"32px\" mso-height=\"30px\" />\n",[293,581,582],{"__ignoreMap":312},[316,583,584,586,588,590,592,594,596,598,601,603,605,608,610],{"class":318,"line":319},[316,585,323],{"class":322},[316,587,373],{"class":326},[316,589,377],{"class":376},[316,591,380],{"class":322},[316,593,383],{"class":376},[316,595,387],{"class":386},[316,597,383],{"class":376},[316,599,600],{"class":376}," mso-height",[316,602,380],{"class":322},[316,604,383],{"class":376},[316,606,607],{"class":386},"30px",[316,609,383],{"class":376},[316,611,392],{"class":322},[281,613,614,615,618],{},"This uses the ",[293,616,617],{},"mso-line-height-alt"," MSO CSS property to set a custom Spacer height in Outlook for Windows.",[281,620,621,622,625,626,629],{},"Note: for the Spacer to work as expected in Outlook on Windows, it should also be styled with ",[293,623,624],{},"mso-line-height-rule: exactly",". In Maizzle this is set globally in the ",[293,627,628],{},"main.html"," layout, so you don't need to worry about it.",[281,631,632,633,636],{},"However, if you can't use that layout for some reason or are worried that the Outlook-specific CSS in the ",[293,634,635],{},"\u003Chead>"," might be stripped in some situations, simply add it in a style attribute on the tag:",[305,638,640],{"className":307,"code":639,"filename":481,"language":311,"meta":312,"style":312},"\u003Cx-spacer style=\"mso-line-height-rule: exactly;\" />\n",[293,641,642],{"__ignoreMap":312},[316,643,644,646,648,650,652,654,657,659],{"class":318,"line":319},[316,645,323],{"class":322},[316,647,373],{"class":326},[316,649,520],{"class":376},[316,651,380],{"class":322},[316,653,383],{"class":376},[316,655,656],{"class":386},"mso-line-height-rule: exactly;",[316,658,383],{"class":376},[316,660,392],{"class":322},[281,662,663,664,667,668,671],{},"Alternatively, you may also use the ",[293,665,666],{},"mso-line-height-rule-exactly"," class that is available from the ",[293,669,670],{},"tailwindcss-mso"," plugin (included in the Starter):",[305,673,675],{"className":307,"code":674,"filename":481,"language":311,"meta":312,"style":312},"\u003Cx-spacer class=\"mso-line-height-rule-exactly\" />\n",[293,676,677],{"__ignoreMap":312},[316,678,679,681,683,686,688,690,692,694],{"class":318,"line":319},[316,680,323],{"class":322},[316,682,373],{"class":326},[316,684,685],{"class":376}," class",[316,687,380],{"class":322},[316,689,383],{"class":376},[316,691,666],{"class":386},[316,693,383],{"class":376},[316,695,392],{"class":322},[281,697,698,699,701,702,704,705,707],{},"Of course, you can also modify ",[293,700,295],{}," and add the ",[293,703,624],{}," CSS rule to the ",[293,706,438],{}," element.",[460,709,711],{"id":710},"other-attributes","Other attributes",[281,713,714,715,718,719,296],{},"You may pass any other HTML attributes to the component, such as ",[293,716,717],{},"class"," or ",[293,720,721],{},"id",[281,723,724,725,728],{},"Note that non-standard attributes will be ignored by default - you'll need to define them as props in the component if you need them preserved. Alternatively, you can safelist them in your ",[293,726,727],{},"build.components"," config.",[285,730,732],{"id":731},"responsive","Responsive",[281,734,735,736,739],{},"To override the height of the Spacer on mobile, use the ",[293,737,738],{},"leading"," utilities in Tailwind CSS:",[305,741,743],{"className":307,"code":742,"filename":481,"language":311,"meta":312,"style":312},"\u003Cx-spacer height=\"32px\" class=\"sm:leading-4\" />\n",[293,744,745],{"__ignoreMap":312},[316,746,747,749,751,753,755,757,759,761,763,765,767,770,772],{"class":318,"line":319},[316,748,323],{"class":322},[316,750,373],{"class":326},[316,752,377],{"class":376},[316,754,380],{"class":322},[316,756,383],{"class":376},[316,758,387],{"class":386},[316,760,383],{"class":376},[316,762,685],{"class":376},[316,764,380],{"class":322},[316,766,383],{"class":376},[316,768,769],{"class":386},"sm:leading-4",[316,771,383],{"class":376},[316,773,392],{"class":322},[775,776,777],"style",{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":312,"searchDepth":333,"depth":333,"links":779},[780,781,786],{"id":287,"depth":333,"text":288},{"id":454,"depth":333,"text":455,"children":782},[783,784,785],{"id":462,"depth":344,"text":462},{"id":569,"depth":344,"text":569},{"id":710,"depth":344,"text":711},{"id":731,"depth":333,"text":732},"A component for creating consistent vertical spacing in HTML emails.","md",{},true,{"title":272,"description":787},{"loc":160},"docs/components/spacer","LVQD6_ob-fQJ2AdOML5HHlBImPmKSy82oVMtRsIPFnA",{"id":4,"extension":5,"items":796,"meta":867,"stem":195,"__hash__":196},[797,807,812,821,834,852,858],{"name":8,"items":798},[799,800,801,802,803,804,805,806],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":808},[809,810,811],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":813},[814,815,816,817,818,819,820],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":822},[823,824,825,826,827,828,829,830,831,832,833],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":835},[836,837,838,839,840,841,842,843,844,845,846,847,848,849,850,851],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":853},[854,855,856,857],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":859},[860,861,862,863,864,865,866],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318590602]