[{"data":1,"prerenderedAt":173},["ShallowReactive",2],{"component-ccm-section":3},{"id":4,"title":5,"body":6,"category":101,"description":134,"examples":135,"extension":145,"meta":146,"navigation":148,"order":149,"path":150,"props":151,"seo":166,"slots":167,"stem":171,"__hash__":172},"components\u002Fcomponents\u002Fccm-section.md","ccm-section",{"type":7,"value":8,"toc":129},"minimark",[9,17,22,29,65,68,72,107,111,125],[10,11,12,13,16],"p",{},"The ",[14,15,5],"code",{}," component is the foundational layout building block that provides consistent vertical spacing and optional background styling. It follows the programmatic CSS custom property pattern for flexible theming.",[18,19,21],"h2",{"id":20},"implementation-details","Implementation Details",[10,23,24,25,28],{},"The component uses the ",[14,26,27],{},":style"," binding to dynamically set CSS custom properties:",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-vue shiki shiki-themes github-light github-dark",":style=\"{\n  '--_ccm-section-background-color': `var(--${backgroundColor})`,\n  '--_ccm-section-padding-block': `var(--space-${size})`\n}\"\n","vue","",[14,37,38,47,53,59],{"__ignoreMap":35},[39,40,43],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"sVt8B",":style=\"{\n",[39,48,50],{"class":41,"line":49},2,[39,51,52],{"class":45},"  '--_ccm-section-background-color': `var(--${backgroundColor})`,\n",[39,54,56],{"class":41,"line":55},3,[39,57,58],{"class":45},"  '--_ccm-section-padding-block': `var(--space-${size})`\n",[39,60,62],{"class":41,"line":61},4,[39,63,64],{"class":45},"}\"\n",[10,66,67],{},"This approach eliminates the need for CSS attribute selectors while maintaining full flexibility over spacing and theming.",[18,69,71],{"id":70},"design-system-integration","Design System Integration",[73,74,75,87,97],"ul",{},[76,77,78,82,83,86],"li",{},[79,80,81],"strong",{},"Spacing",": Integrates with the design token system using ",[14,84,85],{},"--space-*"," custom properties",[76,88,89,92,93,96],{},[79,90,91],{},"Colors",": References color tokens via CSS custom properties (e.g., ",[14,94,95],{},"color-primary-tint-20",")",[76,98,99,102,103,106],{},[79,100,101],{},"Layout",": Provides optional centering via the ",[14,104,105],{},"center"," utility class",[18,108,110],{"id":109},"best-practices","Best Practices",[73,112,113,116,119,122],{},[76,114,115],{},"Use as the primary wrapper for page content sections",[76,117,118],{},"Combine different sizes to create visual hierarchy",[76,120,121],{},"Leverage background colors sparingly for emphasis",[76,123,124],{},"Consider full-width usage for custom layouts that need to break out of the container",[126,127,128],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":35,"searchDepth":49,"depth":49,"links":130},[131,132,133],{"id":20,"depth":49,"text":21},{"id":70,"depth":49,"text":71},{"id":109,"depth":49,"text":110},"The ccm-section component is the foundational layout building block that provides consistent vertical spacing and optional background styling. It follows the programmatic CSS custom property pattern for flexible theming.",[136,139,142],{"title":137,"code":138},"Basic Usage","\u003Cccm-section>\n  \u003Ch2>Section Content\u003C\u002Fh2>\n  \u003Cp>This is the default section styling.\u003C\u002Fp>\n\u003C\u002Fccm-section>\n",{"title":140,"code":141},"With Background and Size","\u003Cccm-section size=\"xl\" background-color=\"color-primary-tint-20\">\n  \u003Ch2>Large Section with Background\u003C\u002Fh2>\n  \u003Cp>This section has extra padding and a colored background.\u003C\u002Fp>\n\u003C\u002Fccm-section>\n",{"title":143,"code":144},"Full Width","\u003Cccm-section full-width>\n  \u003Cdiv class=\"custom-layout\">\n    \u003Cp>This section doesn't apply centering constraints.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fccm-section>\n","md",{"tagline":147},"Foundational layout component with consistent spacing and theming",true,null,"\u002Fcomponents\u002Fccm-section",[152,157,161],{"name":153,"type":154,"default":155,"description":156},"size","String","l","Controls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)",{"name":158,"type":154,"default":159,"description":160},"backgroundColor","transparent","CSS custom property name for background color",{"name":162,"type":163,"default":164,"description":165},"fullWidth","Boolean",false,"Controls container centering behavior",{"title":5,"description":134},[168],{"name":169,"description":170},"default","Main content area","components\u002Fccm-section","TgesECEcwnJxxXSvJe5bwec_Xiyc2tpuLVzj_8tYSvM",1791043162416]