Marketing blocks
Contact sections
Contact sections built from Input, Textarea, Checkbox and Button: form with details, centered form, contact cards, map and image. Figma: Contact sections and Contact page header.
import
{ ContactSection, type ContactMethod, type ContactLayout } from "@pepulux/ui"Split
Contact us
Get in touch
We'd love to hear from you. Our friendly team is always here to chat.
Centered (muted)
Contact our team
Got any questions? We'd love to hear from you.
Cards
Chat to our friendly team
Our friendly team is here to help.
Office
Come say hello at our office.
Phone
Mon–Fri from 8am to 5pm.
Map
Visit our office
Drop by or send us a message.
Image
Let's talk
Tell us about your project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "split" | "centered" | "cards" | "map" | "image" | "split" | Figma layout |
| tone | "light" | "muted" | "brand" | "light" | Background tone — Figma Light / Muted / Brand |
| methods | ContactMethod[] | — | { icon; title; description; value; href? } |
| onSubmit | (values: ContactFormValues) => void | — | Form submit handler |
| submitLabel | string | "Send message" | Submit button label |
| image | string | — | Photo for the image layout |