[{"data":1,"prerenderedAt":2407},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fcomponents\u002Fimg":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":72,"body":318,"description":2401,"extension":2402,"meta":2403,"navigation":14,"order":73,"path":71,"section":31,"seo":2404,"sidebar":14,"stem":2405,"toc":14,"__hash__":2406},"docs\u002Fdocs\u002Fcomponents\u002Fimg.md",{"type":319,"value":320,"toc":2382},"minimark",[321,325,329,334,485,490,497,695,710,714,720,920,934,949,953,956,971,1181,1213,1218,1225,1348,1361,1365,1379,1466,1485,1531,1535,1552,1631,1635,1653,1657,1664,1835,1849,2094,2098,2100,2114,2121,2123,2132,2135,2137,2147,2153,2157,2166,2182,2185,2193,2196,2198,2206,2219,2231,2237,2239,2248,2255,2281,2283,2292,2296,2321,2323,2331,2349,2353,2364,2378],[322,323,72],"h1",{"id":324},"img",[326,327,328],"p",{},"Renders a responsive image with support for dark mode, animated source switching, and fixed-aspect cropping for unpredictable source images like content feeds.",[330,331,333],"h2",{"id":332},"usage","Usage",[335,336,337,425],"code-tabs",{},[338,339,341],"code-tab",{"label":340},"emails\u002Fexample.vue",[342,343,348],"pre",{"className":344,"code":345,"language":346,"meta":347,"style":347},"language-vue shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CImg src=\"https:\u002F\u002Fexample.com\u002Fhero.jpg\" alt=\"Hero image\" width=\"600\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[349,350,351,366,416],"code",{"__ignoreMap":347},[352,353,355,359,363],"span",{"class":354,"line":18},"line",[352,356,358],{"class":357},"sGGKt","\u003C",[352,360,362],{"class":361},"sb4Pa","template",[352,364,365],{"class":357},">\n",[352,367,368,371,373,377,380,383,387,389,392,394,396,399,401,404,406,408,411,413],{"class":354,"line":13},[352,369,370],{"class":357},"  \u003C",[352,372,72],{"class":361},[352,374,376],{"class":375},"sZNF3"," src",[352,378,379],{"class":357},"=",[352,381,382],{"class":357},"\"",[352,384,386],{"class":385},"sXiT_","https:\u002F\u002Fexample.com\u002Fhero.jpg",[352,388,382],{"class":357},[352,390,391],{"class":375}," alt",[352,393,379],{"class":357},[352,395,382],{"class":357},[352,397,398],{"class":385},"Hero image",[352,400,382],{"class":357},[352,402,403],{"class":375}," width",[352,405,379],{"class":357},[352,407,382],{"class":357},[352,409,410],{"class":385},"600",[352,412,382],{"class":357},[352,414,415],{"class":357}," \u002F>\n",[352,417,418,421,423],{"class":354,"line":32},[352,419,420],{"class":357},"\u003C\u002F",[352,422,362],{"class":361},[352,424,365],{"class":357},[338,426,428],{"label":427},"dist\u002Fexample.html",[342,429,433],{"className":430,"code":431,"language":432,"meta":347,"style":347},"language-html shiki shiki-themes laserwave","\u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fhero.jpg\" alt=\"Hero image\" width=\"600\" class=\"max-w-full align-middle\">\n","html",[349,434,435],{"__ignoreMap":347},[352,436,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467,469,471,474,476,478,481,483],{"class":354,"line":18},[352,438,358],{"class":357},[352,440,324],{"class":361},[352,442,376],{"class":375},[352,444,379],{"class":357},[352,446,382],{"class":357},[352,448,386],{"class":385},[352,450,382],{"class":357},[352,452,391],{"class":375},[352,454,379],{"class":357},[352,456,382],{"class":357},[352,458,398],{"class":385},[352,460,382],{"class":357},[352,462,403],{"class":375},[352,464,379],{"class":357},[352,466,382],{"class":357},[352,468,410],{"class":385},[352,470,382],{"class":357},[352,472,473],{"class":375}," class",[352,475,379],{"class":357},[352,477,382],{"class":357},[352,479,480],{"class":385},"max-w-full align-middle",[352,482,382],{"class":357},[352,484,365],{"class":357},[486,487,489],"h3",{"id":488},"dark-mode","Dark mode",[326,491,492,493,496],{},"Use ",[349,494,495],{},"dark-src"," to provide an alternative image for dark mode:",[335,498,499,591],{},[338,500,501],{"label":340},[342,502,504],{"className":344,"code":503,"language":346,"meta":347,"style":347},"\u003Ctemplate>\n  \u003CImg\n    src=\"https:\u002F\u002Fexample.com\u002Flogo.png\"\n    dark-src=\"https:\u002F\u002Fexample.com\u002Flogo-dark.png\"\n    alt=\"Logo\"\n    width=\"120\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[349,505,506,514,521,536,550,564,578,583],{"__ignoreMap":347},[352,507,508,510,512],{"class":354,"line":18},[352,509,358],{"class":357},[352,511,362],{"class":361},[352,513,365],{"class":357},[352,515,516,518],{"class":354,"line":13},[352,517,370],{"class":357},[352,519,520],{"class":361},"Img\n",[352,522,523,526,528,530,533],{"class":354,"line":32},[352,524,525],{"class":375},"    src",[352,527,379],{"class":357},[352,529,382],{"class":357},[352,531,532],{"class":385},"https:\u002F\u002Fexample.com\u002Flogo.png",[352,534,535],{"class":357},"\"\n",[352,537,538,541,543,545,548],{"class":354,"line":27},[352,539,540],{"class":375},"    dark-src",[352,542,379],{"class":357},[352,544,382],{"class":357},[352,546,547],{"class":385},"https:\u002F\u002Fexample.com\u002Flogo-dark.png",[352,549,535],{"class":357},[352,551,552,555,557,559,562],{"class":354,"line":52},[352,553,554],{"class":375},"    alt",[352,556,379],{"class":357},[352,558,382],{"class":357},[352,560,561],{"class":385},"Logo",[352,563,535],{"class":357},[352,565,566,569,571,573,576],{"class":354,"line":128},[352,567,568],{"class":375},"    width",[352,570,379],{"class":357},[352,572,382],{"class":357},[352,574,575],{"class":385},"120",[352,577,535],{"class":357},[352,579,580],{"class":354,"line":124},[352,581,582],{"class":357},"  \u002F>\n",[352,584,585,587,589],{"class":354,"line":48},[352,586,420],{"class":357},[352,588,362],{"class":361},[352,590,365],{"class":357},[338,592,593],{"label":427},[342,594,596],{"className":430,"code":595,"language":432,"meta":347,"style":347},"\u003Cpicture>\n  \u003Csource srcset=\"https:\u002F\u002Fexample.com\u002Flogo-dark.png\" media=\"(prefers-color-scheme: dark)\">\n  \u003Cimg src=\"https:\u002F\u002Fexample.com\u002Flogo.png\" alt=\"Logo\" width=\"120\" class=\"max-w-full align-middle\">\n\u003C\u002Fpicture>\n",[349,597,598,607,639,687],{"__ignoreMap":347},[352,599,600,602,605],{"class":354,"line":18},[352,601,358],{"class":357},[352,603,604],{"class":361},"picture",[352,606,365],{"class":357},[352,608,609,611,614,617,619,621,623,625,628,630,632,635,637],{"class":354,"line":13},[352,610,370],{"class":357},[352,612,613],{"class":361},"source",[352,615,616],{"class":375}," srcset",[352,618,379],{"class":357},[352,620,382],{"class":357},[352,622,547],{"class":385},[352,624,382],{"class":357},[352,626,627],{"class":375}," media",[352,629,379],{"class":357},[352,631,382],{"class":357},[352,633,634],{"class":385},"(prefers-color-scheme: dark)",[352,636,382],{"class":357},[352,638,365],{"class":357},[352,640,641,643,645,647,649,651,653,655,657,659,661,663,665,667,669,671,673,675,677,679,681,683,685],{"class":354,"line":32},[352,642,370],{"class":357},[352,644,324],{"class":361},[352,646,376],{"class":375},[352,648,379],{"class":357},[352,650,382],{"class":357},[352,652,532],{"class":385},[352,654,382],{"class":357},[352,656,391],{"class":375},[352,658,379],{"class":357},[352,660,382],{"class":357},[352,662,561],{"class":385},[352,664,382],{"class":357},[352,666,403],{"class":375},[352,668,379],{"class":357},[352,670,382],{"class":357},[352,672,575],{"class":385},[352,674,382],{"class":357},[352,676,473],{"class":375},[352,678,379],{"class":357},[352,680,382],{"class":357},[352,682,480],{"class":385},[352,684,382],{"class":357},[352,686,365],{"class":357},[352,688,689,691,693],{"class":354,"line":27},[352,690,420],{"class":357},[352,692,604],{"class":361},[352,694,365],{"class":357},[326,696,697,698,701,702,705,706,709],{},"This wraps the image in a ",[349,699,700],{},"\u003Cpicture>"," element with a ",[349,703,704],{},"\u003Csource>"," that uses the ",[349,707,708],{},"prefers-color-scheme: dark"," media query. Email client support for this is limited.",[486,711,713],{"id":712},"animated-images","Animated images",[326,715,492,716,719],{},[349,717,718],{},"motion-src"," to show an animated image based on the user's reduced motion preference. Email client support for this is also limited.",[335,721,722,808],{},[338,723,724],{"label":340},[342,725,727],{"className":344,"code":726,"language":346,"meta":347,"style":347},"\u003Ctemplate>\n  \u003CImg\n    src=\"https:\u002F\u002Fexample.com\u002Fpreview.jpg\"\n    motion-src=\"https:\u002F\u002Fexample.com\u002Fanimated.gif\"\n    alt=\"Product demo\"\n    width=\"400\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[349,728,729,737,743,756,770,783,796,800],{"__ignoreMap":347},[352,730,731,733,735],{"class":354,"line":18},[352,732,358],{"class":357},[352,734,362],{"class":361},[352,736,365],{"class":357},[352,738,739,741],{"class":354,"line":13},[352,740,370],{"class":357},[352,742,520],{"class":361},[352,744,745,747,749,751,754],{"class":354,"line":32},[352,746,525],{"class":375},[352,748,379],{"class":357},[352,750,382],{"class":357},[352,752,753],{"class":385},"https:\u002F\u002Fexample.com\u002Fpreview.jpg",[352,755,535],{"class":357},[352,757,758,761,763,765,768],{"class":354,"line":27},[352,759,760],{"class":375},"    motion-src",[352,762,379],{"class":357},[352,764,382],{"class":357},[352,766,767],{"class":385},"https:\u002F\u002Fexample.com\u002Fanimated.gif",[352,769,535],{"class":357},[352,771,772,774,776,778,781],{"class":354,"line":52},[352,773,554],{"class":375},[352,775,379],{"class":357},[352,777,382],{"class":357},[352,779,780],{"class":385},"Product demo",[352,782,535],{"class":357},[352,784,785,787,789,791,794],{"class":354,"line":128},[352,786,568],{"class":375},[352,788,379],{"class":357},[352,790,382],{"class":357},[352,792,793],{"class":385},"400",[352,795,535],{"class":357},[352,797,798],{"class":354,"line":124},[352,799,582],{"class":357},[352,801,802,804,806],{"class":354,"line":48},[352,803,420],{"class":357},[352,805,362],{"class":361},[352,807,365],{"class":357},[338,809,810],{"label":427},[342,811,813],{"className":430,"code":812,"language":432,"meta":347,"style":347},"\u003Cpicture>\n  \u003Csource srcset=\"https:\u002F\u002Fexample.com\u002Fanimated.gif\" type=\"image\u002Fgif\" media=\"(prefers-reduced-motion: no-preference)\">\n  \u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fpreview.jpg\" alt=\"Product demo\" width=\"400\" class=\"max-w-full align-middle\">\n\u003C\u002Fpicture>\n",[349,814,815,823,864,912],{"__ignoreMap":347},[352,816,817,819,821],{"class":354,"line":18},[352,818,358],{"class":357},[352,820,604],{"class":361},[352,822,365],{"class":357},[352,824,825,827,829,831,833,835,837,839,842,844,846,849,851,853,855,857,860,862],{"class":354,"line":13},[352,826,370],{"class":357},[352,828,613],{"class":361},[352,830,616],{"class":375},[352,832,379],{"class":357},[352,834,382],{"class":357},[352,836,767],{"class":385},[352,838,382],{"class":357},[352,840,841],{"class":375}," type",[352,843,379],{"class":357},[352,845,382],{"class":357},[352,847,848],{"class":385},"image\u002Fgif",[352,850,382],{"class":357},[352,852,627],{"class":375},[352,854,379],{"class":357},[352,856,382],{"class":357},[352,858,859],{"class":385},"(prefers-reduced-motion: no-preference)",[352,861,382],{"class":357},[352,863,365],{"class":357},[352,865,866,868,870,872,874,876,878,880,882,884,886,888,890,892,894,896,898,900,902,904,906,908,910],{"class":354,"line":32},[352,867,370],{"class":357},[352,869,324],{"class":361},[352,871,376],{"class":375},[352,873,379],{"class":357},[352,875,382],{"class":357},[352,877,753],{"class":385},[352,879,382],{"class":357},[352,881,391],{"class":375},[352,883,379],{"class":357},[352,885,382],{"class":357},[352,887,780],{"class":385},[352,889,382],{"class":357},[352,891,403],{"class":375},[352,893,379],{"class":357},[352,895,382],{"class":357},[352,897,793],{"class":385},[352,899,382],{"class":357},[352,901,473],{"class":375},[352,903,379],{"class":357},[352,905,382],{"class":357},[352,907,480],{"class":385},[352,909,382],{"class":357},[352,911,365],{"class":357},[352,913,914,916,918],{"class":354,"line":27},[352,915,420],{"class":357},[352,917,604],{"class":361},[352,919,365],{"class":357},[326,921,697,922,701,924,705,926,929,930,933],{},[349,923,700],{},[349,925,704],{},[349,927,928],{},"prefers-reduced-motion: no-preference"," media query. The MIME type is auto-detected from the file extension. The ",[349,931,932],{},"src"," image serves as the static fallback.",[326,935,936,937,939,940,942,943,945,946,948],{},"You can combine ",[349,938,495],{}," and ",[349,941,718],{}," on the same component — both ",[349,944,704],{}," elements will be rendered inside the ",[349,947,700],{}," wrapper.",[486,950,952],{"id":951},"cropped","Cropped images",[326,954,955],{},"Sometimes you don't control the dimensions of source images, for example with aggregated content feeds, RSS thumbnails or user-uploaded photos.",[326,957,958,959,962,963,966,967,970],{},"Set ",[349,960,961],{},"aspect"," to crop them to a consistent ratio without distortion. The rendered structure will switch to a ",[349,964,965],{},"background-image"," div sized via the padding-bottom hack, plus a VML ",[349,968,969],{},"\u003Cv:rect>"," fallback so Outlook gets a properly cropped fill too.",[335,972,973,1061],{},[338,974,975],{"label":340},[342,976,979],{"className":344,"code":977,"highlights":978,"language":346,"meta":347,"style":347},"\u003Ctemplate>\n  \u003CImg\n    src=\"https:\u002F\u002Fexample.com\u002Fportrait-image.jpg\"\n    width=\"600\"\n    alt=\"Article cover\"\n    aspect=\"16:9\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[128],[349,980,981,989,995,1008,1020,1033,1049,1053],{"__ignoreMap":347},[352,982,983,985,987],{"class":354,"line":18},[352,984,358],{"class":357},[352,986,362],{"class":361},[352,988,365],{"class":357},[352,990,991,993],{"class":354,"line":13},[352,992,370],{"class":357},[352,994,520],{"class":361},[352,996,997,999,1001,1003,1006],{"class":354,"line":32},[352,998,525],{"class":375},[352,1000,379],{"class":357},[352,1002,382],{"class":357},[352,1004,1005],{"class":385},"https:\u002F\u002Fexample.com\u002Fportrait-image.jpg",[352,1007,535],{"class":357},[352,1009,1010,1012,1014,1016,1018],{"class":354,"line":27},[352,1011,568],{"class":375},[352,1013,379],{"class":357},[352,1015,382],{"class":357},[352,1017,410],{"class":385},[352,1019,535],{"class":357},[352,1021,1022,1024,1026,1028,1031],{"class":354,"line":52},[352,1023,554],{"class":375},[352,1025,379],{"class":357},[352,1027,382],{"class":357},[352,1029,1030],{"class":385},"Article cover",[352,1032,535],{"class":357},[352,1034,1037,1040,1042,1044,1047],{"class":1035,"line":128},[354,1036],"highlight",[352,1038,1039],{"class":375},"    aspect",[352,1041,379],{"class":357},[352,1043,382],{"class":357},[352,1045,1046],{"class":385},"16:9",[352,1048,535],{"class":357},[352,1050,1051],{"class":354,"line":124},[352,1052,582],{"class":357},[352,1054,1055,1057,1059],{"class":354,"line":48},[352,1056,420],{"class":357},[352,1058,362],{"class":361},[352,1060,365],{"class":357},[338,1062,1063],{"label":427},[342,1064,1066],{"className":430,"code":1065,"language":432,"meta":347,"style":347},"\u003C!--[if mso]>\u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" alt=\"Article cover\" style=\"width: 600px; height: 338px;\">\u003Cv:fill type=\"frame\" src=\"https:\u002F\u002Fexample.com\u002Fportrait-image.jpg\" aspect=\"atleast\" \u002F>\u003C\u002Fv:rect>\u003C![endif]-->\n\u003C!--[if !mso]>\u003C!-->\n\u003Cdiv role=\"img\" aria-label=\"Article cover\" class=\"overflow-hidden table max-w-full\" style=\"width: 600px;\">\n  \u003Cdiv class=\"table-cell w-full h-0 bg-no-repeat\" style=\"padding-bottom: 56.25%; background-image: url('https:\u002F\u002Fexample.com\u002Fportrait-image.jpg'); background-size: cover; background-position: center;\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--\u003C![endif]-->\n",[349,1067,1068,1074,1079,1133,1168,1176],{"__ignoreMap":347},[352,1069,1070],{"class":354,"line":18},[352,1071,1073],{"class":1072},"sVsQ9","\u003C!--[if mso]>\u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" alt=\"Article cover\" style=\"width: 600px; height: 338px;\">\u003Cv:fill type=\"frame\" src=\"https:\u002F\u002Fexample.com\u002Fportrait-image.jpg\" aspect=\"atleast\" \u002F>\u003C\u002Fv:rect>\u003C![endif]-->\n",[352,1075,1076],{"class":354,"line":13},[352,1077,1078],{"class":1072},"\u003C!--[if !mso]>\u003C!-->\n",[352,1080,1081,1083,1086,1089,1091,1093,1095,1097,1100,1102,1104,1106,1108,1110,1112,1114,1117,1119,1122,1124,1126,1129,1131],{"class":354,"line":32},[352,1082,358],{"class":357},[352,1084,1085],{"class":361},"div",[352,1087,1088],{"class":375}," role",[352,1090,379],{"class":357},[352,1092,382],{"class":357},[352,1094,324],{"class":385},[352,1096,382],{"class":357},[352,1098,1099],{"class":375}," aria-label",[352,1101,379],{"class":357},[352,1103,382],{"class":357},[352,1105,1030],{"class":385},[352,1107,382],{"class":357},[352,1109,473],{"class":375},[352,1111,379],{"class":357},[352,1113,382],{"class":357},[352,1115,1116],{"class":385},"overflow-hidden table max-w-full",[352,1118,382],{"class":357},[352,1120,1121],{"class":375}," style",[352,1123,379],{"class":357},[352,1125,382],{"class":357},[352,1127,1128],{"class":385},"width: 600px;",[352,1130,382],{"class":357},[352,1132,365],{"class":357},[352,1134,1135,1137,1139,1141,1143,1145,1148,1150,1152,1154,1156,1159,1161,1164,1166],{"class":354,"line":27},[352,1136,370],{"class":357},[352,1138,1085],{"class":361},[352,1140,473],{"class":375},[352,1142,379],{"class":357},[352,1144,382],{"class":357},[352,1146,1147],{"class":385},"table-cell w-full h-0 bg-no-repeat",[352,1149,382],{"class":357},[352,1151,1121],{"class":375},[352,1153,379],{"class":357},[352,1155,382],{"class":357},[352,1157,1158],{"class":385},"padding-bottom: 56.25%; background-image: url('https:\u002F\u002Fexample.com\u002Fportrait-image.jpg'); background-size: cover; background-position: center;",[352,1160,382],{"class":357},[352,1162,1163],{"class":357},">\u003C\u002F",[352,1165,1085],{"class":361},[352,1167,365],{"class":357},[352,1169,1170,1172,1174],{"class":354,"line":52},[352,1171,420],{"class":357},[352,1173,1085],{"class":361},[352,1175,365],{"class":357},[352,1177,1178],{"class":354,"line":128},[352,1179,1180],{"class":1072},"\u003C!--\u003C![endif]-->\n",[326,1182,1183,1185,1186,939,1188,1191,1192,1195,1196,1195,1199,1195,1202,1195,1205,1208,1209,1212],{},[349,1184,961],{}," accepts both ",[349,1187,1046],{},[349,1189,1190],{},"16\u002F9"," notation. Common values: ",[349,1193,1194],{},"'1:1'",", ",[349,1197,1198],{},"'4:3'",[349,1200,1201],{},"'3:2'",[349,1203,1204],{},"'16:9'",[349,1206,1207],{},"'21:9'",". The ",[349,1210,1211],{},"width"," you pass is used for both the modern wrapper and the Outlook VML rectangle (height auto-computed from the ratio).",[1214,1215,1217],"h4",{"id":1216},"using-tailwind-aspect-classes","Using Tailwind aspect classes",[326,1219,1220,1221,1224],{},"You can also reach for Tailwind's ",[349,1222,1223],{},"aspect-*"," utilities instead of the prop. When the component sees one of these in its class list, the ratio is derived from it automatically and the class is stripped from the wrapper:",[342,1226,1228],{"className":344,"code":1227,"language":346,"meta":347,"style":347},"\u003CImg src=\"thumb.jpg\" width=\"600\" class=\"aspect-video\" \u002F>\n\u003CImg src=\"thumb.jpg\" width=\"600\" class=\"aspect-square\" \u002F>\n\u003CImg src=\"thumb.jpg\" width=\"600\" class=\"aspect-[4\u002F3]\" \u002F>\n",[349,1229,1230,1270,1309],{"__ignoreMap":347},[352,1231,1232,1234,1236,1238,1240,1242,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1266,1268],{"class":354,"line":18},[352,1233,358],{"class":357},[352,1235,72],{"class":361},[352,1237,376],{"class":375},[352,1239,379],{"class":357},[352,1241,382],{"class":357},[352,1243,1244],{"class":385},"thumb.jpg",[352,1246,382],{"class":357},[352,1248,403],{"class":375},[352,1250,379],{"class":357},[352,1252,382],{"class":357},[352,1254,410],{"class":385},[352,1256,382],{"class":357},[352,1258,473],{"class":375},[352,1260,379],{"class":357},[352,1262,382],{"class":357},[352,1264,1265],{"class":385},"aspect-video",[352,1267,382],{"class":357},[352,1269,415],{"class":357},[352,1271,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1305,1307],{"class":354,"line":13},[352,1273,358],{"class":357},[352,1275,72],{"class":361},[352,1277,376],{"class":375},[352,1279,379],{"class":357},[352,1281,382],{"class":357},[352,1283,1244],{"class":385},[352,1285,382],{"class":357},[352,1287,403],{"class":375},[352,1289,379],{"class":357},[352,1291,382],{"class":357},[352,1293,410],{"class":385},[352,1295,382],{"class":357},[352,1297,473],{"class":375},[352,1299,379],{"class":357},[352,1301,382],{"class":357},[352,1303,1304],{"class":385},"aspect-square",[352,1306,382],{"class":357},[352,1308,415],{"class":357},[352,1310,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337,1339,1341,1344,1346],{"class":354,"line":32},[352,1312,358],{"class":357},[352,1314,72],{"class":361},[352,1316,376],{"class":375},[352,1318,379],{"class":357},[352,1320,382],{"class":357},[352,1322,1244],{"class":385},[352,1324,382],{"class":357},[352,1326,403],{"class":375},[352,1328,379],{"class":357},[352,1330,382],{"class":357},[352,1332,410],{"class":385},[352,1334,382],{"class":357},[352,1336,473],{"class":375},[352,1338,379],{"class":357},[352,1340,382],{"class":357},[352,1342,1343],{"class":385},"aspect-[4\u002F3]",[352,1345,382],{"class":357},[352,1347,415],{"class":357},[1349,1350,1352],"callout",{"type":1351},"info",[326,1353,1354,1355,1357,1358,1360],{},"If both the ",[349,1356,961],{}," prop and an ",[349,1359,1223],{}," class are present, the prop wins.",[1214,1362,1364],{"id":1363},"size-position-cropped","Background size and position",[326,1366,1367,1368,1371,1372,939,1375,1378],{},"The default sizing of the cropped background image is ",[349,1369,1370],{},"cover",". You may override this through the ",[349,1373,1374],{},"size",[349,1376,1377],{},"position"," props:",[342,1380,1383],{"className":344,"code":1381,"highlights":1382,"language":346,"meta":347,"style":347},"\u003CImg\n  src=\"thumb.jpg\"\n  width=\"600\"\n  aspect=\"16:9\"\n  size=\"contain\"\n  position=\"top\"\n\u002F>\n",[52,128],[349,1384,1385,1391,1404,1417,1430,1445,1460],{"__ignoreMap":347},[352,1386,1387,1389],{"class":354,"line":18},[352,1388,358],{"class":357},[352,1390,520],{"class":361},[352,1392,1393,1396,1398,1400,1402],{"class":354,"line":13},[352,1394,1395],{"class":375},"  src",[352,1397,379],{"class":357},[352,1399,382],{"class":357},[352,1401,1244],{"class":385},[352,1403,535],{"class":357},[352,1405,1406,1409,1411,1413,1415],{"class":354,"line":32},[352,1407,1408],{"class":375},"  width",[352,1410,379],{"class":357},[352,1412,382],{"class":357},[352,1414,410],{"class":385},[352,1416,535],{"class":357},[352,1418,1419,1422,1424,1426,1428],{"class":354,"line":27},[352,1420,1421],{"class":375},"  aspect",[352,1423,379],{"class":357},[352,1425,382],{"class":357},[352,1427,1046],{"class":385},[352,1429,535],{"class":357},[352,1431,1433,1436,1438,1440,1443],{"class":1432,"line":52},[354,1036],[352,1434,1435],{"class":375},"  size",[352,1437,379],{"class":357},[352,1439,382],{"class":357},[352,1441,1442],{"class":385},"contain",[352,1444,535],{"class":357},[352,1446,1448,1451,1453,1455,1458],{"class":1447,"line":128},[354,1036],[352,1449,1450],{"class":375},"  position",[352,1452,379],{"class":357},[352,1454,382],{"class":357},[352,1456,1457],{"class":385},"top",[352,1459,535],{"class":357},[352,1461,1462],{"class":354,"line":124},[352,1463,1465],{"class":1464},"sLaUg","\u002F>\n",[326,1467,1468,1470,1471,1480,1481,1484],{},[349,1469,1374],{}," maps to the VML ",[1472,1473,1478],"a",{"href":1474,"rel":1475,"target":1477},"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fwin32\u002Fvml\u002Fmsdn-online-vml-aspect-attribute",[1476],"nofollow","_blank",[349,1479,961],{}," attribute, which works like ",[349,1482,1483],{},"background-size"," for background images in Outlook.",[1486,1487,1488,1505],"table",{},[1489,1490,1491],"thead",{},[1492,1493,1494,1500],"tr",{},[1495,1496,1497,1499],"th",{},[349,1498,1374],{}," prop",[1495,1501,1502,1503],{},"VML ",[349,1504,961],{},[1506,1507,1508,1520],"tbody",{},[1492,1509,1510,1515],{},[1511,1512,1513],"td",{},[349,1514,1370],{},[1511,1516,1517],{},[349,1518,1519],{},"atleast",[1492,1521,1522,1526],{},[1511,1523,1524],{},[349,1525,1442],{},[1511,1527,1528],{},[349,1529,1530],{},"atmost",[1214,1532,1534],{"id":1533},"dark-motion-cropped","Dark and motion variants in cropped mode",[326,1536,1537,939,1539,1541,1542,939,1545,1548,1549,1551],{},[349,1538,495],{},[349,1540,718],{}," still work in cropped mode, applied via Tailwind's ",[349,1543,1544],{},"dark:",[349,1546,1547],{},"motion-safe:"," arbitrary-value variants instead of ",[349,1550,700],{},":",[342,1553,1555],{"className":344,"code":1554,"language":346,"meta":347,"style":347},"\u003CImg\n  src=\"thumb.jpg\"\n  dark-src=\"thumb-dark.jpg\"\n  alt=\"Featured article\"\n  width=\"600\"\n  aspect=\"16:9\"\n\u002F>\n",[349,1556,1557,1563,1575,1589,1603,1615,1627],{"__ignoreMap":347},[352,1558,1559,1561],{"class":354,"line":18},[352,1560,358],{"class":357},[352,1562,520],{"class":361},[352,1564,1565,1567,1569,1571,1573],{"class":354,"line":13},[352,1566,1395],{"class":375},[352,1568,379],{"class":357},[352,1570,382],{"class":357},[352,1572,1244],{"class":385},[352,1574,535],{"class":357},[352,1576,1577,1580,1582,1584,1587],{"class":354,"line":32},[352,1578,1579],{"class":375},"  dark-src",[352,1581,379],{"class":357},[352,1583,382],{"class":357},[352,1585,1586],{"class":385},"thumb-dark.jpg",[352,1588,535],{"class":357},[352,1590,1591,1594,1596,1598,1601],{"class":354,"line":27},[352,1592,1593],{"class":375},"  alt",[352,1595,379],{"class":357},[352,1597,382],{"class":357},[352,1599,1600],{"class":385},"Featured article",[352,1602,535],{"class":357},[352,1604,1605,1607,1609,1611,1613],{"class":354,"line":52},[352,1606,1408],{"class":375},[352,1608,379],{"class":357},[352,1610,382],{"class":357},[352,1612,410],{"class":385},[352,1614,535],{"class":357},[352,1616,1617,1619,1621,1623,1625],{"class":354,"line":128},[352,1618,1421],{"class":375},[352,1620,379],{"class":357},[352,1622,382],{"class":357},[352,1624,1046],{"class":385},[352,1626,535],{"class":357},[352,1628,1629],{"class":354,"line":124},[352,1630,1465],{"class":1464},[1214,1632,1634],{"id":1633},"accessibility","Accessibility",[326,1636,1637,1638,1641,1642,939,1645,1648,1649,1652],{},"Cropped mode uses a CSS background image instead of an actual ",[349,1639,1640],{},"\u003Cimg>"," element, so the wrapper gets ",[349,1643,1644],{},"role=\"img\"",[349,1646,1647],{},"aria-label"," set from your ",[349,1650,1651],{},"alt"," attribute.",[1214,1654,1656],{"id":1655},"linking-cropped-images","Linking cropped images",[326,1658,1659,1660,1663],{},"Use the ",[349,1661,1662],{},"href"," prop to wrap the rendered image in an anchor.",[335,1665,1666,1753],{},[338,1667,1668],{"label":340},[342,1669,1672],{"className":344,"code":1670,"highlights":1671,"language":346,"meta":347,"style":347},"\u003Ctemplate>\n  \u003CImg\n    src=\"https:\u002F\u002Fexample.com\u002Fbanner.jpg\"\n    alt=\"Sale banner\"\n    width=\"600\"\n    href=\"https:\u002F\u002Fexample.com\u002Fsale\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[128],[349,1673,1674,1682,1688,1701,1714,1726,1741,1745],{"__ignoreMap":347},[352,1675,1676,1678,1680],{"class":354,"line":18},[352,1677,358],{"class":357},[352,1679,362],{"class":361},[352,1681,365],{"class":357},[352,1683,1684,1686],{"class":354,"line":13},[352,1685,370],{"class":357},[352,1687,520],{"class":361},[352,1689,1690,1692,1694,1696,1699],{"class":354,"line":32},[352,1691,525],{"class":375},[352,1693,379],{"class":357},[352,1695,382],{"class":357},[352,1697,1698],{"class":385},"https:\u002F\u002Fexample.com\u002Fbanner.jpg",[352,1700,535],{"class":357},[352,1702,1703,1705,1707,1709,1712],{"class":354,"line":27},[352,1704,554],{"class":375},[352,1706,379],{"class":357},[352,1708,382],{"class":357},[352,1710,1711],{"class":385},"Sale banner",[352,1713,535],{"class":357},[352,1715,1716,1718,1720,1722,1724],{"class":354,"line":52},[352,1717,568],{"class":375},[352,1719,379],{"class":357},[352,1721,382],{"class":357},[352,1723,410],{"class":385},[352,1725,535],{"class":357},[352,1727,1729,1732,1734,1736,1739],{"class":1728,"line":128},[354,1036],[352,1730,1731],{"class":375},"    href",[352,1733,379],{"class":357},[352,1735,382],{"class":357},[352,1737,1738],{"class":385},"https:\u002F\u002Fexample.com\u002Fsale",[352,1740,535],{"class":357},[352,1742,1743],{"class":354,"line":124},[352,1744,582],{"class":357},[352,1746,1747,1749,1751],{"class":354,"line":48},[352,1748,420],{"class":357},[352,1750,362],{"class":361},[352,1752,365],{"class":357},[338,1754,1755],{"label":427},[342,1756,1758],{"className":430,"code":1757,"language":432,"meta":347,"style":347},"\u003Ca href=\"https:\u002F\u002Fexample.com\u002Fsale\">\n  \u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fbanner.jpg\" alt=\"Sale banner\" width=\"600\" class=\"max-w-full align-middle\">\n\u003C\u002Fa>\n",[349,1759,1760,1779,1827],{"__ignoreMap":347},[352,1761,1762,1764,1766,1769,1771,1773,1775,1777],{"class":354,"line":18},[352,1763,358],{"class":357},[352,1765,1472],{"class":361},[352,1767,1768],{"class":375}," href",[352,1770,379],{"class":357},[352,1772,382],{"class":357},[352,1774,1738],{"class":385},[352,1776,382],{"class":357},[352,1778,365],{"class":357},[352,1780,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825],{"class":354,"line":13},[352,1782,370],{"class":357},[352,1784,324],{"class":361},[352,1786,376],{"class":375},[352,1788,379],{"class":357},[352,1790,382],{"class":357},[352,1792,1698],{"class":385},[352,1794,382],{"class":357},[352,1796,391],{"class":375},[352,1798,379],{"class":357},[352,1800,382],{"class":357},[352,1802,1711],{"class":385},[352,1804,382],{"class":357},[352,1806,403],{"class":375},[352,1808,379],{"class":357},[352,1810,382],{"class":357},[352,1812,410],{"class":385},[352,1814,382],{"class":357},[352,1816,473],{"class":375},[352,1818,379],{"class":357},[352,1820,382],{"class":357},[352,1822,480],{"class":385},[352,1824,382],{"class":357},[352,1826,365],{"class":357},[352,1828,1829,1831,1833],{"class":354,"line":32},[352,1830,420],{"class":357},[352,1832,1472],{"class":361},[352,1834,365],{"class":357},[326,1836,1837,1838,1841,1842,1848],{},"In cropped mode, the modern markup is wrapped in an ",[349,1839,1840],{},"\u003Ca>"," tag. The VML rectangle gets an  ",[1472,1843,1846],{"href":1844,"rel":1845,"target":1477},"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fwin32\u002Fvml\u002Fhref-attribute--shape--vml",[1476],[349,1847,1662],{}," attribute so the entire shape is clickable in classic Outlook too:",[335,1850,1851,1946],{},[338,1852,1853],{"label":340},[342,1854,1856],{"className":344,"code":1855,"language":346,"meta":347,"style":347},"\u003Ctemplate>\n  \u003CImg\n    src=\"https:\u002F\u002Fexample.com\u002Fhero.jpg\"\n    width=\"600\"\n    alt=\"Hero\"\n    aspect=\"16:9\"\n    href=\"https:\u002F\u002Fexample.com\u002Flanding\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[349,1857,1858,1866,1872,1884,1896,1909,1921,1934,1938],{"__ignoreMap":347},[352,1859,1860,1862,1864],{"class":354,"line":18},[352,1861,358],{"class":357},[352,1863,362],{"class":361},[352,1865,365],{"class":357},[352,1867,1868,1870],{"class":354,"line":13},[352,1869,370],{"class":357},[352,1871,520],{"class":361},[352,1873,1874,1876,1878,1880,1882],{"class":354,"line":32},[352,1875,525],{"class":375},[352,1877,379],{"class":357},[352,1879,382],{"class":357},[352,1881,386],{"class":385},[352,1883,535],{"class":357},[352,1885,1886,1888,1890,1892,1894],{"class":354,"line":27},[352,1887,568],{"class":375},[352,1889,379],{"class":357},[352,1891,382],{"class":357},[352,1893,410],{"class":385},[352,1895,535],{"class":357},[352,1897,1898,1900,1902,1904,1907],{"class":354,"line":52},[352,1899,554],{"class":375},[352,1901,379],{"class":357},[352,1903,382],{"class":357},[352,1905,1906],{"class":385},"Hero",[352,1908,535],{"class":357},[352,1910,1911,1913,1915,1917,1919],{"class":354,"line":128},[352,1912,1039],{"class":375},[352,1914,379],{"class":357},[352,1916,382],{"class":357},[352,1918,1046],{"class":385},[352,1920,535],{"class":357},[352,1922,1923,1925,1927,1929,1932],{"class":354,"line":124},[352,1924,1731],{"class":375},[352,1926,379],{"class":357},[352,1928,382],{"class":357},[352,1930,1931],{"class":385},"https:\u002F\u002Fexample.com\u002Flanding",[352,1933,535],{"class":357},[352,1935,1936],{"class":354,"line":48},[352,1937,582],{"class":357},[352,1939,1940,1942,1944],{"class":354,"line":23},[352,1941,420],{"class":357},[352,1943,362],{"class":361},[352,1945,365],{"class":357},[338,1947,1948],{"label":427},[342,1949,1951],{"className":430,"code":1950,"language":432,"meta":347,"style":347},"\u003C!--[if mso]>\u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" href=\"https:\u002F\u002Fexample.com\u002Flanding\" alt=\"Hero\" style=\"width: 600px; height: 338px;\">\u003Cv:fill type=\"frame\" src=\"https:\u002F\u002Fexample.com\u002Fhero.jpg\" aspect=\"atleast\" \u002F>\u003C\u002Fv:rect>\u003C![endif]-->\n\u003C!--[if !mso]>\u003C!-->\n\u003Ca href=\"https:\u002F\u002Fexample.com\u002Flanding\" class=\"block no-underline\">\n  \u003Cdiv role=\"img\" aria-label=\"Hero\" class=\"overflow-hidden table max-w-full\" style=\"width: 600px;\">\n    \u003Cdiv class=\"table-cell w-full h-0 bg-no-repeat\" style=\"padding-bottom: 56.25%; background-image: url('https:\u002F\u002Fexample.com\u002Fhero.jpg'); background-size: cover; background-position: center;\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fa>\n\u003C!--\u003C![endif]-->\n",[349,1952,1953,1958,1962,1991,2039,2073,2082,2090],{"__ignoreMap":347},[352,1954,1955],{"class":354,"line":18},[352,1956,1957],{"class":1072},"\u003C!--[if mso]>\u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" href=\"https:\u002F\u002Fexample.com\u002Flanding\" alt=\"Hero\" style=\"width: 600px; height: 338px;\">\u003Cv:fill type=\"frame\" src=\"https:\u002F\u002Fexample.com\u002Fhero.jpg\" aspect=\"atleast\" \u002F>\u003C\u002Fv:rect>\u003C![endif]-->\n",[352,1959,1960],{"class":354,"line":13},[352,1961,1078],{"class":1072},[352,1963,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984,1987,1989],{"class":354,"line":32},[352,1965,358],{"class":357},[352,1967,1472],{"class":361},[352,1969,1768],{"class":375},[352,1971,379],{"class":357},[352,1973,382],{"class":357},[352,1975,1931],{"class":385},[352,1977,382],{"class":357},[352,1979,473],{"class":375},[352,1981,379],{"class":357},[352,1983,382],{"class":357},[352,1985,1986],{"class":385},"block no-underline",[352,1988,382],{"class":357},[352,1990,365],{"class":357},[352,1992,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031,2033,2035,2037],{"class":354,"line":27},[352,1994,370],{"class":357},[352,1996,1085],{"class":361},[352,1998,1088],{"class":375},[352,2000,379],{"class":357},[352,2002,382],{"class":357},[352,2004,324],{"class":385},[352,2006,382],{"class":357},[352,2008,1099],{"class":375},[352,2010,379],{"class":357},[352,2012,382],{"class":357},[352,2014,1906],{"class":385},[352,2016,382],{"class":357},[352,2018,473],{"class":375},[352,2020,379],{"class":357},[352,2022,382],{"class":357},[352,2024,1116],{"class":385},[352,2026,382],{"class":357},[352,2028,1121],{"class":375},[352,2030,379],{"class":357},[352,2032,382],{"class":357},[352,2034,1128],{"class":385},[352,2036,382],{"class":357},[352,2038,365],{"class":357},[352,2040,2041,2044,2046,2048,2050,2052,2054,2056,2058,2060,2062,2065,2067,2069,2071],{"class":354,"line":52},[352,2042,2043],{"class":357},"    \u003C",[352,2045,1085],{"class":361},[352,2047,473],{"class":375},[352,2049,379],{"class":357},[352,2051,382],{"class":357},[352,2053,1147],{"class":385},[352,2055,382],{"class":357},[352,2057,1121],{"class":375},[352,2059,379],{"class":357},[352,2061,382],{"class":357},[352,2063,2064],{"class":385},"padding-bottom: 56.25%; background-image: url('https:\u002F\u002Fexample.com\u002Fhero.jpg'); background-size: cover; background-position: center;",[352,2066,382],{"class":357},[352,2068,1163],{"class":357},[352,2070,1085],{"class":361},[352,2072,365],{"class":357},[352,2074,2075,2078,2080],{"class":354,"line":128},[352,2076,2077],{"class":357},"  \u003C\u002F",[352,2079,1085],{"class":361},[352,2081,365],{"class":357},[352,2083,2084,2086,2088],{"class":354,"line":124},[352,2085,420],{"class":357},[352,2087,1472],{"class":361},[352,2089,365],{"class":357},[352,2091,2092],{"class":354,"line":48},[352,2093,1180],{"class":1072},[330,2095,2097],{"id":2096},"props","Props",[486,2099,932],{"id":932},[326,2101,2102,2103,2106,2109,2110],{},"Type: ",[349,2104,2105],{},"String",[2107,2108],"br",{},"\nDefault: ",[2111,2112,2113],"em",{},"required",[326,2115,2116,2117,2120],{},"The image URL. When ",[349,2118,2119],{},"motionSrc"," is set, this serves as the static fallback.",[486,2122,1651],{"id":1651},[326,2124,2102,2125,2127,2109,2129],{},[349,2126,2105],{},[2107,2128],{},[349,2130,2131],{},"''",[326,2133,2134],{},"Alternative text for the image.",[486,2136,1211],{"id":1211},[326,2138,2102,2139,2142,2109,2144],{},[349,2140,2141],{},"String | Number",[2107,2143],{},[349,2145,2146],{},"undefined",[326,2148,2149,2150,2152],{},"The image width, rendered as a unitless HTML attribute (parsed as an integer). When omitted, the width is auto-derived after render from the nearest sized ancestor, falling back to fluid when none is resolvable. The ",[349,2151,961],{}," crop mode still requires an explicit width.",[486,2154,2156],{"id":2155},"darksrc","darkSrc",[326,2158,2102,2159,2161,2109,2163],{},[349,2160,2105],{},[2107,2162],{},[349,2164,2165],{},"null",[326,2167,2168,2169,2171,2172,2174,2175,2177,2178,2181],{},"Image source for dark mode. When set, the component wraps the ",[349,2170,1640],{}," in a ",[349,2173,700],{}," element and adds a ",[349,2176,704],{}," with ",[349,2179,2180],{},"media=\"(prefers-color-scheme: dark)\"",".",[486,2183,2119],{"id":2184},"motionsrc",[326,2186,2102,2187,2189,2109,2191],{},[349,2188,2105],{},[2107,2190],{},[349,2192,2165],{},[326,2194,2195],{},"Animated image source for users without a reduced motion preference.",[486,2197,961],{"id":961},[326,2199,2102,2200,2202,2109,2204],{},[349,2201,2105],{},[2107,2203],{},[349,2205,2131],{},[326,2207,2208,2209,1195,2211,1195,2214,1195,2216,2218],{},"Aspect ratio for cropped images. Accepts colon or slash notation: ",[349,2210,1204],{},[349,2212,2213],{},"'16\u002F9'",[349,2215,1198],{},[349,2217,1194],{},", etc.",[326,2220,2221,2222,2224,2225,2227,2228,2181],{},"When set (or when a Tailwind ",[349,2223,1223],{}," class is detected on the component), Maizzle switches the rendered structure to a background-image div with a VML ",[349,2226,969],{}," fallback for Outlook. See ",[1472,2229,952],{"href":2230},"#cropped",[326,2232,2233,2234,2236],{},"The prop wins over an ",[349,2235,1223],{}," class if both are provided.",[486,2238,1377],{"id":1377},[326,2240,2102,2241,2243,2109,2245],{},[349,2242,2105],{},[2107,2244],{},[349,2246,2247],{},"'center'",[326,2249,2250,2251,2254],{},"CSS ",[349,2252,2253],{},"background-position"," for the cropped image fill. Only applies in cropped mode.",[326,2256,2257,2258,1195,2261,1195,2264,1195,2267,1195,2270,2272,2273,2276,2277,2280],{},"Accepts the usual values: ",[349,2259,2260],{},"'top'",[349,2262,2263],{},"'bottom'",[349,2265,2266],{},"'left'",[349,2268,2269],{},"'right'",[349,2271,2247],{},", two-value pairs (",[349,2274,2275],{},"'top left'","), or percentages (",[349,2278,2279],{},"'20% 30%'",").",[486,2282,1374],{"id":1374},[326,2284,2102,2285,2287,2109,2289],{},[349,2286,2105],{},[2107,2288],{},[349,2290,2291],{},"'cover'",[326,2293,2250,2294,2254],{},[349,2295,1483],{},[326,2297,2298,2299,1195,2301,1195,2304,2307,2308,2310,2311,2313,2314,1195,2316,2313,2318,2320],{},"Common values: ",[349,2300,2291],{},[349,2302,2303],{},"'contain'",[349,2305,2306],{},"'auto'",". Also maps to Outlook's VML ",[349,2309,961],{},": ",[349,2312,2291],{}," → ",[349,2315,1519],{},[349,2317,2303],{},[349,2319,1530],{},"; other values omit the VML aspect attribute and Outlook uses its default scaling.",[486,2322,1662],{"id":1662},[326,2324,2102,2325,2327,2109,2329],{},[349,2326,2105],{},[2107,2328],{},[349,2330,2131],{},[326,2332,2333,2334,2336,2337,2339,2340,2342,2343,2348],{},"URL to navigate to when the image is clicked. When set, the rendered output is wrapped in an ",[349,2335,1840],{}," tag. In cropped mode the anchor gets ",[349,2338,1986],{}," utilities so the entire padding-hack area is clickable, and the Outlook ",[349,2341,969],{}," receives its own ",[1472,2344,1502,2346],{"href":1844,"rel":2345,"target":1477},[1476],[349,2347,1662],{}," attribute so classic Outlook gets a clickable shape too.",[486,2350,2352],{"id":2351},"outlookfallback","outlookFallback",[326,2354,2102,2355,2358,2360,2361],{},[349,2356,2357],{},"Boolean",[2107,2359],{},"\nDefault: inherits — root default ",[349,2362,2363],{},"true",[326,2365,2366,2367,2370,2371,2374,2375,2377],{},"Toggle the Outlook (classic) VML fallback for cropped images. When ",[349,2368,2369],{},"false",", no ",[349,2372,2373],{},"\u003C!--[if mso]>"," conditional comment or ",[349,2376,969],{}," is emitted and the modern wrapper renders to every client. Outlook will show a blank area where the image should be.",[2379,2380,2381],"style",{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}",{"title":347,"searchDepth":13,"depth":13,"links":2383},[2384,2389],{"id":332,"depth":13,"text":333,"children":2385},[2386,2387,2388],{"id":488,"depth":32,"text":489},{"id":712,"depth":32,"text":713},{"id":951,"depth":32,"text":952},{"id":2096,"depth":13,"text":2097,"children":2390},[2391,2392,2393,2394,2395,2396,2397,2398,2399,2400],{"id":932,"depth":32,"text":932},{"id":1651,"depth":32,"text":1651},{"id":1211,"depth":32,"text":1211},{"id":2155,"depth":32,"text":2156},{"id":2184,"depth":32,"text":2119},{"id":961,"depth":32,"text":961},{"id":1377,"depth":32,"text":1377},{"id":1374,"depth":32,"text":1374},{"id":1662,"depth":32,"text":1662},{"id":2351,"depth":32,"text":2352},"Render a responsive image element with support for dark mode, animated source switching, and fixed-aspect cropping for feed thumbnails.","md",{},{"title":72,"description":2401},"docs\u002Fcomponents\u002Fimg","-_QSEE603VusNjVFM9FfD_UdnRiEnJqO0-EOO_AiL0U",1781015438632]