[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"component-ccm-hero":3},{"id":4,"title":5,"body":6,"category":124,"description":125,"examples":126,"extension":136,"meta":137,"navigation":139,"order":140,"path":141,"props":142,"seo":176,"slots":177,"stem":183,"__hash__":184},"components\u002Fcomponents\u002Fccm-hero.md","ccm-hero",{"type":7,"value":8,"toc":116},"minimark",[9,17,22,25,52,56,78,82,109,113],[10,11,12,13,16],"p",{},"The ",[14,15,5],"code",{}," component provides a flexible header solution with integrated topbar, responsive layout, and customizable content areas. It's designed to work as a standalone header or as part of a larger page layout system.",[18,19,21],"h2",{"id":20},"layout-structure","Layout Structure",[10,23,24],{},"The hero component uses a flexbox layout with three main sections:",[26,27,28,40,46],"ol",{},[29,30,31,35,36,39],"li",{},[32,33,34],"strong",{},"Top",": Contains the ",[14,37,38],{},"ccm-topbar"," component (can be hidden)",[29,41,42,45],{},[32,43,44],{},"Main",": Primary content area with automatic centering",[29,47,48,51],{},[32,49,50],{},"Bottom",": Footer section for additional content (hidden by default)",[18,53,55],{"id":54},"responsive-behavior","Responsive Behavior",[57,58,59,65,71],"ul",{},[29,60,61,64],{},[32,62,63],{},"Default variant",": Maintains a 16\u002F7 aspect ratio for consistent proportions",[29,66,67,70],{},[32,68,69],{},"Minimal variant",": Removes aspect ratio constraints for content-driven sizing",[29,72,73,74,77],{},"All content areas use the ",[14,75,76],{},"center"," utility class for responsive width constraints",[18,79,81],{"id":80},"integration-features","Integration Features",[57,83,84,93,103],{},[29,85,86,89,90,92],{},[32,87,88],{},"Topbar Integration",": Automatically includes ",[14,91,38],{}," unless hidden",[29,94,95,98,99,102],{},[32,96,97],{},"Page Meta",": Works with Nuxt's ",[14,100,101],{},"definePageMeta"," for consistent hero data",[29,104,105,108],{},[32,106,107],{},"Programmatic Styling",": Dynamic CSS custom properties for size and background color",[18,110,112],{"id":111},"advanced-usage","Advanced Usage",[10,114,115],{},"The component supports both default content (brow, title, tagline) and custom content via slots. For complex layouts, use the default slot to provide complete control over the hero content structure.",{"title":117,"searchDepth":118,"depth":118,"links":119},"",2,[120,121,122,123],{"id":20,"depth":118,"text":21},{"id":54,"depth":118,"text":55},{"id":80,"depth":118,"text":81},{"id":111,"depth":118,"text":112},"Layout","The ccm-hero component provides a flexible header solution with integrated topbar, responsive layout, and customizable content areas. It's designed to work as a standalone header or as part of a larger page layout system.",[127,130,133],{"title":128,"code":129},"Default Hero","\u003Cccm-hero \n  brow=\"Welcome\"\n  title=\"Component Library\" \n  tagline=\"Building consistent, scalable interfaces\"\n\u002F>\n",{"title":131,"code":132},"Minimal Variant","\u003Cccm-hero \n  variant=\"minimal\"\n  size=\"m\"\n  background-color=\"color-primary-tint-95\"\n  title=\"Compact Hero\"\n  tagline=\"No aspect ratio constraints\"\n\u002F>\n",{"title":134,"code":135},"Custom Content","\u003Cccm-hero>\n  \u003Cdiv class=\"custom-hero-content\">\n    \u003Ch1>Custom Layout\u003C\u002Fh1>\n    \u003Cp>Use the default slot for complete control over hero content.\u003C\u002Fp>\n    \u003Cbutton>Call to Action\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fccm-hero>\n","md",{"tagline":138},"Flexible hero component with topbar integration and responsive layout",true,null,"\u002Fcomponents\u002Fccm-hero",[143,148,152,156,160,164,168,173],{"name":144,"type":145,"default":146,"description":147},"brow","String","Brow","Small text above the main title",{"name":149,"type":145,"default":150,"description":151},"title","Hero","Main heading text",{"name":153,"type":145,"default":154,"description":155},"tagline","Tagline","Subtitle or descriptive text",{"name":157,"type":145,"default":158,"description":159},"size","l","Controls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)",{"name":161,"type":145,"default":162,"description":163},"backgroundColor","transparent","CSS custom property name for background color",{"name":165,"type":145,"default":166,"description":167},"variant","default","Layout variant ('default' has 16\u002F7 aspect ratio, 'minimal' removes aspect ratio)",{"name":169,"type":170,"default":171,"description":172},"hideTop","Boolean",false,"Hide the top topbar section",{"name":174,"type":170,"default":139,"description":175},"hideBottom","Hide the bottom footer section",{"title":5,"description":125},[178,180],{"name":166,"description":179},"Main hero content (replaces default hgroup if provided)",{"name":181,"description":182},"footer","Bottom section content","components\u002Fccm-hero","5MVlJ3FWYB1_mn8BXCKsPNHbQwVoPxl-iE8va9tbZpU",1791043162409]