[{"data":1,"prerenderedAt":4192},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-page-hero":444,"-docs-theme-components-composables-page-hero-surround":4187},{"gettingStarted":4,"api":71,"theme":162},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,34,40,61,66],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"to":30,"target":31,"external":32,"icon":33},"Storybook","/docs/getting-started/storybook","docs/getting-started/04.storybook","https://storybook.styleframe.dev","_blank",true,"i-simple-icons-storybook",{"title":35,"path":36,"stem":37,"to":38,"target":31,"external":32,"icon":39},"Playground","/docs/getting-started/playground","docs/getting-started/05.playground","https://play.styleframe.dev","i-simple-icons-playwright",{"title":41,"icon":42,"path":43,"stem":44,"children":45,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/06.tooling",[46,51,56],{"title":47,"path":48,"stem":49,"icon":50},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/06.tooling/01.cli","i-lucide-square-terminal",{"title":52,"path":53,"stem":54,"icon":55},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/06.tooling/02.scanner","i-lucide-view",{"title":57,"path":58,"stem":59,"icon":60},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/06.tooling/03.figma-plugin","i-simple-icons-figma",{"title":62,"path":63,"stem":64,"icon":65},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/07.comparisons","i-lucide-file-diff",{"title":67,"path":68,"stem":69,"icon":70},"Licensing","/docs/getting-started/licensing","docs/getting-started/08.licensing","i-lucide-scale",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","/docs/api","docs/api/00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":141,"path":142,"stem":143},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs/api/14.imports",[163,236,326,399],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[168,169,174],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":146,"icon":149,"defaultOpen":7,"path":175,"stem":176,"children":177,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[178,182,186,190,194,198,202,206,220,224,228,232],{"title":179,"path":180,"stem":181,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":183,"path":184,"stem":185,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":187,"path":188,"stem":189,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":191,"path":192,"stem":193,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":195,"path":196,"stem":197,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":199,"path":200,"stem":201,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":203,"path":204,"stem":205,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":207,"path":208,"stem":209,"children":210,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[211,212,216],{"title":78,"path":208,"stem":209},{"title":213,"path":214,"stem":215},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":217,"path":218,"stem":219},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":221,"path":222,"stem":223,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":225,"path":226,"stem":227,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":229,"path":230,"stem":231,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":233,"path":234,"stem":235,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":237,"path":238,"stem":239,"children":240,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[241,242],{"title":78,"path":238,"stem":239,"icon":79},{"title":146,"icon":149,"defaultOpen":32,"path":243,"stem":244,"children":245,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322],{"title":247,"path":248,"stem":249},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":251,"path":252,"stem":253},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":255,"path":256,"stem":257},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":259,"path":260,"stem":261},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":263,"path":264,"stem":265},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":267,"path":268,"stem":269},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":271,"path":272,"stem":273},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":275,"path":276,"stem":277},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":279,"path":280,"stem":281},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":283,"path":284,"stem":285},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":287,"path":288,"stem":289},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":291,"path":292,"stem":293},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":295,"path":296,"stem":297},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":299,"path":300,"stem":301},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":303,"path":304,"stem":305},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":307,"path":308,"stem":309},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":311,"path":312,"stem":313},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":315,"path":316,"stem":317},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":319,"path":320,"stem":321},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":323,"path":324,"stem":325},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":116,"path":327,"stem":328,"children":329,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[330,331,334],{"title":78,"path":327,"stem":328,"icon":79},{"title":170,"path":332,"stem":333,"icon":173},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":335,"stem":336,"children":337,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[338,342,346,350,353,357,361,365,369,373,377,380,384,388,392,396],{"title":339,"path":340,"stem":341,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":343,"path":344,"stem":345,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":347,"path":348,"stem":349,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":183,"path":351,"stem":352,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":354,"path":355,"stem":356,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":358,"path":359,"stem":360,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":362,"path":363,"stem":364,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":366,"path":367,"stem":368,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":370,"path":371,"stem":372,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":374,"path":375,"stem":376,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":225,"path":378,"stem":379,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":381,"path":382,"stem":383,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":385,"path":386,"stem":387,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":389,"path":390,"stem":391,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":393,"path":394,"stem":395,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":229,"path":397,"stem":398,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":400,"path":401,"stem":402,"children":403,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[404,405,408],{"title":78,"path":401,"stem":402,"icon":79},{"title":170,"path":406,"stem":407,"icon":173},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":409,"stem":410,"children":411,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[412,416,420,424,428,432,436,440],{"title":413,"path":414,"stem":415,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":417,"path":418,"stem":419,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":421,"path":422,"stem":423,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":425,"path":426,"stem":427,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":429,"path":430,"stem":431,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":433,"path":434,"stem":435,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":437,"path":438,"stem":439,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":441,"path":442,"stem":443,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":445,"title":319,"body":446,"description":4181,"extension":1406,"links":4182,"meta":4183,"navigation":32,"path":320,"seo":4184,"sitemap":4185,"stem":321,"__hash__":4186},"docs_theme/docs/theme/components/02.composables/15.page-hero.md",{"type":447,"value":448,"toc":4141},"minimark",[449,453,502,509,513,516,560,564,1947,1950,1969,1974,1977,1982,2045,2055,2059,2088,2092,2095,2098,2102,2105,2108,2112,2115,2118,2122,2125,2128,2132,2144,2148,2152,2280,2290,2294,2297,2454,2688,2701,2717,2720,2726,2729,2732,2735,2739,2754,2757,2761,2774,2777,2780,2843,2847,2851,2854,3144,3148,3155,3316,3321,3324,3330,3339,3344,3465,3470,3555,3561,3564,3568,3616,3622,3628,3632,3664,3670,3676,3680,3712,3718,3721,3725,3773,3779,3785,3789,3837,3843,3850,3854,3886,3892,3902,3906,3938,3943,3947,4022,4026,4137],[450,451,78],"h2",{"id":452},"overview",[454,455,456,457,460,461,465,466,469,470,473,474,477,478,481,482,477,485,488,489,492,493,496,497,501],"p",{},"The ",[458,459,319],"strong",{}," is a multi-part landing-section primitive used for the introduction at the top of a marketing or product page. It is composed of eight recipe parts: ",[462,463,464],"code",{},"usePageHeroRecipe()"," for the ",[462,467,468],{},"\u003Csection>"," container, ",[462,471,472],{},"usePageHeroHeadlineRecipe()"," for the wrapper around eyebrow/title/description, ",[462,475,476],{},"usePageHeroTitleRecipe()"," and ",[462,479,480],{},"usePageHeroDescriptionRecipe()"," for the typography, ",[462,483,484],{},"usePageHeroActionsRecipe()",[462,486,487],{},"usePageHeroLinksRecipe()"," for the call-to-action groups, ",[462,490,491],{},"usePageHeroImageRecipe()"," for the media slot, and ",[462,494,495],{},"usePageHeroBackdropRecipe()"," for the decorative overlay. Each composable creates a fully configured ",[498,499,500],"a",{"href":132},"recipe"," with its own variant axes — the container exposes color, size, orientation, and alignment, while sub-parts inherit a focused subset.",[454,503,504,505,508],{},"The PageHero recipes integrate directly with the default ",[498,506,507],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[450,510,512],{"id":511},"why-use-the-pagehero-recipe","Why use the PageHero recipe?",[454,514,515],{},"The PageHero recipe helps you:",[517,518,519,526,532,542,548,554],"ul",{},[520,521,522,525],"li",{},[458,523,524],{},"Ship faster with sensible defaults",": Get 3 colors, 3 sizes, 2 orientations, and 2 alignments out of the box with a single set of composable calls.",[520,527,528,531],{},[458,529,530],{},"Compose layout from real parts",": Eight coordinated recipes (container + 7 sub-parts) share the same axes, so your hero stays internally consistent across orientation and alignment changes.",[520,533,534,537,538,541],{},[458,535,536],{},"Maintain consistency",": Compound variants resolve color and orientation-alignment combinations automatically, including dark mode for the ",[462,539,540],{},"neutral"," color.",[520,543,544,547],{},[458,545,546],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[520,549,550,553],{},[458,551,552],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, size, orientation, or alignment values at compile time.",[520,555,556,559],{},[458,557,558],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[450,561,563],{"id":562},"usage","Usage",[565,566,568,573,580,1014,1018,1021,1938,1942],"steps",{"level":567},"4",[569,570,572],"h4",{"id":571},"register-the-recipes","Register the recipes",[454,574,575,576,579],{},"Add the PageHero recipes to a local Styleframe instance. The global ",[462,577,578],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[581,582,584,907],"code-tree",{"default-value":583},"src/components/page-hero.styleframe.ts",[585,586,591],"pre",{"className":587,"code":588,"filename":583,"language":589,"meta":590,"style":590},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    usePageHeroRecipe,\n    usePageHeroHeadlineRecipe,\n    usePageHeroTitleRecipe,\n    usePageHeroDescriptionRecipe,\n    usePageHeroActionsRecipe,\n    usePageHeroLinksRecipe,\n    usePageHeroImageRecipe,\n    usePageHeroBackdropRecipe,\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst pageHero = usePageHeroRecipe(s);\nconst pageHeroHeadline = usePageHeroHeadlineRecipe(s);\nconst pageHeroTitle = usePageHeroTitleRecipe(s);\nconst pageHeroDescription = usePageHeroDescriptionRecipe(s);\nconst pageHeroActions = usePageHeroActionsRecipe(s);\nconst pageHeroLinks = usePageHeroLinksRecipe(s);\nconst pageHeroImage = usePageHeroImageRecipe(s);\nconst pageHeroBackdrop = usePageHeroBackdropRecipe(s);\n\nexport default s;\n","ts","",[462,592,593,629,637,646,654,662,670,678,686,694,702,719,725,746,751,769,786,803,820,837,854,871,888,893],{"__ignoreMap":590},[594,595,598,602,606,610,613,616,619,623,626],"span",{"class":596,"line":597},"line",1,[594,599,601],{"class":600},"s7zQu","import",[594,603,605],{"class":604},"sMK4o"," {",[594,607,609],{"class":608},"sTEyZ"," styleframe",[594,611,612],{"class":604}," }",[594,614,615],{"class":600}," from",[594,617,618],{"class":604}," '",[594,620,622],{"class":621},"sfazB","virtual:styleframe",[594,624,625],{"class":604},"'",[594,627,628],{"class":604},";\n",[594,630,632,634],{"class":596,"line":631},2,[594,633,601],{"class":600},[594,635,636],{"class":604}," {\n",[594,638,640,643],{"class":596,"line":639},3,[594,641,642],{"class":608},"    usePageHeroRecipe",[594,644,645],{"class":604},",\n",[594,647,649,652],{"class":596,"line":648},4,[594,650,651],{"class":608},"    usePageHeroHeadlineRecipe",[594,653,645],{"class":604},[594,655,657,660],{"class":596,"line":656},5,[594,658,659],{"class":608},"    usePageHeroTitleRecipe",[594,661,645],{"class":604},[594,663,665,668],{"class":596,"line":664},6,[594,666,667],{"class":608},"    usePageHeroDescriptionRecipe",[594,669,645],{"class":604},[594,671,673,676],{"class":596,"line":672},7,[594,674,675],{"class":608},"    usePageHeroActionsRecipe",[594,677,645],{"class":604},[594,679,681,684],{"class":596,"line":680},8,[594,682,683],{"class":608},"    usePageHeroLinksRecipe",[594,685,645],{"class":604},[594,687,689,692],{"class":596,"line":688},9,[594,690,691],{"class":608},"    usePageHeroImageRecipe",[594,693,645],{"class":604},[594,695,697,700],{"class":596,"line":696},10,[594,698,699],{"class":608},"    usePageHeroBackdropRecipe",[594,701,645],{"class":604},[594,703,705,708,710,712,715,717],{"class":596,"line":704},11,[594,706,707],{"class":604},"}",[594,709,615],{"class":600},[594,711,618],{"class":604},[594,713,714],{"class":621},"@styleframe/theme",[594,716,625],{"class":604},[594,718,628],{"class":604},[594,720,722],{"class":596,"line":721},12,[594,723,724],{"emptyLinePlaceholder":32},"\n",[594,726,728,732,735,738,741,744],{"class":596,"line":727},13,[594,729,731],{"class":730},"spNyl","const",[594,733,734],{"class":608}," s ",[594,736,737],{"class":604},"=",[594,739,609],{"class":740},"s2Zo4",[594,742,743],{"class":608},"()",[594,745,628],{"class":604},[594,747,749],{"class":596,"line":748},14,[594,750,724],{"emptyLinePlaceholder":32},[594,752,754,756,759,761,764,767],{"class":596,"line":753},15,[594,755,731],{"class":730},[594,757,758],{"class":608}," pageHero ",[594,760,737],{"class":604},[594,762,763],{"class":740}," usePageHeroRecipe",[594,765,766],{"class":608},"(s)",[594,768,628],{"class":604},[594,770,772,774,777,779,782,784],{"class":596,"line":771},16,[594,773,731],{"class":730},[594,775,776],{"class":608}," pageHeroHeadline ",[594,778,737],{"class":604},[594,780,781],{"class":740}," usePageHeroHeadlineRecipe",[594,783,766],{"class":608},[594,785,628],{"class":604},[594,787,789,791,794,796,799,801],{"class":596,"line":788},17,[594,790,731],{"class":730},[594,792,793],{"class":608}," pageHeroTitle ",[594,795,737],{"class":604},[594,797,798],{"class":740}," usePageHeroTitleRecipe",[594,800,766],{"class":608},[594,802,628],{"class":604},[594,804,806,808,811,813,816,818],{"class":596,"line":805},18,[594,807,731],{"class":730},[594,809,810],{"class":608}," pageHeroDescription ",[594,812,737],{"class":604},[594,814,815],{"class":740}," usePageHeroDescriptionRecipe",[594,817,766],{"class":608},[594,819,628],{"class":604},[594,821,823,825,828,830,833,835],{"class":596,"line":822},19,[594,824,731],{"class":730},[594,826,827],{"class":608}," pageHeroActions ",[594,829,737],{"class":604},[594,831,832],{"class":740}," usePageHeroActionsRecipe",[594,834,766],{"class":608},[594,836,628],{"class":604},[594,838,840,842,845,847,850,852],{"class":596,"line":839},20,[594,841,731],{"class":730},[594,843,844],{"class":608}," pageHeroLinks ",[594,846,737],{"class":604},[594,848,849],{"class":740}," usePageHeroLinksRecipe",[594,851,766],{"class":608},[594,853,628],{"class":604},[594,855,857,859,862,864,867,869],{"class":596,"line":856},21,[594,858,731],{"class":730},[594,860,861],{"class":608}," pageHeroImage ",[594,863,737],{"class":604},[594,865,866],{"class":740}," usePageHeroImageRecipe",[594,868,766],{"class":608},[594,870,628],{"class":604},[594,872,874,876,879,881,884,886],{"class":596,"line":873},22,[594,875,731],{"class":730},[594,877,878],{"class":608}," pageHeroBackdrop ",[594,880,737],{"class":604},[594,882,883],{"class":740}," usePageHeroBackdropRecipe",[594,885,766],{"class":608},[594,887,628],{"class":604},[594,889,891],{"class":596,"line":890},23,[594,892,724],{"emptyLinePlaceholder":32},[594,894,896,899,902,905],{"class":596,"line":895},24,[594,897,898],{"class":600},"export",[594,900,901],{"class":600}," default",[594,903,904],{"class":608}," s",[594,906,628],{"class":604},[585,908,910],{"className":587,"code":909,"filename":578,"language":589,"meta":590,"style":590},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[462,911,912,933,960,964,978,982,991,1000,1004],{"__ignoreMap":590},[594,913,914,916,918,920,922,924,926,929,931],{"class":596,"line":597},[594,915,601],{"class":600},[594,917,605],{"class":604},[594,919,609],{"class":608},[594,921,612],{"class":604},[594,923,615],{"class":600},[594,925,618],{"class":604},[594,927,928],{"class":621},"styleframe",[594,930,625],{"class":604},[594,932,628],{"class":604},[594,934,935,937,939,942,945,948,950,952,954,956,958],{"class":596,"line":631},[594,936,601],{"class":600},[594,938,605],{"class":604},[594,940,941],{"class":608}," useDesignTokensPreset",[594,943,944],{"class":604},",",[594,946,947],{"class":608}," useUtilitiesPreset",[594,949,612],{"class":604},[594,951,615],{"class":600},[594,953,618],{"class":604},[594,955,714],{"class":621},[594,957,625],{"class":604},[594,959,628],{"class":604},[594,961,962],{"class":596,"line":639},[594,963,724],{"emptyLinePlaceholder":32},[594,965,966,968,970,972,974,976],{"class":596,"line":648},[594,967,731],{"class":730},[594,969,734],{"class":608},[594,971,737],{"class":604},[594,973,609],{"class":740},[594,975,743],{"class":608},[594,977,628],{"class":604},[594,979,980],{"class":596,"line":656},[594,981,724],{"emptyLinePlaceholder":32},[594,983,984,987,989],{"class":596,"line":664},[594,985,986],{"class":740},"useDesignTokensPreset",[594,988,766],{"class":608},[594,990,628],{"class":604},[594,992,993,996,998],{"class":596,"line":672},[594,994,995],{"class":740},"useUtilitiesPreset",[594,997,766],{"class":608},[594,999,628],{"class":604},[594,1001,1002],{"class":596,"line":680},[594,1003,724],{"emptyLinePlaceholder":32},[594,1005,1006,1008,1010,1012],{"class":596,"line":688},[594,1007,898],{"class":600},[594,1009,901],{"class":600},[594,1011,904],{"class":608},[594,1013,628],{"class":604},[569,1015,1017],{"id":1016},"build-the-component","Build the component",[454,1019,1020],{},"Import the runtime functions from the virtual module and pass variant props to compute class names. Render the backdrop as the first child so DOM order keeps content above the absolute-positioned overlay:",[1022,1023,1024,1268],"tabs",{},[1025,1026,1029],"tabs-item",{"icon":1027,"label":1028},"i-devicon-react","React",[585,1030,1035],{"className":1031,"code":1032,"filename":1033,"language":1034,"meta":590,"style":590},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n    pageHero,\n    pageHeroBackdrop,\n    pageHeroHeadline,\n    pageHeroTitle,\n    pageHeroDescription,\n    pageHeroActions,\n} from \"virtual:styleframe\";\n\ninterface PageHeroProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    orientation?: \"vertical\" | \"horizontal\";\n    alignment?: \"start\" | \"center\";\n    title: string;\n    description?: string;\n    children?: React.ReactNode;\n}\n\nexport function PageHero({\n    color = \"neutral\",\n    size = \"md\",\n    orientation = \"vertical\",\n    alignment = \"center\",\n    title,\n    description,\n    children,\n}: PageHeroProps) {\n    return (\n        \u003Csection className={pageHero({ color, size, orientation, alignment })}>\n            \u003Cdiv className={pageHeroBackdrop({ variant: \"gradient\" })} aria-hidden />\n            \u003Cdiv className={pageHeroHeadline({ size, alignment })}>\n                \u003Ch1 className={pageHeroTitle({ size })}>{title}\u003C/h1>\n                {description && (\n                    \u003Cp className={pageHeroDescription({ size })}>{description}\u003C/p>\n                )}\n            \u003C/div>\n            {children && (\n                \u003Cdiv className={pageHeroActions({ size, alignment })}>{children}\u003C/div>\n            )}\n        \u003C/section>\n    );\n}\n","src/components/PageHero.tsx","tsx",[462,1036,1037,1042,1047,1052,1057,1062,1067,1072,1077,1081,1086,1091,1096,1101,1106,1111,1116,1121,1126,1130,1135,1140,1145,1150,1155,1161,1167,1173,1179,1185,1191,1197,1203,1209,1215,1221,1227,1233,1239,1245,1251,1257,1263],{"__ignoreMap":590},[594,1038,1039],{"class":596,"line":597},[594,1040,1041],{},"import {\n",[594,1043,1044],{"class":596,"line":631},[594,1045,1046],{},"    pageHero,\n",[594,1048,1049],{"class":596,"line":639},[594,1050,1051],{},"    pageHeroBackdrop,\n",[594,1053,1054],{"class":596,"line":648},[594,1055,1056],{},"    pageHeroHeadline,\n",[594,1058,1059],{"class":596,"line":656},[594,1060,1061],{},"    pageHeroTitle,\n",[594,1063,1064],{"class":596,"line":664},[594,1065,1066],{},"    pageHeroDescription,\n",[594,1068,1069],{"class":596,"line":672},[594,1070,1071],{},"    pageHeroActions,\n",[594,1073,1074],{"class":596,"line":680},[594,1075,1076],{},"} from \"virtual:styleframe\";\n",[594,1078,1079],{"class":596,"line":688},[594,1080,724],{"emptyLinePlaceholder":32},[594,1082,1083],{"class":596,"line":696},[594,1084,1085],{},"interface PageHeroProps {\n",[594,1087,1088],{"class":596,"line":704},[594,1089,1090],{},"    color?: \"light\" | \"dark\" | \"neutral\";\n",[594,1092,1093],{"class":596,"line":721},[594,1094,1095],{},"    size?: \"sm\" | \"md\" | \"lg\";\n",[594,1097,1098],{"class":596,"line":727},[594,1099,1100],{},"    orientation?: \"vertical\" | \"horizontal\";\n",[594,1102,1103],{"class":596,"line":748},[594,1104,1105],{},"    alignment?: \"start\" | \"center\";\n",[594,1107,1108],{"class":596,"line":753},[594,1109,1110],{},"    title: string;\n",[594,1112,1113],{"class":596,"line":771},[594,1114,1115],{},"    description?: string;\n",[594,1117,1118],{"class":596,"line":788},[594,1119,1120],{},"    children?: React.ReactNode;\n",[594,1122,1123],{"class":596,"line":805},[594,1124,1125],{},"}\n",[594,1127,1128],{"class":596,"line":822},[594,1129,724],{"emptyLinePlaceholder":32},[594,1131,1132],{"class":596,"line":839},[594,1133,1134],{},"export function PageHero({\n",[594,1136,1137],{"class":596,"line":856},[594,1138,1139],{},"    color = \"neutral\",\n",[594,1141,1142],{"class":596,"line":873},[594,1143,1144],{},"    size = \"md\",\n",[594,1146,1147],{"class":596,"line":890},[594,1148,1149],{},"    orientation = \"vertical\",\n",[594,1151,1152],{"class":596,"line":895},[594,1153,1154],{},"    alignment = \"center\",\n",[594,1156,1158],{"class":596,"line":1157},25,[594,1159,1160],{},"    title,\n",[594,1162,1164],{"class":596,"line":1163},26,[594,1165,1166],{},"    description,\n",[594,1168,1170],{"class":596,"line":1169},27,[594,1171,1172],{},"    children,\n",[594,1174,1176],{"class":596,"line":1175},28,[594,1177,1178],{},"}: PageHeroProps) {\n",[594,1180,1182],{"class":596,"line":1181},29,[594,1183,1184],{},"    return (\n",[594,1186,1188],{"class":596,"line":1187},30,[594,1189,1190],{},"        \u003Csection className={pageHero({ color, size, orientation, alignment })}>\n",[594,1192,1194],{"class":596,"line":1193},31,[594,1195,1196],{},"            \u003Cdiv className={pageHeroBackdrop({ variant: \"gradient\" })} aria-hidden />\n",[594,1198,1200],{"class":596,"line":1199},32,[594,1201,1202],{},"            \u003Cdiv className={pageHeroHeadline({ size, alignment })}>\n",[594,1204,1206],{"class":596,"line":1205},33,[594,1207,1208],{},"                \u003Ch1 className={pageHeroTitle({ size })}>{title}\u003C/h1>\n",[594,1210,1212],{"class":596,"line":1211},34,[594,1213,1214],{},"                {description && (\n",[594,1216,1218],{"class":596,"line":1217},35,[594,1219,1220],{},"                    \u003Cp className={pageHeroDescription({ size })}>{description}\u003C/p>\n",[594,1222,1224],{"class":596,"line":1223},36,[594,1225,1226],{},"                )}\n",[594,1228,1230],{"class":596,"line":1229},37,[594,1231,1232],{},"            \u003C/div>\n",[594,1234,1236],{"class":596,"line":1235},38,[594,1237,1238],{},"            {children && (\n",[594,1240,1242],{"class":596,"line":1241},39,[594,1243,1244],{},"                \u003Cdiv className={pageHeroActions({ size, alignment })}>{children}\u003C/div>\n",[594,1246,1248],{"class":596,"line":1247},40,[594,1249,1250],{},"            )}\n",[594,1252,1254],{"class":596,"line":1253},41,[594,1255,1256],{},"        \u003C/section>\n",[594,1258,1260],{"class":596,"line":1259},42,[594,1261,1262],{},"    );\n",[594,1264,1266],{"class":596,"line":1265},43,[594,1267,1125],{},[1025,1269,1272],{"icon":1270,"label":1271},"i-devicon-vuejs","Vue",[585,1273,1278],{"className":1274,"code":1275,"filename":1276,"language":1277,"meta":590,"style":590},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport {\n    pageHero,\n    pageHeroBackdrop,\n    pageHeroHeadline,\n    pageHeroTitle,\n    pageHeroDescription,\n    pageHeroActions,\n} from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    size = \"md\",\n    orientation = \"vertical\",\n    alignment = \"center\",\n    title,\n    description,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    orientation?: \"vertical\" | \"horizontal\";\n    alignment?: \"start\" | \"center\";\n    title: string;\n    description?: string;\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Csection :class=\"pageHero({ color, size, orientation, alignment })\">\n        \u003Cdiv :class=\"pageHeroBackdrop({ variant: 'gradient' })\" aria-hidden />\n        \u003Cdiv :class=\"pageHeroHeadline({ size, alignment })\">\n            \u003Ch1 :class=\"pageHeroTitle({ size })\">{{ title }}\u003C/h1>\n            \u003Cp v-if=\"description\" :class=\"pageHeroDescription({ size })\">\n                {{ description }}\n            \u003C/p>\n        \u003C/div>\n        \u003Cdiv :class=\"pageHeroActions({ size, alignment })\">\n            \u003Cslot />\n        \u003C/div>\n    \u003C/section>\n\u003C/template>\n","src/components/PageHero.vue","vue",[462,1279,1280,1307,1313,1320,1327,1334,1341,1348,1355,1370,1374,1380,1395,1411,1427,1443,1450,1457,1470,1505,1538,1562,1586,1599,1609,1618,1627,1631,1640,1690,1734,1765,1805,1844,1855,1864,1873,1904,1913,1921,1930],{"__ignoreMap":590},[594,1281,1282,1285,1289,1292,1295,1297,1300,1302,1304],{"class":596,"line":597},[594,1283,1284],{"class":604},"\u003C",[594,1286,1288],{"class":1287},"swJcz","script",[594,1290,1291],{"class":730}," setup",[594,1293,1294],{"class":730}," lang",[594,1296,737],{"class":604},[594,1298,1299],{"class":604},"\"",[594,1301,589],{"class":621},[594,1303,1299],{"class":604},[594,1305,1306],{"class":604},">\n",[594,1308,1309,1311],{"class":596,"line":631},[594,1310,601],{"class":600},[594,1312,636],{"class":604},[594,1314,1315,1318],{"class":596,"line":639},[594,1316,1317],{"class":608},"    pageHero",[594,1319,645],{"class":604},[594,1321,1322,1325],{"class":596,"line":648},[594,1323,1324],{"class":608},"    pageHeroBackdrop",[594,1326,645],{"class":604},[594,1328,1329,1332],{"class":596,"line":656},[594,1330,1331],{"class":608},"    pageHeroHeadline",[594,1333,645],{"class":604},[594,1335,1336,1339],{"class":596,"line":664},[594,1337,1338],{"class":608},"    pageHeroTitle",[594,1340,645],{"class":604},[594,1342,1343,1346],{"class":596,"line":672},[594,1344,1345],{"class":608},"    pageHeroDescription",[594,1347,645],{"class":604},[594,1349,1350,1353],{"class":596,"line":680},[594,1351,1352],{"class":608},"    pageHeroActions",[594,1354,645],{"class":604},[594,1356,1357,1359,1361,1364,1366,1368],{"class":596,"line":688},[594,1358,707],{"class":604},[594,1360,615],{"class":600},[594,1362,1363],{"class":604}," \"",[594,1365,622],{"class":621},[594,1367,1299],{"class":604},[594,1369,628],{"class":604},[594,1371,1372],{"class":596,"line":696},[594,1373,724],{"emptyLinePlaceholder":32},[594,1375,1376,1378],{"class":596,"line":704},[594,1377,731],{"class":730},[594,1379,636],{"class":604},[594,1381,1382,1385,1387,1389,1391,1393],{"class":596,"line":721},[594,1383,1384],{"class":608},"    color ",[594,1386,737],{"class":604},[594,1388,1363],{"class":604},[594,1390,540],{"class":621},[594,1392,1299],{"class":604},[594,1394,645],{"class":604},[594,1396,1397,1400,1402,1404,1407,1409],{"class":596,"line":727},[594,1398,1399],{"class":608},"    size ",[594,1401,737],{"class":604},[594,1403,1363],{"class":604},[594,1405,1406],{"class":621},"md",[594,1408,1299],{"class":604},[594,1410,645],{"class":604},[594,1412,1413,1416,1418,1420,1423,1425],{"class":596,"line":748},[594,1414,1415],{"class":608},"    orientation ",[594,1417,737],{"class":604},[594,1419,1363],{"class":604},[594,1421,1422],{"class":621},"vertical",[594,1424,1299],{"class":604},[594,1426,645],{"class":604},[594,1428,1429,1432,1434,1436,1439,1441],{"class":596,"line":753},[594,1430,1431],{"class":608},"    alignment ",[594,1433,737],{"class":604},[594,1435,1363],{"class":604},[594,1437,1438],{"class":621},"center",[594,1440,1299],{"class":604},[594,1442,645],{"class":604},[594,1444,1445,1448],{"class":596,"line":771},[594,1446,1447],{"class":608},"    title",[594,1449,645],{"class":604},[594,1451,1452,1455],{"class":596,"line":788},[594,1453,1454],{"class":608},"    description",[594,1456,645],{"class":604},[594,1458,1459,1461,1464,1467],{"class":596,"line":805},[594,1460,707],{"class":604},[594,1462,1463],{"class":604}," =",[594,1465,1466],{"class":740}," defineProps",[594,1468,1469],{"class":604},"\u003C{\n",[594,1471,1472,1475,1478,1480,1483,1485,1488,1490,1493,1495,1497,1499,1501,1503],{"class":596,"line":822},[594,1473,1474],{"class":1287},"    color",[594,1476,1477],{"class":604},"?:",[594,1479,1363],{"class":604},[594,1481,1482],{"class":621},"light",[594,1484,1299],{"class":604},[594,1486,1487],{"class":604}," |",[594,1489,1363],{"class":604},[594,1491,1492],{"class":621},"dark",[594,1494,1299],{"class":604},[594,1496,1487],{"class":604},[594,1498,1363],{"class":604},[594,1500,540],{"class":621},[594,1502,1299],{"class":604},[594,1504,628],{"class":604},[594,1506,1507,1510,1512,1514,1517,1519,1521,1523,1525,1527,1529,1531,1534,1536],{"class":596,"line":839},[594,1508,1509],{"class":1287},"    size",[594,1511,1477],{"class":604},[594,1513,1363],{"class":604},[594,1515,1516],{"class":621},"sm",[594,1518,1299],{"class":604},[594,1520,1487],{"class":604},[594,1522,1363],{"class":604},[594,1524,1406],{"class":621},[594,1526,1299],{"class":604},[594,1528,1487],{"class":604},[594,1530,1363],{"class":604},[594,1532,1533],{"class":621},"lg",[594,1535,1299],{"class":604},[594,1537,628],{"class":604},[594,1539,1540,1543,1545,1547,1549,1551,1553,1555,1558,1560],{"class":596,"line":856},[594,1541,1542],{"class":1287},"    orientation",[594,1544,1477],{"class":604},[594,1546,1363],{"class":604},[594,1548,1422],{"class":621},[594,1550,1299],{"class":604},[594,1552,1487],{"class":604},[594,1554,1363],{"class":604},[594,1556,1557],{"class":621},"horizontal",[594,1559,1299],{"class":604},[594,1561,628],{"class":604},[594,1563,1564,1567,1569,1571,1574,1576,1578,1580,1582,1584],{"class":596,"line":873},[594,1565,1566],{"class":1287},"    alignment",[594,1568,1477],{"class":604},[594,1570,1363],{"class":604},[594,1572,1573],{"class":621},"start",[594,1575,1299],{"class":604},[594,1577,1487],{"class":604},[594,1579,1363],{"class":604},[594,1581,1438],{"class":621},[594,1583,1299],{"class":604},[594,1585,628],{"class":604},[594,1587,1588,1590,1593,1597],{"class":596,"line":890},[594,1589,1447],{"class":1287},[594,1591,1592],{"class":604},":",[594,1594,1596],{"class":1595},"sBMFI"," string",[594,1598,628],{"class":604},[594,1600,1601,1603,1605,1607],{"class":596,"line":895},[594,1602,1454],{"class":1287},[594,1604,1477],{"class":604},[594,1606,1596],{"class":1595},[594,1608,628],{"class":604},[594,1610,1611,1614,1616],{"class":596,"line":1157},[594,1612,1613],{"class":604},"}>",[594,1615,743],{"class":608},[594,1617,628],{"class":604},[594,1619,1620,1623,1625],{"class":596,"line":1163},[594,1621,1622],{"class":604},"\u003C/",[594,1624,1288],{"class":1287},[594,1626,1306],{"class":604},[594,1628,1629],{"class":596,"line":1169},[594,1630,724],{"emptyLinePlaceholder":32},[594,1632,1633,1635,1638],{"class":596,"line":1175},[594,1634,1284],{"class":604},[594,1636,1637],{"class":1287},"template",[594,1639,1306],{"class":604},[594,1641,1642,1645,1648,1651,1654,1656,1658,1661,1664,1667,1670,1673,1675,1678,1680,1683,1686,1688],{"class":596,"line":1181},[594,1643,1644],{"class":604},"    \u003C",[594,1646,1647],{"class":1287},"section",[594,1649,1650],{"class":604}," :",[594,1652,1653],{"class":730},"class",[594,1655,737],{"class":604},[594,1657,1299],{"class":604},[594,1659,1660],{"class":740},"pageHero",[594,1662,1663],{"class":604},"({ ",[594,1665,1666],{"class":608},"color",[594,1668,1669],{"class":604},", ",[594,1671,1672],{"class":608},"size",[594,1674,1669],{"class":604},[594,1676,1677],{"class":608},"orientation",[594,1679,1669],{"class":604},[594,1681,1682],{"class":608},"alignment",[594,1684,1685],{"class":604}," })",[594,1687,1299],{"class":604},[594,1689,1306],{"class":604},[594,1691,1692,1695,1698,1700,1702,1704,1706,1709,1711,1714,1717,1719,1722,1724,1726,1728,1731],{"class":596,"line":1187},[594,1693,1694],{"class":604},"        \u003C",[594,1696,1697],{"class":1287},"div",[594,1699,1650],{"class":604},[594,1701,1653],{"class":730},[594,1703,737],{"class":604},[594,1705,1299],{"class":604},[594,1707,1708],{"class":740},"pageHeroBackdrop",[594,1710,1663],{"class":604},[594,1712,1713],{"class":1287},"variant",[594,1715,1716],{"class":604},": ",[594,1718,625],{"class":604},[594,1720,1721],{"class":621},"gradient",[594,1723,625],{"class":604},[594,1725,1685],{"class":604},[594,1727,1299],{"class":604},[594,1729,1730],{"class":730}," aria-hidden",[594,1732,1733],{"class":604}," />\n",[594,1735,1736,1738,1740,1742,1744,1746,1748,1751,1753,1755,1757,1759,1761,1763],{"class":596,"line":1193},[594,1737,1694],{"class":604},[594,1739,1697],{"class":1287},[594,1741,1650],{"class":604},[594,1743,1653],{"class":730},[594,1745,737],{"class":604},[594,1747,1299],{"class":604},[594,1749,1750],{"class":740},"pageHeroHeadline",[594,1752,1663],{"class":604},[594,1754,1672],{"class":608},[594,1756,1669],{"class":604},[594,1758,1682],{"class":608},[594,1760,1685],{"class":604},[594,1762,1299],{"class":604},[594,1764,1306],{"class":604},[594,1766,1767,1770,1773,1775,1777,1779,1781,1784,1786,1788,1790,1792,1795,1798,1801,1803],{"class":596,"line":1199},[594,1768,1769],{"class":604},"            \u003C",[594,1771,1772],{"class":1287},"h1",[594,1774,1650],{"class":604},[594,1776,1653],{"class":730},[594,1778,737],{"class":604},[594,1780,1299],{"class":604},[594,1782,1783],{"class":740},"pageHeroTitle",[594,1785,1663],{"class":604},[594,1787,1672],{"class":608},[594,1789,1685],{"class":604},[594,1791,1299],{"class":604},[594,1793,1794],{"class":604},">{{",[594,1796,1797],{"class":608}," title ",[594,1799,1800],{"class":604},"}}\u003C/",[594,1802,1772],{"class":1287},[594,1804,1306],{"class":604},[594,1806,1807,1809,1811,1814,1816,1818,1821,1823,1825,1827,1829,1831,1834,1836,1838,1840,1842],{"class":596,"line":1205},[594,1808,1769],{"class":604},[594,1810,454],{"class":1287},[594,1812,1813],{"class":600}," v-if",[594,1815,737],{"class":604},[594,1817,1299],{"class":604},[594,1819,1820],{"class":608},"description",[594,1822,1299],{"class":604},[594,1824,1650],{"class":604},[594,1826,1653],{"class":730},[594,1828,737],{"class":604},[594,1830,1299],{"class":604},[594,1832,1833],{"class":740},"pageHeroDescription",[594,1835,1663],{"class":604},[594,1837,1672],{"class":608},[594,1839,1685],{"class":604},[594,1841,1299],{"class":604},[594,1843,1306],{"class":604},[594,1845,1846,1849,1852],{"class":596,"line":1211},[594,1847,1848],{"class":604},"                {{",[594,1850,1851],{"class":608}," description ",[594,1853,1854],{"class":604},"}}\n",[594,1856,1857,1860,1862],{"class":596,"line":1217},[594,1858,1859],{"class":604},"            \u003C/",[594,1861,454],{"class":1287},[594,1863,1306],{"class":604},[594,1865,1866,1869,1871],{"class":596,"line":1223},[594,1867,1868],{"class":604},"        \u003C/",[594,1870,1697],{"class":1287},[594,1872,1306],{"class":604},[594,1874,1875,1877,1879,1881,1883,1885,1887,1890,1892,1894,1896,1898,1900,1902],{"class":596,"line":1229},[594,1876,1694],{"class":604},[594,1878,1697],{"class":1287},[594,1880,1650],{"class":604},[594,1882,1653],{"class":730},[594,1884,737],{"class":604},[594,1886,1299],{"class":604},[594,1888,1889],{"class":740},"pageHeroActions",[594,1891,1663],{"class":604},[594,1893,1672],{"class":608},[594,1895,1669],{"class":604},[594,1897,1682],{"class":608},[594,1899,1685],{"class":604},[594,1901,1299],{"class":604},[594,1903,1306],{"class":604},[594,1905,1906,1908,1911],{"class":596,"line":1235},[594,1907,1769],{"class":604},[594,1909,1910],{"class":1287},"slot",[594,1912,1733],{"class":604},[594,1914,1915,1917,1919],{"class":596,"line":1241},[594,1916,1868],{"class":604},[594,1918,1697],{"class":1287},[594,1920,1306],{"class":604},[594,1922,1923,1926,1928],{"class":596,"line":1247},[594,1924,1925],{"class":604},"    \u003C/",[594,1927,1647],{"class":1287},[594,1929,1306],{"class":604},[594,1931,1932,1934,1936],{"class":596,"line":1253},[594,1933,1622],{"class":604},[594,1935,1637],{"class":1287},[594,1937,1306],{"class":604},[569,1939,1941],{"id":1940},"see-it-in-action","See it in action",[1943,1944],"story-preview",{"story":1945,":panel":1946},"theme-recipes-page-hero--default","true",[450,1948,195],{"id":1949},"colors",[454,1951,1952,1953,1669,1955,1957,1958,1960,1961,1964,1965,1968],{},"The PageHero recipe includes 3 color variants: ",[462,1954,1482],{},[462,1956,1492],{},", and ",[462,1959,540],{},". Like the ",[498,1962,263],{"href":1963},"/docs/components/composables/card"," recipe, the PageHero uses neutral-spectrum colors designed for full-bleed content surfaces rather than status communication. Color is applied via compound variants on the root container and inherited by sub-parts through CSS ",[462,1966,1967],{},"color: inherit",".",[454,1970,456,1971,1973],{},[462,1972,540],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose hero sections.",[1943,1975],{"story":1976,":panel":1946},"theme-recipes-page-hero--neutral",[1978,1979,1981],"h3",{"id":1980},"color-reference","Color Reference",[1983,1984,1985,2001],"table",{},[1986,1987,1988],"thead",{},[1989,1990,1991,1995,1998],"tr",{},[1992,1993,1994],"th",{},"Color",[1992,1996,1997],{},"Token",[1992,1999,2000],{},"Use Case",[2002,2003,2004,2019,2033],"tbody",{},[1989,2005,2006,2011,2016],{},[2007,2008,2009],"td",{},[462,2010,1482],{},[2007,2012,2013],{},[462,2014,2015],{},"@color.white",[2007,2017,2018],{},"Light surfaces, stays light in dark mode",[1989,2020,2021,2025,2030],{},[2007,2022,2023],{},[462,2024,1492],{},[2007,2026,2027],{},[462,2028,2029],{},"@color.gray-900",[2007,2031,2032],{},"Dark surfaces, stays dark in light mode",[1989,2034,2035,2039,2042],{},[2007,2036,2037],{},[462,2038,540],{},[2007,2040,2041],{},"Adaptive (light ↔ dark)",[2007,2043,2044],{},"Default color, adapts to the current color scheme",[2046,2047,2048,2051,2052,2054],"tip",{},[458,2049,2050],{},"Pro tip:"," Use ",[462,2053,540],{}," as your default hero color. It adapts automatically to the user's color scheme, so you don't need to manage light and dark variants separately.",[450,2056,2058],{"id":2057},"layouts","Layouts",[454,2060,2061,2062,2064,2065,2067,2068,2070,2071,2064,2073,2067,2075,2077,2078,1669,2081,1957,2084,2087],{},"The hero's layout is controlled by two orthogonal axes: ",[458,2063,1677],{}," (",[462,2066,1422],{}," ↔ ",[462,2069,1557],{},") and ",[458,2072,1682],{},[462,2074,1573],{},[462,2076,1438],{},"). Compound variants resolve the four combinations so ",[462,2079,2080],{},"align-items",[462,2082,2083],{},"justify-items",[462,2085,2086],{},"text-align"," always match the chosen layout.",[1978,2089,2091],{"id":2090},"vertical-orientation","Vertical orientation",[454,2093,2094],{},"Stacks content in a column. The image (if present) sits below the text block.",[1943,2096],{"story":2097,":panel":1946},"theme-recipes-page-hero--vertical",[1978,2099,2101],{"id":2100},"horizontal-orientation","Horizontal orientation",[454,2103,2104],{},"Splits content into a two-column grid. The image (if present) sits beside the text block.",[1943,2106],{"story":2107,":panel":1946},"theme-recipes-page-hero--horizontal",[1978,2109,2111],{"id":2110},"start-alignment","Start alignment",[454,2113,2114],{},"Aligns text and CTAs to the left edge of the content area. Common for split layouts where the eye reads from text on the left to media on the right.",[1943,2116],{"story":2117,":panel":1946},"theme-recipes-page-hero--align-start",[1978,2119,2121],{"id":2120},"center-alignment","Center alignment",[454,2123,2124],{},"Centers text and CTAs horizontally. Common for stacked, single-column heroes that anchor the page.",[1943,2126],{"story":2127,":panel":1946},"theme-recipes-page-hero--align-center",[450,2129,2131],{"id":2130},"sizes","Sizes",[454,2133,2134,2135,2137,2138,2140,2141,2143],{},"Three size variants from ",[462,2136,1516],{}," to ",[462,2139,1533],{}," control the container's vertical padding and gap, plus the headline gap, title font size, description font size, actions gap, links gap and font size, and the image's border radius and shadow. Pass the same ",[462,2142,1672],{}," value to every sub-recipe so the proportions stay coherent.",[1943,2145],{"story":2146,":height":2147},"theme-recipes-page-hero--all-sizes","720",[1978,2149,2151],{"id":2150},"size-reference","Size Reference",[1983,2153,2154,2176],{},[1986,2155,2156],{},[1989,2157,2158,2161,2164,2167,2170,2173],{},[1992,2159,2160],{},"Size",[1992,2162,2163],{},"Container Padding-Y",[1992,2165,2166],{},"Container Gap",[1992,2168,2169],{},"Title Font Size",[1992,2171,2172],{},"Description Font Size",[1992,2174,2175],{},"Image Radius / Shadow",[2002,2177,2178,2213,2247],{},[1989,2179,2180,2184,2189,2194,2199,2204],{},[2007,2181,2182],{},[462,2183,1516],{},[2007,2185,2186],{},[462,2187,2188],{},"@2",[2007,2190,2191],{},[462,2192,2193],{},"@1",[2007,2195,2196],{},[462,2197,2198],{},"@font-size.2xl",[2007,2200,2201],{},[462,2202,2203],{},"@font-size.sm",[2007,2205,2206,2209,2210],{},[462,2207,2208],{},"@border-radius.md"," / ",[462,2211,2212],{},"@box-shadow.md",[1989,2214,2215,2219,2224,2229,2234,2239],{},[2007,2216,2217],{},[462,2218,1406],{},[2007,2220,2221],{},[462,2222,2223],{},"@3",[2007,2225,2226],{},[462,2227,2228],{},"@1.5",[2007,2230,2231],{},[462,2232,2233],{},"@font-size.3xl",[2007,2235,2236],{},[462,2237,2238],{},"@font-size.md",[2007,2240,2241,2209,2244],{},[462,2242,2243],{},"@border-radius.lg",[462,2245,2246],{},"@box-shadow.lg",[1989,2248,2249,2253,2258,2262,2267,2272],{},[2007,2250,2251],{},[462,2252,1533],{},[2007,2254,2255],{},[462,2256,2257],{},"@4",[2007,2259,2260],{},[462,2261,2188],{},[2007,2263,2264],{},[462,2265,2266],{},"@font-size.4xl",[2007,2268,2269],{},[462,2270,2271],{},"@font-size.lg",[2007,2273,2274,2209,2277],{},[462,2275,2276],{},"@border-radius.xl",[462,2278,2279],{},"@box-shadow.xl",[2281,2282,2283,2286,2287,2289],"note",{},[458,2284,2285],{},"Good to know:"," The ",[462,2288,1672],{}," prop must be passed to each sub-recipe individually. The container controls padding-block and overall gap, while every sub-part scales its own typography or spacing.",[450,2291,2293],{"id":2292},"anatomy","Anatomy",[454,2295,2296],{},"The PageHero recipe is composed of eight independent recipes that work together to form a complete landing-section layout:",[1983,2298,2299,2312],{},[1986,2300,2301],{},[1989,2302,2303,2306,2309],{},[1992,2304,2305],{},"Part",[1992,2307,2308],{},"Recipe",[1992,2310,2311],{},"Role",[2002,2313,2314,2335,2354,2371,2388,2404,2421,2437],{},[1989,2315,2316,2321,2325],{},[2007,2317,2318],{},[458,2319,2320],{},"Container",[2007,2322,2323],{},[462,2324,464],{},[2007,2326,2327,2328,2330,2331,2334],{},"Outer ",[462,2329,468],{}," with padding-block, overflow clipping, and ",[462,2332,2333],{},"position: relative"," so the backdrop can anchor inside it",[1989,2336,2337,2342,2346],{},[2007,2338,2339],{},[458,2340,2341],{},"Headline",[2007,2343,2344],{},[462,2345,472],{},[2007,2347,2348,2351,2352],{},[462,2349,2350],{},"\u003Cdiv>"," wrapper around the title + description; controls vertical stacking and ",[462,2353,2086],{},[1989,2355,2356,2361,2365],{},[2007,2357,2358],{},[458,2359,2360],{},"Title",[2007,2362,2363],{},[462,2364,476],{},[2007,2366,2367,2370],{},[462,2368,2369],{},"\u003Ch1>"," heading with display-scale typography",[1989,2372,2373,2378,2382],{},[2007,2374,2375],{},[458,2376,2377],{},"Description",[2007,2379,2380],{},[462,2381,480],{},[2007,2383,2384,2387],{},[462,2385,2386],{},"\u003Cp>"," lede with clamped 60ch max-width for readable measure",[1989,2389,2390,2395,2399],{},[2007,2391,2392],{},[458,2393,2394],{},"Actions",[2007,2396,2397],{},[462,2398,484],{},[2007,2400,2401,2403],{},[462,2402,2350],{}," flex row for the primary + secondary CTAs",[1989,2405,2406,2411,2415],{},[2007,2407,2408],{},[458,2409,2410],{},"Links",[2007,2412,2413],{},[462,2414,487],{},[2007,2416,2417,2420],{},[462,2418,2419],{},"\u003Cnav>"," flex row for secondary text-link CTAs",[1989,2422,2423,2428,2432],{},[2007,2424,2425],{},[458,2426,2427],{},"Image",[2007,2429,2430],{},[462,2431,491],{},[2007,2433,2434,2436],{},[462,2435,2350],{}," media slot with rounded corners and shadow",[1989,2438,2439,2444,2448],{},[2007,2440,2441],{},[458,2442,2443],{},"Backdrop",[2007,2445,2446],{},[462,2447,495],{},[2007,2449,2450,2453],{},[462,2451,2452],{},"\u003Cdiv aria-hidden>"," decorative overlay positioned absolutely behind content",[585,2455,2459],{"className":2456,"code":2457,"language":2458,"meta":590,"style":590},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- All eight parts working together -->\n\u003Csection class=\"page-hero(...)\">\n    \u003Cdiv class=\"page-hero-backdrop(...)\" aria-hidden>\u003C/div>\n    \u003Cdiv class=\"page-hero-headline(...)\">\n        \u003Ch1 class=\"page-hero-title(...)\">Title\u003C/h1>\n        \u003Cp class=\"page-hero-description(...)\">Description\u003C/p>\n    \u003C/div>\n    \u003Cdiv class=\"page-hero-actions(...)\">…CTAs…\u003C/div>\n    \u003Cnav class=\"page-hero-links(...)\">…links…\u003C/nav>\n    \u003Cdiv class=\"page-hero-image(...)\">…media…\u003C/div>\n\u003C/section>\n","html",[462,2460,2461,2467,2487,2513,2532,2560,2587,2595,2623,2652,2680],{"__ignoreMap":590},[594,2462,2463],{"class":596,"line":597},[594,2464,2466],{"class":2465},"sHwdD","\u003C!-- All eight parts working together -->\n",[594,2468,2469,2471,2473,2476,2478,2480,2483,2485],{"class":596,"line":631},[594,2470,1284],{"class":604},[594,2472,1647],{"class":1287},[594,2474,2475],{"class":730}," class",[594,2477,737],{"class":604},[594,2479,1299],{"class":604},[594,2481,2482],{"class":621},"page-hero(...)",[594,2484,1299],{"class":604},[594,2486,1306],{"class":604},[594,2488,2489,2491,2493,2495,2497,2499,2502,2504,2506,2509,2511],{"class":596,"line":639},[594,2490,1644],{"class":604},[594,2492,1697],{"class":1287},[594,2494,2475],{"class":730},[594,2496,737],{"class":604},[594,2498,1299],{"class":604},[594,2500,2501],{"class":621},"page-hero-backdrop(...)",[594,2503,1299],{"class":604},[594,2505,1730],{"class":730},[594,2507,2508],{"class":604},">\u003C/",[594,2510,1697],{"class":1287},[594,2512,1306],{"class":604},[594,2514,2515,2517,2519,2521,2523,2525,2528,2530],{"class":596,"line":648},[594,2516,1644],{"class":604},[594,2518,1697],{"class":1287},[594,2520,2475],{"class":730},[594,2522,737],{"class":604},[594,2524,1299],{"class":604},[594,2526,2527],{"class":621},"page-hero-headline(...)",[594,2529,1299],{"class":604},[594,2531,1306],{"class":604},[594,2533,2534,2536,2538,2540,2542,2544,2547,2549,2552,2554,2556,2558],{"class":596,"line":656},[594,2535,1694],{"class":604},[594,2537,1772],{"class":1287},[594,2539,2475],{"class":730},[594,2541,737],{"class":604},[594,2543,1299],{"class":604},[594,2545,2546],{"class":621},"page-hero-title(...)",[594,2548,1299],{"class":604},[594,2550,2551],{"class":604},">",[594,2553,2360],{"class":608},[594,2555,1622],{"class":604},[594,2557,1772],{"class":1287},[594,2559,1306],{"class":604},[594,2561,2562,2564,2566,2568,2570,2572,2575,2577,2579,2581,2583,2585],{"class":596,"line":664},[594,2563,1694],{"class":604},[594,2565,454],{"class":1287},[594,2567,2475],{"class":730},[594,2569,737],{"class":604},[594,2571,1299],{"class":604},[594,2573,2574],{"class":621},"page-hero-description(...)",[594,2576,1299],{"class":604},[594,2578,2551],{"class":604},[594,2580,2377],{"class":608},[594,2582,1622],{"class":604},[594,2584,454],{"class":1287},[594,2586,1306],{"class":604},[594,2588,2589,2591,2593],{"class":596,"line":672},[594,2590,1925],{"class":604},[594,2592,1697],{"class":1287},[594,2594,1306],{"class":604},[594,2596,2597,2599,2601,2603,2605,2607,2610,2612,2614,2617,2619,2621],{"class":596,"line":680},[594,2598,1644],{"class":604},[594,2600,1697],{"class":1287},[594,2602,2475],{"class":730},[594,2604,737],{"class":604},[594,2606,1299],{"class":604},[594,2608,2609],{"class":621},"page-hero-actions(...)",[594,2611,1299],{"class":604},[594,2613,2551],{"class":604},[594,2615,2616],{"class":608},"…CTAs…",[594,2618,1622],{"class":604},[594,2620,1697],{"class":1287},[594,2622,1306],{"class":604},[594,2624,2625,2627,2630,2632,2634,2636,2639,2641,2643,2646,2648,2650],{"class":596,"line":688},[594,2626,1644],{"class":604},[594,2628,2629],{"class":1287},"nav",[594,2631,2475],{"class":730},[594,2633,737],{"class":604},[594,2635,1299],{"class":604},[594,2637,2638],{"class":621},"page-hero-links(...)",[594,2640,1299],{"class":604},[594,2642,2551],{"class":604},[594,2644,2645],{"class":608},"…links…",[594,2647,1622],{"class":604},[594,2649,2629],{"class":1287},[594,2651,1306],{"class":604},[594,2653,2654,2656,2658,2660,2662,2664,2667,2669,2671,2674,2676,2678],{"class":596,"line":696},[594,2655,1644],{"class":604},[594,2657,1697],{"class":1287},[594,2659,2475],{"class":730},[594,2661,737],{"class":604},[594,2663,1299],{"class":604},[594,2665,2666],{"class":621},"page-hero-image(...)",[594,2668,1299],{"class":604},[594,2670,2551],{"class":604},[594,2672,2673],{"class":608},"…media…",[594,2675,1622],{"class":604},[594,2677,1697],{"class":1287},[594,2679,1306],{"class":604},[594,2681,2682,2684,2686],{"class":596,"line":704},[594,2683,1622],{"class":604},[594,2685,1647],{"class":1287},[594,2687,1306],{"class":604},[2046,2689,2690,2692,2693,2696,2697,2700],{},[458,2691,2050],{}," No dedicated eyebrow recipe is shipped because the existing ",[498,2694,247],{"href":2695},"/docs/components/composables/badge"," recipe already covers that use case. Drop a ",[462,2698,2699],{},"\u003CBadge color=\"primary\" variant=\"soft\" size=\"sm\">"," inside the headline above the title for the \"What's new\" pattern.",[2281,2702,2703,2705,2706,2708,2709,2712,2713,2716],{},[458,2704,2285],{}," Render the ",[462,2707,2443],{}," element as the ",[458,2710,2711],{},"first child"," of the container. DOM order keeps text and media above the absolute-positioned overlay, so no ",[462,2714,2715],{},"z-index"," management is required.",[450,2718,2443],{"id":2719},"backdrop",[454,2721,2722,2723,2725],{},"The decorative backdrop has its own ",[462,2724,1713],{}," axis with three styles. Each variant is a self-contained background treatment that adapts to dark mode automatically.",[1978,2727,2728],{"id":1721},"Gradient",[454,2730,2731],{},"A diagonal two-tone linear gradient between the primary and secondary palette tints (light mode) or shades (dark mode).",[1943,2733],{"story":2734,":panel":1946},"theme-recipes-page-hero--backdrop-gradient",[1978,2736,2738],{"id":2737},"pattern","Pattern",[454,2740,2741,2742,2745,2746,2749,2750,2753],{},"A subtle 16×16 dot grid using ",[462,2743,2744],{},"radial-gradient",". The dots use ",[462,2747,2748],{},"gray-200"," in light mode and ",[462,2751,2752],{},"gray-800"," in dark mode.",[1943,2755],{"story":2756,":panel":1946},"theme-recipes-page-hero--backdrop-pattern",[1978,2758,2760],{"id":2759},"blur","Blur",[454,2762,2763,2764,2767,2768,2749,2771,2753],{},"A soft radial blob centered behind the content with a 60px CSS ",[462,2765,2766],{},"filter: blur()",". Uses ",[462,2769,2770],{},"primary-200",[462,2772,2773],{},"primary-800",[1943,2775],{"story":2776,":panel":1946},"theme-recipes-page-hero--backdrop-blur",[450,2778,339],{"id":2779},"accessibility",[517,2781,2782,2798,2813,2829],{},[520,2783,2784,2790,2791,2794,2795,2797],{},[458,2785,2786,2787,2789],{},"Use one ",[462,2788,2369],{}," per page."," The PageHero is intended for the top-of-page introduction. If you render multiple heroes on the same route, demote inner titles to ",[462,2792,2793],{},"\u003Ch2>"," by overriding the ",[462,2796,2360],{}," sub-component's element.",[520,2799,2800,2286,2803,2805,2806,477,2809,2812],{},[458,2801,2802],{},"Keep the backdrop decorative.",[462,2804,2443],{}," element renders with ",[462,2807,2808],{},"aria-hidden=\"true\"",[462,2810,2811],{},"pointer-events: none",", so screen readers and pointer events skip it. Do not place essential content inside it.",[520,2814,2815,2286,2818,477,2820,2822,2823,1968],{},[458,2816,2817],{},"Verify contrast ratios.",[462,2819,1482],{},[462,2821,1492],{}," colors place fixed-contrast text on fixed backgrounds (WCAG AA 4.5:1 with default tokens). If you customize colors, verify with the ",[498,2824,2828],{"href":2825,"rel":2826},"https://webaim.org/resources/contrastchecker/",[2827],"nofollow","WebAIM Contrast Checker",[520,2830,2831,2834,2835,2838,2839,2842],{},[458,2832,2833],{},"Provide accessible CTAs."," The Actions and Links sub-recipes are layout-only wrappers. Wrap interactive content in semantic ",[462,2836,2837],{},"\u003Ca>"," or ",[462,2840,2841],{},"\u003Cbutton>"," elements with descriptive labels.",[450,2844,2846],{"id":2845},"customization","Customization",[1978,2848,2850],{"id":2849},"overriding-defaults","Overriding Defaults",[454,2852,2853],{},"Each PageHero composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[585,2855,2857],{"className":587,"code":2856,"filename":583,"language":589,"meta":590,"style":590},"import { styleframe } from 'virtual:styleframe';\nimport {\n    usePageHeroRecipe,\n    usePageHeroTitleRecipe,\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst pageHero = usePageHeroRecipe(s, {\n    base: {\n        paddingTop: '@4',\n        paddingBottom: '@4',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n        orientation: 'horizontal',\n        alignment: 'start',\n    },\n});\n\nconst pageHeroTitle = usePageHeroTitleRecipe(s, {\n    defaultVariants: {\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[462,2858,2859,2879,2885,2891,2897,2911,2915,2929,2933,2950,2959,2974,2989,2994,3003,3018,3033,3048,3063,3067,3076,3080,3096,3104,3118,3122,3130,3134],{"__ignoreMap":590},[594,2860,2861,2863,2865,2867,2869,2871,2873,2875,2877],{"class":596,"line":597},[594,2862,601],{"class":600},[594,2864,605],{"class":604},[594,2866,609],{"class":608},[594,2868,612],{"class":604},[594,2870,615],{"class":600},[594,2872,618],{"class":604},[594,2874,622],{"class":621},[594,2876,625],{"class":604},[594,2878,628],{"class":604},[594,2880,2881,2883],{"class":596,"line":631},[594,2882,601],{"class":600},[594,2884,636],{"class":604},[594,2886,2887,2889],{"class":596,"line":639},[594,2888,642],{"class":608},[594,2890,645],{"class":604},[594,2892,2893,2895],{"class":596,"line":648},[594,2894,659],{"class":608},[594,2896,645],{"class":604},[594,2898,2899,2901,2903,2905,2907,2909],{"class":596,"line":656},[594,2900,707],{"class":604},[594,2902,615],{"class":600},[594,2904,618],{"class":604},[594,2906,714],{"class":621},[594,2908,625],{"class":604},[594,2910,628],{"class":604},[594,2912,2913],{"class":596,"line":664},[594,2914,724],{"emptyLinePlaceholder":32},[594,2916,2917,2919,2921,2923,2925,2927],{"class":596,"line":672},[594,2918,731],{"class":730},[594,2920,734],{"class":608},[594,2922,737],{"class":604},[594,2924,609],{"class":740},[594,2926,743],{"class":608},[594,2928,628],{"class":604},[594,2930,2931],{"class":596,"line":680},[594,2932,724],{"emptyLinePlaceholder":32},[594,2934,2935,2937,2939,2941,2943,2946,2948],{"class":596,"line":688},[594,2936,731],{"class":730},[594,2938,758],{"class":608},[594,2940,737],{"class":604},[594,2942,763],{"class":740},[594,2944,2945],{"class":608},"(s",[594,2947,944],{"class":604},[594,2949,636],{"class":604},[594,2951,2952,2955,2957],{"class":596,"line":696},[594,2953,2954],{"class":1287},"    base",[594,2956,1592],{"class":604},[594,2958,636],{"class":604},[594,2960,2961,2964,2966,2968,2970,2972],{"class":596,"line":704},[594,2962,2963],{"class":1287},"        paddingTop",[594,2965,1592],{"class":604},[594,2967,618],{"class":604},[594,2969,2257],{"class":621},[594,2971,625],{"class":604},[594,2973,645],{"class":604},[594,2975,2976,2979,2981,2983,2985,2987],{"class":596,"line":721},[594,2977,2978],{"class":1287},"        paddingBottom",[594,2980,1592],{"class":604},[594,2982,618],{"class":604},[594,2984,2257],{"class":621},[594,2986,625],{"class":604},[594,2988,645],{"class":604},[594,2990,2991],{"class":596,"line":727},[594,2992,2993],{"class":604},"    },\n",[594,2995,2996,2999,3001],{"class":596,"line":748},[594,2997,2998],{"class":1287},"    defaultVariants",[594,3000,1592],{"class":604},[594,3002,636],{"class":604},[594,3004,3005,3008,3010,3012,3014,3016],{"class":596,"line":753},[594,3006,3007],{"class":1287},"        color",[594,3009,1592],{"class":604},[594,3011,618],{"class":604},[594,3013,540],{"class":621},[594,3015,625],{"class":604},[594,3017,645],{"class":604},[594,3019,3020,3023,3025,3027,3029,3031],{"class":596,"line":771},[594,3021,3022],{"class":1287},"        size",[594,3024,1592],{"class":604},[594,3026,618],{"class":604},[594,3028,1533],{"class":621},[594,3030,625],{"class":604},[594,3032,645],{"class":604},[594,3034,3035,3038,3040,3042,3044,3046],{"class":596,"line":788},[594,3036,3037],{"class":1287},"        orientation",[594,3039,1592],{"class":604},[594,3041,618],{"class":604},[594,3043,1557],{"class":621},[594,3045,625],{"class":604},[594,3047,645],{"class":604},[594,3049,3050,3053,3055,3057,3059,3061],{"class":596,"line":805},[594,3051,3052],{"class":1287},"        alignment",[594,3054,1592],{"class":604},[594,3056,618],{"class":604},[594,3058,1573],{"class":621},[594,3060,625],{"class":604},[594,3062,645],{"class":604},[594,3064,3065],{"class":596,"line":822},[594,3066,2993],{"class":604},[594,3068,3069,3071,3074],{"class":596,"line":839},[594,3070,707],{"class":604},[594,3072,3073],{"class":608},")",[594,3075,628],{"class":604},[594,3077,3078],{"class":596,"line":856},[594,3079,724],{"emptyLinePlaceholder":32},[594,3081,3082,3084,3086,3088,3090,3092,3094],{"class":596,"line":873},[594,3083,731],{"class":730},[594,3085,793],{"class":608},[594,3087,737],{"class":604},[594,3089,798],{"class":740},[594,3091,2945],{"class":608},[594,3093,944],{"class":604},[594,3095,636],{"class":604},[594,3097,3098,3100,3102],{"class":596,"line":890},[594,3099,2998],{"class":1287},[594,3101,1592],{"class":604},[594,3103,636],{"class":604},[594,3105,3106,3108,3110,3112,3114,3116],{"class":596,"line":895},[594,3107,3022],{"class":1287},[594,3109,1592],{"class":604},[594,3111,618],{"class":604},[594,3113,1533],{"class":621},[594,3115,625],{"class":604},[594,3117,645],{"class":604},[594,3119,3120],{"class":596,"line":1157},[594,3121,2993],{"class":604},[594,3123,3124,3126,3128],{"class":596,"line":1163},[594,3125,707],{"class":604},[594,3127,3073],{"class":608},[594,3129,628],{"class":604},[594,3131,3132],{"class":596,"line":1169},[594,3133,724],{"emptyLinePlaceholder":32},[594,3135,3136,3138,3140,3142],{"class":596,"line":1175},[594,3137,898],{"class":600},[594,3139,901],{"class":600},[594,3141,904],{"class":608},[594,3143,628],{"class":604},[1978,3145,3147],{"id":3146},"filtering-variants","Filtering Variants",[454,3149,3150,3151,3154],{},"If you only need a subset of the available variants, use the ",[462,3152,3153],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[585,3156,3158],{"className":587,"code":3157,"filename":583,"language":589,"meta":590,"style":590},"import { styleframe } from 'virtual:styleframe';\nimport { usePageHeroRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate the neutral color in vertical orientation\nconst pageHero = usePageHeroRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        orientation: ['vertical'],\n    },\n});\n\nexport default s;\n",[462,3159,3160,3180,3200,3204,3218,3222,3227,3243,3252,3272,3290,3294,3302,3306],{"__ignoreMap":590},[594,3161,3162,3164,3166,3168,3170,3172,3174,3176,3178],{"class":596,"line":597},[594,3163,601],{"class":600},[594,3165,605],{"class":604},[594,3167,609],{"class":608},[594,3169,612],{"class":604},[594,3171,615],{"class":600},[594,3173,618],{"class":604},[594,3175,622],{"class":621},[594,3177,625],{"class":604},[594,3179,628],{"class":604},[594,3181,3182,3184,3186,3188,3190,3192,3194,3196,3198],{"class":596,"line":631},[594,3183,601],{"class":600},[594,3185,605],{"class":604},[594,3187,763],{"class":608},[594,3189,612],{"class":604},[594,3191,615],{"class":600},[594,3193,618],{"class":604},[594,3195,714],{"class":621},[594,3197,625],{"class":604},[594,3199,628],{"class":604},[594,3201,3202],{"class":596,"line":639},[594,3203,724],{"emptyLinePlaceholder":32},[594,3205,3206,3208,3210,3212,3214,3216],{"class":596,"line":648},[594,3207,731],{"class":730},[594,3209,734],{"class":608},[594,3211,737],{"class":604},[594,3213,609],{"class":740},[594,3215,743],{"class":608},[594,3217,628],{"class":604},[594,3219,3220],{"class":596,"line":656},[594,3221,724],{"emptyLinePlaceholder":32},[594,3223,3224],{"class":596,"line":664},[594,3225,3226],{"class":2465},"// Only generate the neutral color in vertical orientation\n",[594,3228,3229,3231,3233,3235,3237,3239,3241],{"class":596,"line":672},[594,3230,731],{"class":730},[594,3232,758],{"class":608},[594,3234,737],{"class":604},[594,3236,763],{"class":740},[594,3238,2945],{"class":608},[594,3240,944],{"class":604},[594,3242,636],{"class":604},[594,3244,3245,3248,3250],{"class":596,"line":680},[594,3246,3247],{"class":1287},"    filter",[594,3249,1592],{"class":604},[594,3251,636],{"class":604},[594,3253,3254,3256,3258,3261,3263,3265,3267,3270],{"class":596,"line":688},[594,3255,3007],{"class":1287},[594,3257,1592],{"class":604},[594,3259,3260],{"class":608}," [",[594,3262,625],{"class":604},[594,3264,540],{"class":621},[594,3266,625],{"class":604},[594,3268,3269],{"class":608},"]",[594,3271,645],{"class":604},[594,3273,3274,3276,3278,3280,3282,3284,3286,3288],{"class":596,"line":696},[594,3275,3037],{"class":1287},[594,3277,1592],{"class":604},[594,3279,3260],{"class":608},[594,3281,625],{"class":604},[594,3283,1422],{"class":621},[594,3285,625],{"class":604},[594,3287,3269],{"class":608},[594,3289,645],{"class":604},[594,3291,3292],{"class":596,"line":704},[594,3293,2993],{"class":604},[594,3295,3296,3298,3300],{"class":596,"line":721},[594,3297,707],{"class":604},[594,3299,3073],{"class":608},[594,3301,628],{"class":604},[594,3303,3304],{"class":596,"line":727},[594,3305,724],{"emptyLinePlaceholder":32},[594,3307,3308,3310,3312,3314],{"class":596,"line":748},[594,3309,898],{"class":600},[594,3311,901],{"class":600},[594,3313,904],{"class":608},[594,3315,628],{"class":604},[2281,3317,3318,3320],{},[458,3319,2285],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[450,3322,73],{"id":3323},"api-reference",[1978,3325,3327],{"id":3326},"usepageherorecipes-options",[462,3328,3329],{},"usePageHeroRecipe(s, options?)",[454,3331,3332,3333,3335,3336,3338],{},"Creates the root ",[462,3334,468],{}," container recipe with padding-block, overflow clipping, and ",[462,3337,2333],{}," for backdrop anchoring.",[454,3340,3341],{},[458,3342,3343],{},"Parameters:",[1983,3345,3346,3358],{},[1986,3347,3348],{},[1989,3349,3350,3353,3356],{},[1992,3351,3352],{},"Parameter",[1992,3354,3355],{},"Type",[1992,3357,2377],{},[2002,3359,3360,3375,3390,3405,3420,3435,3450],{},[1989,3361,3362,3367,3372],{},[2007,3363,3364],{},[462,3365,3366],{},"s",[2007,3368,3369],{},[462,3370,3371],{},"Styleframe",[2007,3373,3374],{},"The Styleframe instance",[1989,3376,3377,3382,3387],{},[2007,3378,3379],{},[462,3380,3381],{},"options",[2007,3383,3384],{},[462,3385,3386],{},"DeepPartial\u003CRecipeConfig>",[2007,3388,3389],{},"Optional overrides for the recipe configuration",[1989,3391,3392,3397,3402],{},[2007,3393,3394],{},[462,3395,3396],{},"options.base",[2007,3398,3399],{},[462,3400,3401],{},"VariantDeclarationsBlock",[2007,3403,3404],{},"Custom base styles for the container",[1989,3406,3407,3412,3417],{},[2007,3408,3409],{},[462,3410,3411],{},"options.variants",[2007,3413,3414],{},[462,3415,3416],{},"Variants",[2007,3418,3419],{},"Custom variant definitions",[1989,3421,3422,3427,3432],{},[2007,3423,3424],{},[462,3425,3426],{},"options.defaultVariants",[2007,3428,3429],{},[462,3430,3431],{},"Record\u003Ckeyof Variants, string>",[2007,3433,3434],{},"Default variant values",[1989,3436,3437,3442,3447],{},[2007,3438,3439],{},[462,3440,3441],{},"options.compoundVariants",[2007,3443,3444],{},[462,3445,3446],{},"CompoundVariant[]",[2007,3448,3449],{},"Custom compound variant definitions",[1989,3451,3452,3457,3462],{},[2007,3453,3454],{},[462,3455,3456],{},"options.filter",[2007,3458,3459],{},[462,3460,3461],{},"Record\u003Cstring, string[]>",[2007,3463,3464],{},"Limit which variant values are generated",[454,3466,3467],{},[458,3468,3469],{},"Variants:",[1983,3471,3472,3485],{},[1986,3473,3474],{},[1989,3475,3476,3479,3482],{},[1992,3477,3478],{},"Variant",[1992,3480,3481],{},"Options",[1992,3483,3484],{},"Default",[2002,3486,3487,3505,3523,3539],{},[1989,3488,3489,3493,3501],{},[2007,3490,3491],{},[462,3492,1666],{},[2007,3494,3495,1669,3497,1669,3499],{},[462,3496,1482],{},[462,3498,1492],{},[462,3500,540],{},[2007,3502,3503],{},[462,3504,540],{},[1989,3506,3507,3511,3519],{},[2007,3508,3509],{},[462,3510,1672],{},[2007,3512,3513,1669,3515,1669,3517],{},[462,3514,1516],{},[462,3516,1406],{},[462,3518,1533],{},[2007,3520,3521],{},[462,3522,1406],{},[1989,3524,3525,3529,3535],{},[2007,3526,3527],{},[462,3528,1677],{},[2007,3530,3531,1669,3533],{},[462,3532,1422],{},[462,3534,1557],{},[2007,3536,3537],{},[462,3538,1422],{},[1989,3540,3541,3545,3551],{},[2007,3542,3543],{},[462,3544,1682],{},[2007,3546,3547,1669,3549],{},[462,3548,1573],{},[462,3550,1438],{},[2007,3552,3553],{},[462,3554,1438],{},[1978,3556,3558],{"id":3557},"usepageheroheadlinerecipes-options",[462,3559,3560],{},"usePageHeroHeadlineRecipe(s, options?)",[454,3562,3563],{},"Creates the headline wrapper recipe (a flex column for the title + description).",[454,3565,3566],{},[458,3567,3469],{},[1983,3569,3570,3580],{},[1986,3571,3572],{},[1989,3573,3574,3576,3578],{},[1992,3575,3478],{},[1992,3577,3481],{},[1992,3579,3484],{},[2002,3581,3582,3600],{},[1989,3583,3584,3588,3596],{},[2007,3585,3586],{},[462,3587,1672],{},[2007,3589,3590,1669,3592,1669,3594],{},[462,3591,1516],{},[462,3593,1406],{},[462,3595,1533],{},[2007,3597,3598],{},[462,3599,1406],{},[1989,3601,3602,3606,3612],{},[2007,3603,3604],{},[462,3605,1682],{},[2007,3607,3608,1669,3610],{},[462,3609,1573],{},[462,3611,1438],{},[2007,3613,3614],{},[462,3615,1438],{},[1978,3617,3619],{"id":3618},"usepageherotitlerecipes-options",[462,3620,3621],{},"usePageHeroTitleRecipe(s, options?)",[454,3623,3624,3625,3627],{},"Creates the title recipe (",[462,3626,2369],{},") with display-scale typography.",[454,3629,3630],{},[458,3631,3469],{},[1983,3633,3634,3644],{},[1986,3635,3636],{},[1989,3637,3638,3640,3642],{},[1992,3639,3478],{},[1992,3641,3481],{},[1992,3643,3484],{},[2002,3645,3646],{},[1989,3647,3648,3652,3660],{},[2007,3649,3650],{},[462,3651,1672],{},[2007,3653,3654,1669,3656,1669,3658],{},[462,3655,1516],{},[462,3657,1406],{},[462,3659,1533],{},[2007,3661,3662],{},[462,3663,1406],{},[1978,3665,3667],{"id":3666},"usepageherodescriptionrecipes-options",[462,3668,3669],{},"usePageHeroDescriptionRecipe(s, options?)",[454,3671,3672,3673,3675],{},"Creates the description recipe (",[462,3674,2386],{},") with a clamped 60ch max-width.",[454,3677,3678],{},[458,3679,3469],{},[1983,3681,3682,3692],{},[1986,3683,3684],{},[1989,3685,3686,3688,3690],{},[1992,3687,3478],{},[1992,3689,3481],{},[1992,3691,3484],{},[2002,3693,3694],{},[1989,3695,3696,3700,3708],{},[2007,3697,3698],{},[462,3699,1672],{},[2007,3701,3702,1669,3704,1669,3706],{},[462,3703,1516],{},[462,3705,1406],{},[462,3707,1533],{},[2007,3709,3710],{},[462,3711,1406],{},[1978,3713,3715],{"id":3714},"usepageheroactionsrecipes-options",[462,3716,3717],{},"usePageHeroActionsRecipe(s, options?)",[454,3719,3720],{},"Creates the actions container recipe (a flex row that wraps).",[454,3722,3723],{},[458,3724,3469],{},[1983,3726,3727,3737],{},[1986,3728,3729],{},[1989,3730,3731,3733,3735],{},[1992,3732,3478],{},[1992,3734,3481],{},[1992,3736,3484],{},[2002,3738,3739,3757],{},[1989,3740,3741,3745,3753],{},[2007,3742,3743],{},[462,3744,1672],{},[2007,3746,3747,1669,3749,1669,3751],{},[462,3748,1516],{},[462,3750,1406],{},[462,3752,1533],{},[2007,3754,3755],{},[462,3756,1406],{},[1989,3758,3759,3763,3769],{},[2007,3760,3761],{},[462,3762,1682],{},[2007,3764,3765,1669,3767],{},[462,3766,1573],{},[462,3768,1438],{},[2007,3770,3771],{},[462,3772,1438],{},[1978,3774,3776],{"id":3775},"usepageherolinksrecipes-options",[462,3777,3778],{},"usePageHeroLinksRecipe(s, options?)",[454,3780,3781,3782,3784],{},"Creates the secondary-links container recipe (a ",[462,3783,2419],{}," flex row).",[454,3786,3787],{},[458,3788,3469],{},[1983,3790,3791,3801],{},[1986,3792,3793],{},[1989,3794,3795,3797,3799],{},[1992,3796,3478],{},[1992,3798,3481],{},[1992,3800,3484],{},[2002,3802,3803,3821],{},[1989,3804,3805,3809,3817],{},[2007,3806,3807],{},[462,3808,1672],{},[2007,3810,3811,1669,3813,1669,3815],{},[462,3812,1516],{},[462,3814,1406],{},[462,3816,1533],{},[2007,3818,3819],{},[462,3820,1406],{},[1989,3822,3823,3827,3833],{},[2007,3824,3825],{},[462,3826,1682],{},[2007,3828,3829,1669,3831],{},[462,3830,1573],{},[462,3832,1438],{},[2007,3834,3835],{},[462,3836,1438],{},[1978,3838,3840],{"id":3839},"usepageheroimagerecipes-options",[462,3841,3842],{},"usePageHeroImageRecipe(s, options?)",[454,3844,3845,3846,3849],{},"Creates the image-slot recipe with ",[462,3847,3848],{},"overflow: hidden",", scaled border-radius, and box-shadow.",[454,3851,3852],{},[458,3853,3469],{},[1983,3855,3856,3866],{},[1986,3857,3858],{},[1989,3859,3860,3862,3864],{},[1992,3861,3478],{},[1992,3863,3481],{},[1992,3865,3484],{},[2002,3867,3868],{},[1989,3869,3870,3874,3882],{},[2007,3871,3872],{},[462,3873,1672],{},[2007,3875,3876,1669,3878,1669,3880],{},[462,3877,1516],{},[462,3879,1406],{},[462,3881,1533],{},[2007,3883,3884],{},[462,3885,1406],{},[1978,3887,3889],{"id":3888},"usepageherobackdroprecipes-options",[462,3890,3891],{},"usePageHeroBackdropRecipe(s, options?)",[454,3893,3894,3895,3898,3899,3901],{},"Creates the decorative backdrop recipe (",[462,3896,3897],{},"position: absolute; inset: 0","). The ",[462,3900,1713],{}," axis switches between gradient, pattern, and blur background treatments.",[454,3903,3904],{},[458,3905,3469],{},[1983,3907,3908,3918],{},[1986,3909,3910],{},[1989,3911,3912,3914,3916],{},[1992,3913,3478],{},[1992,3915,3481],{},[1992,3917,3484],{},[2002,3919,3920],{},[1989,3921,3922,3926,3934],{},[2007,3923,3924],{},[462,3925,1713],{},[2007,3927,3928,1669,3930,1669,3932],{},[462,3929,1721],{},[462,3931,2737],{},[462,3933,2759],{},[2007,3935,3936],{},[462,3937,1721],{},[454,3939,3940],{},[498,3941,3942],{"href":132},"Learn more about recipes →",[450,3944,3946],{"id":3945},"best-practices","Best Practices",[517,3948,3949,3961,3976,3982,3991,4003,4012],{},[520,3950,3951,3957,3958,3960],{},[458,3952,3953,3954,3956],{},"Pass ",[462,3955,1672],{}," to every sub-recipe",": The container controls padding-block, but every sub-part scales its own typography or spacing. Pass the same ",[462,3959,1672],{}," value through to keep proportions consistent.",[520,3962,3963,3968,3969,3971,3972,2209,3974,1968],{},[458,3964,3953,3965,3967],{},[462,3966,1682],{}," to Headline, Actions, and Links",": These are the three sub-recipes whose layout flips with alignment. The container's ",[462,3970,1682],{}," only affects its own ",[462,3973,2080],{},[462,3975,2083],{},[520,3977,3978,3981],{},[458,3979,3980],{},"Render the Backdrop first",": DOM order is what stacks content above the absolute-positioned overlay. Putting the Backdrop last hides everything else.",[520,3983,3984,3990],{},[458,3985,3986,3987,3989],{},"Use ",[462,3988,540],{}," for general-purpose heroes",": The neutral color adapts to light and dark mode automatically.",[520,3992,3993,3999,4000,4002],{},[458,3994,3995,3996,3998],{},"Reach for ",[462,3997,1557],{}," orientation when you have media",": Without an image or screenshot to fill the second column, the horizontal layout wastes space. Use ",[462,4001,1422],{}," for text-only heroes.",[520,4004,4005,4008,4009,4011],{},[458,4006,4007],{},"Filter what you don't need",": If your component only uses one orientation, pass a ",[462,4010,3153],{}," option to reduce generated CSS.",[520,4013,4014,4017,4018,4021],{},[458,4015,4016],{},"Override defaults at the recipe level",": Set your most common combination as ",[462,4019,4020],{},"defaultVariants"," so component consumers write less code.",[450,4023,4025],{"id":4024},"faq","FAQ",[4027,4028,4029,4040,4050,4057,4070,4103,4120],"accordion",{},[4030,4031,4034,4035,477,4037,4039],"accordion-item",{"icon":4032,"label":4033},"i-lucide-circle-help","Why are there eight separate recipes instead of one?","Hero sections have distinct structural parts (headline, title, description, actions, links, image, backdrop) that need independent styling — different padding, typography scale, layout direction, and visual treatments. Eight separate recipes give each part its own base styles and variants while sharing the same ",[462,4036,1672],{},[462,4038,1682],{}," axes. This approach keeps each recipe focused and lets you compose only the parts you need.",[4030,4041,4043,4044,4046,4047,4049],{"icon":4032,"label":4042},"Do I have to use all eight sub-recipes?","No. The most minimal hero is ",[462,4045,464],{}," with ",[462,4048,476],{}," for the heading. Add Headline, Description, Actions, Links, Image, and Backdrop only when your design needs them.",[4030,4051,4053,4054,4056],{"icon":4032,"label":4052},"Why doesn't the PageHero have a solid/outline/soft/subtle variant axis?","Hero sections are layout-driven, not surface-driven. The visual style of a hero is dominated by orientation (stacked vs split), alignment (left vs center), and the backdrop treatment — not by a four-way background-and-border style gradation that suits smaller components like badges or buttons. Skipping the ",[462,4055,1713],{}," axis keeps the API focused on the choices that actually shape a hero.",[4030,4058,4060,4061,4063,4064,4066,4067,4069],{"icon":4032,"label":4059},"Where does the eyebrow / 'What's new' tag come from?","The PageHero family does not ship a dedicated eyebrow recipe. Use the existing ",[498,4062,247],{"href":2695}," recipe and place it inside the ",[462,4065,2341],{}," above the ",[462,4068,2360],{},". This avoids duplicating Badge's full color and variant matrix in a single-purpose sub-recipe.",[4030,4071,4073,4097],{"icon":4032,"label":4072},"How do compound variants work in the PageHero recipe?",[454,4074,4075,4076,4078,4079,4078,4081,4083,4084,477,4087,4089,4090,1669,4092,1957,4094,4096],{},"The container exposes seven compound variants: three for color (one per ",[462,4077,1482],{},"/",[462,4080,1492],{},[462,4082,540],{},", setting ",[462,4085,4086],{},"background",[462,4088,1666],{}," plus dark-mode overrides) and four for orientation × alignment (resolving ",[462,4091,2080],{},[462,4093,2083],{},[462,4095,2086],{}," cleanly across both layout modes). Sub-recipes use no compound variants — their axes compose orthogonally.",[454,4098,4099],{},[498,4100,4102],{"href":4101},"/docs/api/recipes#compound-variants","Learn more about compound variants →",[4030,4104,4106,4107,4109,4110,4112,4113,4116,4117,4119],{"icon":4032,"label":4105},"How does filtering affect compound variants?","When you use the ",[462,4108,3153],{}," option, compound variants that reference filtered-out values are automatically removed. For example, filtering ",[462,4111,1677],{}," to only ",[462,4114,4115],{},"['vertical']"," excludes the two ",[462,4118,1557],{}," orientation-alignment compound variants. Default variants are also adjusted if they reference a removed value.",[4030,4121,4123,4124,1669,4126,1669,4128,1957,4130,4132,4133,4136],{"icon":4032,"label":4122},"Can I use the PageHero recipe without the design tokens preset?","The PageHero recipes reference design tokens like ",[462,4125,2015],{},[462,4127,2233],{},[462,4129,2243],{},[462,4131,2246],{}," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[462,4134,4135],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4138,4139,4140],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":590,"searchDepth":631,"depth":631,"links":4142},[4143,4144,4145,4146,4149,4155,4158,4159,4164,4165,4169,4179,4180],{"id":452,"depth":631,"text":78},{"id":511,"depth":631,"text":512},{"id":562,"depth":631,"text":563},{"id":1949,"depth":631,"text":195,"children":4147},[4148],{"id":1980,"depth":639,"text":1981},{"id":2057,"depth":631,"text":2058,"children":4150},[4151,4152,4153,4154],{"id":2090,"depth":639,"text":2091},{"id":2100,"depth":639,"text":2101},{"id":2110,"depth":639,"text":2111},{"id":2120,"depth":639,"text":2121},{"id":2130,"depth":631,"text":2131,"children":4156},[4157],{"id":2150,"depth":639,"text":2151},{"id":2292,"depth":631,"text":2293},{"id":2719,"depth":631,"text":2443,"children":4160},[4161,4162,4163],{"id":1721,"depth":639,"text":2728},{"id":2737,"depth":639,"text":2738},{"id":2759,"depth":639,"text":2760},{"id":2779,"depth":631,"text":339},{"id":2845,"depth":631,"text":2846,"children":4166},[4167,4168],{"id":2849,"depth":639,"text":2850},{"id":3146,"depth":639,"text":3147},{"id":3323,"depth":631,"text":73,"children":4170},[4171,4172,4173,4174,4175,4176,4177,4178],{"id":3326,"depth":639,"text":3329},{"id":3557,"depth":639,"text":3560},{"id":3618,"depth":639,"text":3621},{"id":3666,"depth":639,"text":3669},{"id":3714,"depth":639,"text":3717},{"id":3775,"depth":639,"text":3778},{"id":3839,"depth":639,"text":3842},{"id":3888,"depth":639,"text":3891},{"id":3945,"depth":631,"text":3946},{"id":4024,"depth":631,"text":4025},"A multi-part landing-section primitive composed of a section container plus headline, title, description, actions, links, image, and backdrop sub-recipes. Supports light, dark, and neutral colors with size, orientation, and alignment axes.",null,{},{"title":319,"description":4181},{"loc":320},"AJuEAG4bPj5s1AgHjSx3e-jVziF_Ye8-YlKgsLysMck",[4188,4190],{"title":315,"path":316,"stem":317,"description":4189,"children":-1},"A flexible layout primitive that places visual content alongside text content. Built for comments, social posts, list items, and any UI where a fixed-size visual sits next to flowing text.",{"title":323,"path":324,"stem":325,"description":4191,"children":-1},"A navigation component for moving between pages of content. Supports horizontal and vertical orientations, three colors, six visual styles, three sizes, and active/disabled states through a three-part recipe system.",1778140988049]