Form card, Conduction Design System

FormCard · light + dark variant lead-capture panel

React / MDX usage

Mount in MDX as `<FormCard/>`

Lead-capture panel with mono-uppercase eyebrow + h3 + lede + form fields + primary submit button. Two visual variants:

Default — white card on light surface; cobalt primary button. Used for the standard contact form.
variant="dark" — cobalt-900 card with translucent inputs; white-on-cobalt primary button. Used for high-stakes / commitment forms (partner application, demo request).

Import & example

import {FormCard, FieldRow, Field} from '@conduction/docusaurus-preset/components';

<FormCard
  eyebrow="Talk to us"
  title="Drop us a line."
  lede="For everything that isn't a GitHub issue..."
  submitLabel="Send"
  onSubmit={handleSubmit}
>
  <FieldRow>
    <Field label="First name" name="firstName" />
    <Field label="Last name"  name="lastName"  />
  </FieldRow>
  <Field label="Work email" name="email" type="email" />
  <Field label="Message" name="message" multiline rows={3} />
</FormCard>

Props

eyebrow mono-uppercase label rendered with a KNVB-orange hex bullet
title sentence-case h3
lede 1–2-sentence intro under the title
variant default / dark (default default)
submitLabel button text (default Send)
onSubmit form submit handler
children <Field/> or <FieldRow/> nodes

Drop us a line.

Become a partner.