ccm-section
Props
NameTypeDefaultDescription
sizeStringlControls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)backgroundColorStringtransparentCSS custom property name for background colorfullWidthBoolean-Controls container centering behaviorSlots
defaultMain content area
Examples
Basic Usage
<ccm-section>
<h2>Section Content</h2>
<p>This is the default section styling.</p>
</ccm-section>
With Background and Size
<ccm-section size="xl" background-color="color-primary-tint-20">
<h2>Large Section with Background</h2>
<p>This section has extra padding and a colored background.</p>
</ccm-section>
Full Width
<ccm-section full-width>
<div class="custom-layout">
<p>This section doesn't apply centering constraints.</p>
</div>
</ccm-section>