11.06 · Diagrams / cn-side-box

<cn-side-box>

The flat rectangle that flanks a hex-prism diagram. Sources go on the left, consumers go on the right, integrations sit anywhere a prism would feel wrong. The shape difference is the hierarchy: prisms are apps you can install; side-boxes are everything else.

Three sizes · default, default, compact

Spreadsheets

Databases

REST & SOAP

Legacy systems

Citizens / klanten

Public APIs

Embedded portals

Open data feeds

DigiD

eHerkenning

SAML

OAuth 2

+ 3 more

<cn-side-box header="YOUR DATA">
  <div class="row">
    <span class="ic-square">...</span>
    Spreadsheets
  </div>
  ...
</cn-side-box>

API · slots

Slot	Purpose
`(default)`	Rows of icon + label. Each row is a div with a `.ic-square` wrapper for the icon and the label text inline.
`footer`	Optional dashed-divider line at the bottom. Used for "+ N more" overflow lists.

API · attributes

Attribute	Values	Default	Purpose
`header`	any string	(empty)	Uppercase chip label at the top. Use one or two short words; gets letter-spaced and rendered in cobalt-400.
`compact`	boolean (presence)	absent	Tighter row padding and smaller icon squares. Use for dense diagrams or sub-lists.
`width`	`sm` (180px) · `md` (220px) · `lg` (260px), or any CSS length	`md`	Box width. Sized for readable rows; do not stretch beyond `lg`.

Why we built it this way

Pattern · prisms = apps, boxes = everything else

The shape carries the hierarchy

A hex-prism is something you can install. A side-box is something you can't. That visual distinction is non-negotiable; bending it muddies the diagram.

White panel, cobalt-200 stroke, 6px radius. Quiet styling so the eye lands on the prisms first. Side-boxes never compete.
Header chip is a string attribute. Mono-uppercase, cobalt-400, letter-spaced. The component renders it; the user writes one short label.
Rows are slotted content. Use any HTML — typically a square icon wrapper + label text. Five rows max; if you need more, switch to compact with a + N more footer.
Three widths, no full-width. Side-boxes never stretch. They flank prisms and stay narrower than the prism cluster they support.
Cobalt-only ink. No family colours on side-boxes; that visual real estate belongs to the prisms.