MarketingContact

Contact section: heading + supporting copy + optional details column + caller-supplied form. 'split' (default) renders details left and form right on ≥lg; 'stacked' is single-column. Presentational and theme-driven.

Installation

pnpm

pnpm dlx @hex-core/cli add marketing-contact

Usage

tsx

import { MarketingContact } from "@/components/ui/marketing-contact"

Split contact section

Contact details on the left, form on the right.

tsx

import { MarketingContact, Label, Input, Textarea, Button } from "@hex-core/components";

<MarketingContact
  title="Get in touch"
  description="We'll get back to you within one business day."
  details={
    <dl className="flex flex-col gap-2">
      <div><dt className="text-foreground font-medium">Email</dt><dd>hello@acme.com</dd></div>
      <div><dt className="text-foreground font-medium">Phone</dt><dd>+1 555 0100</dd></div>
    </dl>
  }
  form={
    <form className="flex flex-col gap-4">
      <div className="flex flex-col gap-2"><Label htmlFor="name">Name</Label><Input id="name" /></div>
      <div className="flex flex-col gap-2"><Label htmlFor="message">Message</Label><Textarea id="message" /></div>
      <Button type="submit" className="self-start">Send</Button>
    </form>
  }
/>

Variant values

layoutComposition.

Value	Description
`split`default	Details left, form right on ≥lg.
`stacked`	Single column, stacked.

API Reference

Prop	Type	Default	Description
`title`required	`ReactNode`	—	Section heading.
`form`required	`ReactNode`	—	The contact form — pass your own <form> with fields + submit.
`eyebrow`	`ReactNode`	—	Section eyebrow above the title.
`description`	`ReactNode`	—	Supporting subcopy below the title.
`details`	`ReactNode`	—	Optional left-column content (address / email / phone / hours) for the split layout.
`layout`	`enum`	split	'split' for details left + form right on ≥lg, 'stacked' for single-column.
`className`	`string`	—	Additional classes applied to the root <section>.

AI Guidance

When to use

Use on Contact / Support pages. 'split' when you have real contact details to show beside the form; 'stacked' for form-only pages.

When not to use

Don't use for newsletter signup (use marketing-newsletter) or sign-in (use auth-sign-in-split). Don't dump every channel — pick 2–4 most-useful.

Common mistakes

Inputs without <Label htmlFor> — the block is layout; pairing labels is the form's job.
Hard-coding mailto:/tel: in details copy without making them links — visitors expect to click.
Submitting via a button's onClick instead of <form onSubmit> — breaks keyboard Enter.

Accessibility

Section title is <h2>. Details and form columns are siblings, so screen readers reach details first in source order — put the most important channel first. Form labels and submit handling are your responsibility.

Related components

Token budget: 1141

Verified against @hex-core/components@1.14.0

Edit this page on GitHub