Contact strip, Conduction Design System

Design system / Components / Contact strip

ContactStrip · bottom-of-page channels block on cobalt-900

Talk to us.

The team picks up the phone during NL office hours. For everything else, we're a GitHub issue away.

codeberg.org/Conduction→ linkedin.com/company/conduction→ info@conduction.nl→ +31 (0)85 303 68 40→ Lauriergracht 14h, 1016 RL Amsterdam→

React / MDX usage

Mount in MDX as `<ContactStrip/>`

Bottom-of-page contact block on cobalt-900. Two columns: title + lede on the left, a list of icon-prefixed channels on the right (GitHub, LinkedIn, mail, phone, address). Each channel is a translucent-fill row that brightens on hover. Used on /about and any other consumer-side page that needs a closing "talk to us" section.

Import & example

import {ContactStrip} from '@conduction/docusaurus-preset/components';

<ContactStrip
  title="Talk to us."
  lede="The team picks up the phone during NL office hours. For everything else, we're a GitHub issue away."
  channels={[
    {icon: 'github',   href: 'https://codeberg.org/Conduction',          label: 'codeberg.org/Conduction'},
    {icon: 'linkedin', href: 'https://www.linkedin.com/company/conduction/', label: 'linkedin.com/company/conduction'},
    {icon: 'mail',     href: 'mailto:info@conduction.nl',                label: 'info@conduction.nl'},
    {icon: 'phone',    href: 'tel:+31853036840',                         label: '+31 (0)85 303 68 40'},
    {icon: 'map',      href: 'https://maps.google.com/?q=Lauriergracht+14h+Amsterdam', label: 'Lauriergracht 14h, 1016 RL Amsterdam'},
  ]}
/>

Props

title h2 headline (sentence case, period at the end)
lede one-paragraph subtitle
channels array of {icon, href, label}. Built-in icons: github, linkedin, mail, phone, map; pass a custom SVG via icon=<svg .../> for anything else.