Partner sidecard, Conduction Design System

PartnerSidecard · sticky right rail for partner-detail pages

Host partner

Service partner · gold stripe

Certified partner · cobalt fill + gold mark

Mount in MDX as <PartnerSidecard/>

Narrow info rail (~320px) shown to the right of partner-detail body content. Three stacked blocks: tier card (Host plain, Service gold stripe, Certified cobalt fill + gold avatar), Apps they ship, Solutions they deliver. Optional bottom CTA matches the hero's primary CTA so the rail is self-sufficient once the hero scrolls offscreen.

Import & example

import {PartnerSidecard} from '@conduction/docusaurus-preset/components'; import {PARTNERS} from '@site/src/data/partners-catalog'; import {solutionsBySlugs} from '@site/src/data/solutions-catalog'; const partner = PARTNERS.find(p => p.name === 'Acato'); const solutions = solutionsBySlugs(partner.solutions); <PartnerSidecard partner={partner} solutions={solutions} cta={{label: 'Talk to Acato', href: 'mailto:hello@acato.nl'}} />

Props

partner partner record ({name, tier, apps, solutions}); tier is one of host, service, certified

solutions array of resolved solution objects (use solutionsBySlugs(partner.solutions))

cta optional {label, href} for the bottom action button

The card doesn't position-stick itself; the consuming page applies position: sticky to the column wrapper so the rail trails the scrolling body content after the hero.