11.08 · Diagrams / cn-pair

<cn-pair>

Two systems linked by an orange arrow. The integration-page headline diagram: name on the left, name on the right, and the bridge that connects them in the middle.

Canonical · the xWiki integration banner

<cn-pair
  left-label="Open Register"
  left-caption="nextcloud.example"
  right-label="xWiki"
  right-caption="xwiki.example"
  right-color="cobalt-700"
  bridge-label="OpenConnector integration">
  <svg slot="left-icon" ... />
  <svg slot="right-icon" ... />
</cn-pair>

Brand-pair · Nextcloud workspace ↔ Common Ground+

One-way · arrow="→"

API · slots

Slot	Purpose
`left-icon`	SVG glyph for the left hex. 24×24 viewBox, `currentColor` for stroke/fill so the icon inherits the hex ink.
`right-icon`	SVG glyph for the right hex. Same rules as left.

API · attributes

Attribute	Values	Default	Purpose
`left-label`	string	—	Strong name under the left hex.
`left-caption`	string	—	Optional Plex Mono code-style caption (e.g. domain or slug).
`left-color`	`cobalt` · `cobalt-700` · `cobalt-900` · `nextcloud` · `commonground` · `mint` · `lavender`	`cobalt`	Hex fill on the left side. Use a sub-brand fill only for that brand's surface.
`right-label`	string	—	Strong name under the right hex.
`right-caption`	string	—	Right caption.
`right-color`	see left-color	`cobalt-700`	Hex fill on the right side.
`bridge-label`	string	—	Text directly under the arrow. Names the integration / bridge.
`arrow`	any glyph (`↔` · `→` · `⇄`)	`↔`	The bridge arrow. Always KNVB orange; the component owns the one-orange-per-scene budget.

Why we built it this way

Pair · the integration headline

The orange arrow is the brand element

Every Conduction integration page opened with the same pattern, hand-rolled in each docs site: two hexes, a bridge, a centred orange arrow. cn-pair encodes that pattern so the brand rules can't drift.

One orange per scene, enforced. The arrow is always KNVB orange. The component owns the page's orange budget; place a second <cn-pair> or a <cn-hex color="orange"> on the same screen and the brand rule breaks. The component cannot stop you, but the static-kit specimen page documents the limit.
Attributes for strings, slots for SVG. Labels and captions are strings; passing them as attributes keeps the markup tight. Icons need DOM (gradients, multi-path, etc.), so they go through slots.
Sub-brand colours auto-correct ink. left-color="commonground" flips ink to cobalt-900 (WCAG AA on yellow); every other supported fill keeps white ink.
Stacks below 700px. Grid collapses to a single column on phones; the arrow rotates 90° so the visual flow keeps reading top-to-bottom.
No nested cn-hex. The hex inside cn-pair is rendered by the component, not a slotted cn-hex. This keeps the pair's two hexes in lockstep with the panel — same size, same vertical alignment, no surprise from a slotted element that decides to grow.