[{"data":1,"prerenderedAt":540},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Fguide\u002Fhomepage-heroes":32},[4,23],{"title":5,"path":6,"stem":7,"children":8,"page":14},"Guide","\u002Fguide","guide",[9,15,19],{"title":10,"path":11,"stem":12,"order":13,"icon":13,"collapse":14,"navBadges":13},"Getting started","\u002Fguide\u002Fgetting-started","guide\u002Fgetting-started",null,false,{"title":16,"path":17,"stem":18,"order":13,"icon":13,"collapse":14,"navBadges":13},"Homepage hero patterns","\u002Fguide\u002Fhomepage-heroes","guide\u002Fhomepage-heroes",{"title":20,"path":21,"stem":22,"order":13,"icon":13,"collapse":14,"navBadges":13},"Writing content","\u002Fguide\u002Fwriting-content","guide\u002Fwriting-content",{"title":24,"path":25,"stem":26,"children":27,"page":14},"Reference","\u002Freference","reference",[28],{"title":29,"path":30,"stem":31,"order":13,"icon":13,"collapse":14,"navBadges":13},"API reference","\u002Freference\u002Fapi","reference\u002Fapi",{"id":33,"title":16,"aside":34,"body":35,"collapse":14,"description":535,"editLink":34,"extension":536,"icon":13,"issueLink":34,"meta":537,"navBadges":13,"navigation":13,"order":13,"path":17,"prevNext":34,"seo":538,"stem":18,"toc":34,"__hash__":539},"docs\u002Fguide\u002Fhomepage-heroes.md",true,{"type":36,"value":37,"toc":530},"minimark",[38,42,71,78,83,89,197,204,270,274,282,429,436,440,491,526],[39,40,16],"h1",{"id":41},"homepage-hero-patterns",[43,44,45,46,50,51,54,55,58,59,62,63,66,67,70],"p",{},"The starter includes two landing-page hero components. Use ",[47,48,49],"code",{},"DocsHomeHero"," for a split layout with intro copy and a compact preview panel. Use ",[47,52,53],{},"DocsHomeHeroAlt"," for a centered headline and a larger visual preview, such as a product screenshot. Set ",[47,56,57],{},"heroVariant"," to ",[47,60,61],{},"split"," or ",[47,64,65],{},"centered"," in ",[47,68,69],{},"app\u002Fpages\u002Findex.vue"," to choose the homepage variant.",[43,72,73,74,77],{},"Both components render their calls to action with Selaras ",[47,75,76],{},"SButton"," and Nuxt links. Set the labels and routes with props, then replace the preview through its named slot when you have a product-specific visual.",[79,80,82],"h2",{"id":81},"split-hero","Split hero",[43,84,85,86,88],{},"Use ",[47,87,49],{}," when you want the introduction and the preview side by side on wide screens:",[90,91,96],"pre",{"className":92,"code":93,"language":94,"meta":95,"style":95},"language-vue shiki shiki-themes github-light github-dark","\u003CDocsHomeHero\n  eyebrow=\"DEVELOPER DOCUMENTATION\"\n  title=\"Build something useful.\"\n  description=\"Guides and references to help your team get started.\"\n  primary-label=\"Get started\"\n  primary-to=\"\u002Fguide\u002Fgetting-started\"\n  secondary-label=\"Explore the API\"\n  secondary-to=\"\u002Freference\u002Fapi\"\n\u002F>\n","vue","",[47,97,98,111,125,136,147,158,169,180,191],{"__ignoreMap":95},[99,100,103,107],"span",{"class":101,"line":102},"line",1,[99,104,106],{"class":105},"sVt8B","\u003C",[99,108,110],{"class":109},"s9eBZ","DocsHomeHero\n",[99,112,114,118,121],{"class":101,"line":113},2,[99,115,117],{"class":116},"sScJk","  eyebrow",[99,119,120],{"class":105},"=",[99,122,124],{"class":123},"sZZnC","\"DEVELOPER DOCUMENTATION\"\n",[99,126,128,131,133],{"class":101,"line":127},3,[99,129,130],{"class":116},"  title",[99,132,120],{"class":105},[99,134,135],{"class":123},"\"Build something useful.\"\n",[99,137,139,142,144],{"class":101,"line":138},4,[99,140,141],{"class":116},"  description",[99,143,120],{"class":105},[99,145,146],{"class":123},"\"Guides and references to help your team get started.\"\n",[99,148,150,153,155],{"class":101,"line":149},5,[99,151,152],{"class":116},"  primary-label",[99,154,120],{"class":105},[99,156,157],{"class":123},"\"Get started\"\n",[99,159,161,164,166],{"class":101,"line":160},6,[99,162,163],{"class":116},"  primary-to",[99,165,120],{"class":105},[99,167,168],{"class":123},"\"\u002Fguide\u002Fgetting-started\"\n",[99,170,172,175,177],{"class":101,"line":171},7,[99,173,174],{"class":116},"  secondary-label",[99,176,120],{"class":105},[99,178,179],{"class":123},"\"Explore the API\"\n",[99,181,183,186,188],{"class":101,"line":182},8,[99,184,185],{"class":116},"  secondary-to",[99,187,120],{"class":105},[99,189,190],{"class":123},"\"\u002Freference\u002Fapi\"\n",[99,192,194],{"class":101,"line":193},9,[99,195,196],{"class":105},"\u002F>\n",[43,198,199,200,203],{},"The default preview shows a short reading path and the docs folder structure. Replace it with your own content through the ",[47,201,202],{},"preview"," slot:",[90,205,207],{"className":92,"code":206,"language":94,"meta":95,"style":95},"\u003CDocsHomeHero title=\"A clear start for every project.\">\n  \u003Ctemplate #preview>\n    \u003Cimg\n      src=\"\u002Fimages\u002Fproduct-preview.png\"\n      alt=\"Screenshot of the product's getting started guide\"\n      class=\"w-full rounded-xl\"\n    >\n  \u003C\u002Ftemplate>\n\u003C\u002FDocsHomeHero>\n",[47,208,209,226,231,236,241,246,251,256,261],{"__ignoreMap":95},[99,210,211,213,215,218,220,223],{"class":101,"line":102},[99,212,106],{"class":105},[99,214,49],{"class":109},[99,216,217],{"class":116}," title",[99,219,120],{"class":105},[99,221,222],{"class":123},"\"A clear start for every project.\"",[99,224,225],{"class":105},">\n",[99,227,228],{"class":101,"line":113},[99,229,230],{"class":105},"  \u003Ctemplate #preview>\n",[99,232,233],{"class":101,"line":127},[99,234,235],{"class":105},"    \u003Cimg\n",[99,237,238],{"class":101,"line":138},[99,239,240],{"class":105},"      src=\"\u002Fimages\u002Fproduct-preview.png\"\n",[99,242,243],{"class":101,"line":149},[99,244,245],{"class":105},"      alt=\"Screenshot of the product's getting started guide\"\n",[99,247,248],{"class":101,"line":160},[99,249,250],{"class":105},"      class=\"w-full rounded-xl\"\n",[99,252,253],{"class":101,"line":171},[99,254,255],{"class":105},"    >\n",[99,257,258],{"class":101,"line":182},[99,259,260],{"class":105},"  \u003C\u002Ftemplate>\n",[99,262,263,266,268],{"class":101,"line":193},[99,264,265],{"class":105},"\u003C\u002F",[99,267,49],{"class":109},[99,269,225],{"class":105},[79,271,273],{"id":272},"centered-hero-with-a-visual","Centered hero with a visual",[43,275,85,276,278,279,203],{},[47,277,53],{}," for a centered message followed by a larger preview. It includes a docs-page mockup by default, which you can replace with an image, video, or Vue component in the ",[47,280,281],{},"visual",[90,283,285],{"className":92,"code":284,"language":94,"meta":95,"style":95},"\u003CDocsHomeHeroAlt\n  eyebrow=\"PRODUCT DOCUMENTATION\"\n  announcement=\"Version 2 is available\"\n  title=\"Everything you need to move forward.\"\n  description=\"Learn the basics, explore the guides, and find answers in the reference.\"\n  primary-label=\"Read the guide\"\n  primary-to=\"\u002Fguide\u002Fgetting-started\"\n  secondary-label=\"View the API\"\n  secondary-to=\"\u002Freference\u002Fapi\"\n  visual-position=\"bottom\"\n>\n  \u003Ctemplate #visual>\n    \u003Cimg\n      src=\"\u002Fimages\u002Fdocs-preview.png\"\n      alt=\"Preview of the documentation site\"\n      class=\"w-full\"\n    >\n  \u003C\u002Ftemplate>\n\u003C\u002FDocsHomeHeroAlt>\n",[47,286,287,294,303,313,322,331,340,348,357,365,376,381,387,392,398,404,410,415,420],{"__ignoreMap":95},[99,288,289,291],{"class":101,"line":102},[99,290,106],{"class":105},[99,292,293],{"class":109},"DocsHomeHeroAlt\n",[99,295,296,298,300],{"class":101,"line":113},[99,297,117],{"class":116},[99,299,120],{"class":105},[99,301,302],{"class":123},"\"PRODUCT DOCUMENTATION\"\n",[99,304,305,308,310],{"class":101,"line":127},[99,306,307],{"class":116},"  announcement",[99,309,120],{"class":105},[99,311,312],{"class":123},"\"Version 2 is available\"\n",[99,314,315,317,319],{"class":101,"line":138},[99,316,130],{"class":116},[99,318,120],{"class":105},[99,320,321],{"class":123},"\"Everything you need to move forward.\"\n",[99,323,324,326,328],{"class":101,"line":149},[99,325,141],{"class":116},[99,327,120],{"class":105},[99,329,330],{"class":123},"\"Learn the basics, explore the guides, and find answers in the reference.\"\n",[99,332,333,335,337],{"class":101,"line":160},[99,334,152],{"class":116},[99,336,120],{"class":105},[99,338,339],{"class":123},"\"Read the guide\"\n",[99,341,342,344,346],{"class":101,"line":171},[99,343,163],{"class":116},[99,345,120],{"class":105},[99,347,168],{"class":123},[99,349,350,352,354],{"class":101,"line":182},[99,351,174],{"class":116},[99,353,120],{"class":105},[99,355,356],{"class":123},"\"View the API\"\n",[99,358,359,361,363],{"class":101,"line":193},[99,360,185],{"class":116},[99,362,120],{"class":105},[99,364,190],{"class":123},[99,366,368,371,373],{"class":101,"line":367},10,[99,369,370],{"class":116},"  visual-position",[99,372,120],{"class":105},[99,374,375],{"class":123},"\"bottom\"\n",[99,377,379],{"class":101,"line":378},11,[99,380,225],{"class":105},[99,382,384],{"class":101,"line":383},12,[99,385,386],{"class":105},"  \u003Ctemplate #visual>\n",[99,388,390],{"class":101,"line":389},13,[99,391,235],{"class":105},[99,393,395],{"class":101,"line":394},14,[99,396,397],{"class":105},"      src=\"\u002Fimages\u002Fdocs-preview.png\"\n",[99,399,401],{"class":101,"line":400},15,[99,402,403],{"class":105},"      alt=\"Preview of the documentation site\"\n",[99,405,407],{"class":101,"line":406},16,[99,408,409],{"class":105},"      class=\"w-full\"\n",[99,411,413],{"class":101,"line":412},17,[99,414,255],{"class":105},[99,416,418],{"class":101,"line":417},18,[99,419,260],{"class":105},[99,421,423,425,427],{"class":101,"line":422},19,[99,424,265],{"class":105},[99,426,53],{"class":109},[99,428,225],{"class":105},[43,430,431,432,435],{},"Set ",[47,433,434],{},"visual-position=\"top\""," to place the visual before the text. Keep meaningful alternative text on images, and remove the announcement prop when there is no current release or update to highlight.",[79,437,439],{"id":438},"choose-a-variant","Choose a variant",[441,442,443,459],"table",{},[444,445,446],"thead",{},[447,448,449,453,456],"tr",{},[450,451,452],"th",{},"Component",[450,454,455],{},"Layout",[450,457,458],{},"Preview slot",[460,461,462,477],"tbody",{},[447,463,464,469,472],{},[465,466,467],"td",{},[47,468,49],{},[465,470,471],{},"Intro and compact preview side by side",[465,473,474],{},[47,475,476],{},"#preview",[447,478,479,483,486],{},[465,480,481],{},[47,482,53],{},[465,484,485],{},"Centered intro with a wide visual",[465,487,488],{},[47,489,490],{},"#visual",[43,492,493,494,497,498,497,501,497,504,497,507,497,510,513,514,517,518,521,522,525],{},"Both components accept ",[47,495,496],{},"eyebrow",", ",[47,499,500],{},"title",[47,502,503],{},"description",[47,505,506],{},"primaryLabel",[47,508,509],{},"primaryTo",[47,511,512],{},"secondaryLabel",", and ",[47,515,516],{},"secondaryTo",". The alternate hero also accepts ",[47,519,520],{},"announcement"," and ",[47,523,524],{},"visualPosition",".",[527,528,529],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .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":95,"searchDepth":127,"depth":127,"links":531},[532,533,534],{"id":81,"depth":113,"text":82},{"id":272,"depth":113,"text":273},{"id":438,"depth":113,"text":439},"Choose and customize a split or centered landing-page hero.","md",{},{"title":16,"description":535},"1B_bmljgR5JYbrNwCew-7EpdHybIU2QCTkIG6v9bK9A",1792742328212]