[{"data":1,"prerenderedAt":205},["ShallowReactive",2],{"component-ccm-card":3},{"id":4,"title":5,"body":6,"category":155,"description":156,"examples":157,"extension":170,"meta":171,"navigation":173,"order":174,"path":175,"props":176,"seo":196,"slots":197,"stem":203,"__hash__":204},"components\u002Fcomponents\u002Fccm-card.md","ccm-card",{"type":7,"value":8,"toc":144},"minimark",[9,21,26,29,46,51,54,68,72,75,89,93,114,118],[10,11,12,13,16,17,20],"p",{},"The ",[14,15,5],"code",{}," component is a flexible linking component that adapts its layout based on screen size. It's built on top of ",[14,18,19],{},"nuxt-link"," for optimal routing performance and supports both image and text-only configurations.",[22,23,25],"h2",{"id":24},"responsive-behavior","Responsive Behavior",[10,27,28],{},"The card automatically adapts its layout for different screen sizes:",[30,31,32,40],"ul",{},[33,34,35,39],"li",{},[36,37,38],"strong",{},"Mobile (\u003C 768px)",": Stacked layout with image on top, text below",[33,41,42,45],{},[36,43,44],{},"Desktop (≥ 768px)",": Side-by-side layout with alternating image positions",[47,48,50],"h3",{"id":49},"desktop-layout-pattern","Desktop Layout Pattern",[10,52,53],{},"On desktop screens, cards automatically alternate their layout:",[30,55,56,62],{},[33,57,58,61],{},[36,59,60],{},"Odd cards",": Image left, text right",[33,63,64,67],{},[36,65,66],{},"Even cards",": Image right, text left (with right-aligned text)",[22,69,71],{"id":70},"image-handling","Image Handling",[10,73,74],{},"When no image is provided, the component displays a colored background area maintaining the same aspect ratios:",[30,76,77,83],{},[33,78,79,82],{},[36,80,81],{},"Mobile",": 16:9 aspect ratio",[33,84,85,88],{},[36,86,87],{},"Desktop",": 1:1 aspect ratio",[22,90,92],{"id":91},"accessibility-features","Accessibility Features",[30,94,95,101,108,111],{},[33,96,97,98,100],{},"Uses semantic ",[14,99,19],{}," for proper navigation",[33,102,103,104,107],{},"Includes ",[14,105,106],{},"aria-label"," with the provided title",[33,109,110],{},"Maintains proper heading hierarchy within card content",[33,112,113],{},"Keyboard navigation support through native link behavior",[22,115,117],{"id":116},"design-system-integration","Design System Integration",[30,119,120,126,132,138],{},[33,121,122,125],{},[36,123,124],{},"Spacing",": Uses design token system for consistent padding",[33,127,128,131],{},[36,129,130],{},"Colors",": Integrates with CSS custom property color tokens",[33,133,134,137],{},[36,135,136],{},"Typography",": Inherits text styling from parent contexts",[33,139,140,143],{},[36,141,142],{},"Layout",": Responsive grid-friendly sizing",{"title":145,"searchDepth":146,"depth":146,"links":147},"",2,[148,152,153,154],{"id":24,"depth":146,"text":25,"children":149},[150],{"id":49,"depth":151,"text":50},3,{"id":70,"depth":146,"text":71},{"id":91,"depth":146,"text":92},{"id":116,"depth":146,"text":117},"Content","The ccm-card component is a flexible linking component that adapts its layout based on screen size. It's built on top of nuxt-link for optimal routing performance and supports both image and text-only configurations.",[158,161,164,167],{"title":159,"code":160},"Text-only Card","\u003Cccm-card to=\"\u002Fabout\" title=\"About Us\">\n  \u003Ch3>About Our Company\u003C\u002Fh3>\n  \u003Cp>Learn more about our mission and values.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n",{"title":162,"code":163},"Card with Image","\u003Cccm-card \n  to=\"\u002Fservices\" \n  title=\"Our Services\"\n  image=\"\u002Fimages\u002Fservices-hero.jpg\"\n>\n  \u003Ch3>What We Do\u003C\u002Fh3>\n  \u003Cp>Discover our comprehensive service offerings.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n",{"title":165,"code":166},"Custom Styling","\u003Cccm-card \n  to=\"\u002Fcontact\" \n  title=\"Contact Us\"\n  size=\"xl\"\n  background-color=\"color-secondary-tint-20\"\n>\n  \u003Ch3>Get In Touch\u003C\u002Fh3>\n  \u003Cp>Ready to start your project? Let's talk.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n",{"title":168,"code":169},"Custom Image Slot","\u003Cccm-card to=\"\u002Fportfolio\" title=\"Portfolio\">\n  \u003Ctemplate #image>\n    \u003Cdiv class=\"custom-image-area\">\n      \u003Cicon name=\"portfolio\" size=\"large\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n  \u003Ch3>Our Work\u003C\u002Fh3>\n  \u003Cp>Explore our latest projects and case studies.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n","md",{"tagline":172},"Versatile linking card component with responsive layout and image support",true,null,"\u002Fcomponents\u002Fccm-card",[177,181,184,188,192],{"name":178,"type":179,"required":173,"description":180},"to","String","Link destination (Nuxt router path)",{"name":182,"type":179,"required":173,"description":183},"title","Card title for accessibility (used in aria-label)",{"name":185,"type":179,"required":186,"description":187},"image",false,"Optional image URL",{"name":189,"type":179,"default":190,"description":191},"size","l","Controls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)",{"name":193,"type":179,"default":194,"description":195},"backgroundColor","color-primary-tint-20","CSS custom property name for background color",{"title":5,"description":156},[198,201],{"name":199,"description":200},"default","Main card content area",{"name":185,"description":202},"Custom image content (overrides default image display)","components\u002Fccm-card","N701DpUdP8CscKMkKTjM2R8sNRCip8Cu6oEEH4aHuM0",1791043162425]