C&C Docs
Log in

cnc-panel

A titled container with a header, a body and a footer. Its one surprise is that the WHOLE header — including anything you slot into it — renders only when title is set.

Quick start

Give it a title and put the content in the default slot.

Account settings

The default slot is the panel body.

Last saved a moment ago. 
<cnc-panel title="Account settings">
  <p>The default slot is the panel body.</p>
  <cnc-button slot="title-actions" kind="soft" size="sm">Edit</cnc-button>
  <div slot="footer">Last saved a moment ago.</div>
</cnc-panel>

Usage guidance

Always set title if you want a header. The gating is on the property, not on whether the slots have content, so a header slot without a title is the one way to lose markup silently here.

Use well for nesting, not for emphasis. It reads as a recess inside a surface, so a well at the top level of a page looks like a mistake rather than a highlight — cnc-alert is the widget for drawing attention.

A panel is layout only: no collapsing, no events, no state. Reach for cnc-details or cnc-accordion when the section should open and close, and cnc-fieldset when it groups form fields.

← Back to Widgets