Partner cards, Conduction Design System

Digital design- en development-bureau uit Utrecht. Ontwerpt en bouwt klantgerichte digitale producten op Nextcloud voor gemeenten en publieke organisaties.

MyDash OpenCatalogi

Certified

Procolix

Nederlandse hoster en leverancier van proces- en zaakmanagement-software. Officieel Nextcloud-distributeur; certified op DocuDesk en OpenConnector voor procesintegraties bij gemeenten en uitvoeringsorganisaties.

Nextcloud DocuDesk OpenConnector

Strategic

Acato

Nederlandse open-source specialist uit Almere. Bouwt en host Nextcloud-omgevingen voor gemeenten en zorginstellingen, met focus op AVG-compliance en NLDS. Strategisch partner op hosting + stack-implementatie en gezamenlijke roadmap.

OpenRegister OpenCatalogi DocuDesk

React / MDX usage

Mount in MDX as `<PartnerCard/>`

Three tiers (partner, certified, strategic). Pair with <PartnerGrid/> and drop a <BecomePartner/> tile in the trailing slot for the directory CTA.

Import & example

import {PartnerGrid, PartnerCard, BecomePartner} from '@conduction/docusaurus-preset/components';

<PartnerGrid columns={3}>
  <PartnerCard
    href="/partners/acato"
    tier="strategic"
    name="Acato"
    logo="/img/partners/acato.png"
    summary="Nederlandse open-source specialist..."
    apps={['OpenRegister', 'OpenCatalogi', 'DocuDesk']}
  />
  <BecomePartner href="/partners/become" />
</PartnerGrid>

Props

variant full (default) | other
tier partner | certified | strategic
name partner display name
logo img src for the logo plate
summary body text (string or ReactNode, full variant)
why short reason line (other variant)
apps string array of app names
href partner-detail link

Compact variant for "Adjacent specialists" rows

Partner-detail pages list a few adjacent partners at the bottom (the "Adjacent specialists" section). The compact variant uses a 44x50 mini-avatar with a tier-coloured ring, plus a name + why line:

<div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16}}>
  <PartnerCard
    variant="other"
    href="/partners/yard"
    tier="partner"
    name="YARD"
    logo="/img/partners/yard.png"
    why="Digital design + development bureau in Utrecht. Strong on MyDash and OpenCatalogi for citizen-facing surfaces."
  />
  <PartnerCard variant="other" tier="certified" ... />
</div>

The mini-avatar's tier-coloured ring (gold for certified, KNVB orange for strategic) echoes the tier-pill on the full card so visual cues stay consistent.