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.

Last updated

Email

Our friendly team is here to help.

hi@example.com
Show code
<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

npx @ava-ui/apogee add contact-method

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

Usage

<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:

Call us

Mon–Fri from 8am to 5pm.

+1 (555) 000-0000

Email

Our friendly team is here to help.

hi@example.com

Email

Our friendly team is here to help.

hi@example.com
Show code
<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.

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.
LinkAn inline text link — for a link that should look like a button, use Button with href instead.
CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.