# ContactMethod

> One way to reach you; an icon, a title, a line about it and the address, number or link, plain or on a card.

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

One way to reach you; an icon, a title, a line about it and the address, number or link, plain or on a card.

Last updated October 15, 2026

```astro
<ContactMethod title="Email" description="Our friendly team is here to help." link={{ label: 'hi@example.com', href: 'mailto:hi@example.com' }}>
<FeaturedIcon slot="icon" theme="outline" color="neutral"><Mail /></FeaturedIcon>
</ContactMethod>
```

## Add

```sh
npx @ava-ui/apogee add contact-method
```

Pulls in Heading and Link. Bring your own icon (a FeaturedIcon or a bare Lucide icon).

## Usage

```astro
<ContactMethod title="Phone" description="Mon–Fri from 8am to 5pm." link={{ label: '+1 (555) 000-0000', href: 'tel:+15550000000' }} variant="card">
  <FeaturedIcon slot="icon" theme="outline" color="neutral"><Phone /></FeaturedIcon>
</ContactMethod>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Required. |
| `description` | `string` | — | A line about it. |
| `link` | `{ label, href }` | — | The address, email or number, as a link (`mailto:`, `tel:` or a page). |
| `variant` | `'plain' \| 'card'` | `'plain'` | `card` sets it on a tinted card. |
| `align` | `'start' \| 'center'` | `'start'` | `center` stacks it centred. |
| `inline` | `boolean` | `false` | The icon beside the text instead of above it (with `start`). |
| `headingLevel` | `2 \| 3 \| 4 \| 5` | `3` | The title’s heading level. |
| `class` | `string` | — | Extra classes on the root, merged last. |

## Variants

`variant="card"`, `align="center"` and `inline`:

```astro
<ContactMethod variant="card" … />
<ContactMethod align="center" … />
<ContactMethod inline … />
```

## States

-   **On the brand colour** — the line and the link take the on-colour; the link stays underlined so it still reads as a link.

## Examples

Every contact layout: [Contact sections](https://apogee.avaui.dev/docs/contact-sections).

## Accessibility

-   The title is a heading (`headingLevel`), so a page of contact methods has a scannable outline.
-   The link names where it goes: the address itself, the email, the number.
-   The icon is decorative; FeaturedIcon hides it from screen readers.

## Tokens

| Token | Used for |
| --- | --- |
| `--foreground-neutral-faded` | The line |
| `--foreground-primary` | The link |
| `--background-neutral-faded` | `card` fill |

## Do / Don’t

-   **Do** show the real address or number as the link text.
-   **Don’t** hide the email behind “Email us”; people copy it.

## Content

-   One line about when or how you answer: “Mon–Fri from 8am to 5pm.”

## Related

[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)[

LinkAn inline text link — for a link that should look like a button, use Button with href instead.

](https://apogee.avaui.dev/docs/link)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)