# Contact

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

URL: https://apogee.avaui.dev/docs/sections/contact
Last updated: 2026-10-15

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

Last updated October 15, 2026

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

## Add

```sh
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

```astro
<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.