Contact

A message form, with or without a column of contact details.

Last updated

Contact

Get in touch

We answer within a working day.

Show code
<Contact heading="Get in touch" details={[{ icon: 'mail' | 'phone' | 'map-pin', label, value, href? }, …]} action="/api/contact" method="post" />

Add

npx @ava-ui/apogee add contact

API

Prop Type Default Category Description
eyebrow, heading, description string — content heading required.
details { icon, label, value, href? }[] [] content Shown in form-details. Icons: mail, phone, map-pin.
action, method string, 'get' | 'post' —, 'post' content Passed to the form.
submitLabel string 'Send message' content
labels { name?, email?, message? } English content Field labels.
layout 'form-details' | 'form-only' 'form-details' layout
background, spacing, headingLevel, id layout As on every section.

Layouts

Say hello

Name, email and a message.

Show code
<Contact layout="form-only" heading="Say hello" action="#" />

Accessibility

  • Plain HTML form: labelled fields, required validation, submits without JS.
  • Detail values with href are links; icons are decorative.