Employee cards, Conduction Design System

Design system / Components / Employee cards

Compact · for team grids

Ruben van der Linde

Founder · Architect

Barry Brands

Engineering · Developer

Marleen Romijn

Founder · Finance · HR · Quality & Security

Detail · for /about/team

Ruben van der Linde

Founder · Architect · Conduction

Built the Technical Core architecture and wires together how OpenRegister, Integriq, and Filinq cooperate. Spends most of his time on schema-design and federated data patterns.

Apps I work on

OpenRegister Integriq Filinq

ruben@conduction.nl github.com/rubenvdlinde fosstodon.org/@Rubenlinde +31 6 4553 6677

Photo · for the public team grid

Ruben

Lateral thinker and the brain behind the tech.

Founder and solution architect. Started Conduction in 2019 to bring open-source thinking to Dutch government IT, now sets the engineering direction across all twelve apps.

Dark · every variant on a cobalt-900 ground

Compact

Ruben van der Linde

Founder · Architect

Barry Brands

Engineering · Developer

Marleen Romijn

Founder · Finance · HR · Quality & Security

Detail

Ruben van der Linde

Founder · Architect · Conduction

Built the Technical Core architecture and wires together how OpenRegister, Integriq, and Filinq cooperate. Spends most of his time on schema-design and federated data patterns.

Apps I work on

OpenRegister Integriq Filinq

ruben@conduction.nl github.com/rubenvdlinde fosstodon.org/@Rubenlinde +31 6 4553 6677

Photo

Ruben

Lateral thinker and the brain behind the tech.

Founder and solution architect. Started Conduction in 2019 to bring open-source thinking to Dutch government IT, now sets the engineering direction across all twelve apps.

React / MDX usage

Mount in MDX as `<EmployeeCard/>`

Three variants from the same component. Pair with <TeamGrid/>. Built-in icon set covers email, github, linkedin so callers don't repeat the SVG markup.

Import & example

import {TeamGrid, EmployeeCard} from '@conduction/docusaurus-preset/components';

<TeamGrid columns={3}>
  <EmployeeCard
    variant="photo"
    name="Ruben van der Linde"
    role="Founder · Architect"
    initials="RV"
    avatarColor="var(--c-blue-cobalt)"
    bio="Built the Technical Core architecture..."
    links={[
      {label: 'GitHub', href: '...', icon: 'github'},
      {label: 'email', href: 'mailto:...', icon: 'mail'},
    ]}
  />
</TeamGrid>

Props

variant compact | photo | detail
name display name
role Plex Mono caption under the name
initials 2-letter avatar fill
photo img src (overrides initials)
avatarColor hex tint when no photo
bio body paragraph (photo & detail)
apps string[] (detail variant)
links array of {label, href, icon}