cnc-fieldset-spaced
The two-column settings layout: a 300px column carrying the section's label and description, and
the fields beside it. Same job as cnc-fieldset, different shape — this one
puts the explanation next to the fields rather than above them, and does not collapse.
Quick start
Give it a label and a description, and put the fields in the default
slot. Unlike cnc-fieldset, the body is open by default — there is nothing to
switch on.
<cnc-fieldset-spaced
label="Profile"
description="This information appears on your public profile."
>
<cnc-input name="display" label="Display name"></cnc-input>
</cnc-fieldset-spaced>A gap worth knowing about
line
is declared and does nothing. The stylesheet carries the rule under
.fieldset-spaced.has-line, but the template never writes that class, so the
property has no effect at any value. Stacked sections are separated by their own spacing
instead; if you need a rule, draw it on a wrapper. This page documents the property rather than
demoing it, because there is nothing to demo.
Usage guidance
Use it for settings and preference pages, where every section needs a sentence of explanation and the reader is scanning the labels to find the one they came for. The fixed left column is what makes that scan work, so keep labels short and put the detail in the description.
For a data-entry form — many fields, little explanation, sections that collapse —
use cnc-fieldset: it puts its label above a multi-column field grid, which is the
denser shape and the one that can be shut.