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