Contact sections

Contact forms, ways to reach you, store lists and maps, on the page or the brand colour.

Last updated

Each example is a block built on ContactForm, ContactMethod, MapEmbed and WorldMap: a form beside a map or a photo, ways to reach you as plain items or cards, store lists, a world map of offices, and brand-colour versions.

npx @ava-ui/apogee add contact/simple-form

Each block holds its sample data at the top (methods, stores, pins); replace it with yours, and point the form’s action at your endpoint.

Copy is props

Every block in this family takes the same content props (ContactContent in sections/_shared/contact.ts), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The Contact section takes the same names for the props they share.

  • eyebrow: The small label above the heading.

  • heading: The heading.

  • description: The line under the heading.

  • details: Ways to reach you: email, phone, chat, office.

  • locations: Offices or stores, shown as addresses, tabs or map pins.

  • media: The photo beside or above the content.

  • action: Form target.

  • method

  • submitLabel

  • Pass null to hide an optional part, such as description={null}.

  • Some blocks add props of their own; the top of each block’s file lists them.

Simple formA centred heading over a contact form.
Form and mapA heading and contact form beside a map (the map shows from lg).
Form and image 01A heading and contact form beside a photo (the photo shows from lg).
Form and image 02A photo beside a heading, an email link and a contact form with a services checklist.
Simple links 01A centred heading over three contact methods with icons and links.
Simple links 02A heading over four contact cards.
Map 01A centred heading, a wide map and three office cards with their hours and addresses.
Map 02A centred heading, a world map with office pins (from lg) and three contact cards.
Simple icons 01Three contact methods with icons and links, no heading.
Simple icons 02A centred heading over three contact methods.
Simple icons 03A heading over three contact methods aligned to the start edge.
Simple icons 04A heading beside six store addresses.
Icons and formA heading and four contact methods beside a contact form.
Icons and map 01A heading and three contact methods in a narrow column beside a map.
Icon cards 02A heading in one column beside four contact cards.
Icon cards 01A centred heading over four contact cards.
Icons and imageA heading and two offices on a tinted band, over a wide photo that overlaps its edge.
Centred mapA centred heading over store addresses on either side of a map.
Features tabs map 01A heading over store tabs, each showing that store on a map.
Icon cards 03A centred heading and a wide photo over three contact cards.
Vector map 03A heading over a world map with office pins (from lg) and three contact cards.
Simple form 01A centred heading over a contact form capped to a readable width.
Features tabs map 02A heading and store tabs beside the selected store on a map.
Simple form 03A heading, an email link and a contact form with a services checklist beside a photo.
Simple form 04A tinted sidebar with contact methods and links (from lg) beside a contact form.
Simple form 02A portrait photo (from lg) beside a heading and a contact form.
Simple icons 01 brandSimple icons 01 on the brand colour: three contact methods, no heading.
Simple icons 02 brandSimple icons 02 on the brand colour: a centred heading over three contact methods.
Simple icons 04 brandSimple icons 04 on the brand colour: a heading beside six store addresses.
Icons and form brandIcons and form on the brand colour: a heading and four contact methods beside a form on a page-coloured panel.
Simple form 05A brand-colour sidebar with contact methods and links (from lg) beside a form with a services checklist.
Icons and map 02 brandA heading and two offices on a brand band, over a map that overlaps its edge.
Icons and image brandA heading and two offices on a brand band, over a wide photo that overlaps its edge.
Simple icons 03 brandSimple icons 03 on the brand colour: a heading over three contact methods.
Icons and map 01 brandIcons and map 01 on the brand colour: a heading and three contact methods beside a map.
Icons and map 02A heading and two offices on a grey band, over a map that overlaps its edge.

Related

ContactFormThe message form contact pages share; names, email, an optional phone with a country code, the message, an optional services checklist and a privacy checkbox.
ContactMethodOne way to reach you; an icon, a title, a line about it and the address, number or link, plain or on a card.
MapEmbedAn embedded street map centred on a place, with a marker and a link to the full map; no key, no script.
WorldMapA dotted world map with office pins; each pin names its place on hover or focus and links to it on a full map.