# Contact pages

> Whole contact pages: a contact form, offices on a map, ways to reach the team and store addresses, between a header and a footer.

URL: https://apogee.avaui.dev/docs/contact-pages
Last updated: 2026-10-16

Whole contact pages: a contact form, offices on a map, ways to reach the team and store addresses, between a header and a footer.

Last updated October 16, 2026

Each example is a whole contact page stacked from blocks: a header navigation, an opening block from [Contact sections](https://apogee.avaui.dev/docs/contact-sections) that holds the page’s `h1`, then more ways to get in touch, a call to action or a newsletter signup before the footer. Two pages are a form on its own, for a focused contact screen. Adding a page copies its blocks too. The page renders its own header, `<main>` and footer, so give it a layout without a `<main>`.

```sh
npx @ava-ui/apogee add contact/contact-page-01
```

```astro
---
// src/pages/contact.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/contact/ContactPage01.astro'
---

<Layout title="Contact">
  <Page />
</Layout>
```

[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-01.dark.webp)

Contact page 01A heading and contact form beside a photo (the photo shows from lg). Then a footer.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-01)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-02.dark.webp)

Contact page 02A photo beside a heading, an email link and a contact form with a services checklist. Then a footer.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-02)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-03.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-03.dark.webp)

Contact page 03A heading and contact form beside a map (the map shows from lg). Then office addresses, contact cards, a call to action card and a footer on dark.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-03)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-04.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-04.dark.webp)

Contact page 04A centred heading, a wide map and three office cards with their hours and addresses. Then contact cards and a footer.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-04)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-05.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-05.dark.webp)

Contact page 05A centred heading, a world map with office pins (from lg) and three contact cards. Then office addresses on the brand colour, a contact form, a newsletter signup and a footer.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-05)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-06.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-06.dark.webp)

Contact page 06A centred heading over three contact methods with icons and links. Then a contact form, a newsletter signup and a footer on dark.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-06)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-07.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-07.dark.webp)

Contact page 07A heading over four contact cards, a map of offices, a contact form and a footer.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-07)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-08.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-08.dark.webp)

Contact page 08A centred heading over a contact form, ways to get in touch, a call to action card and a footer on the brand colour.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-08)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-09.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-09.dark.webp)

Contact page 09A heading, an email link and a contact form with a services checklist beside a photo.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-09)[

![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-10.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-10.dark.webp)

Contact page 10A brand-colour sidebar with contact methods and links (from lg) beside a form with a services checklist.

](https://apogee.avaui.dev/docs/contact-pages/contact-page-10)

## 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.

](https://apogee.avaui.dev/docs/contact-form)[

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

](https://apogee.avaui.dev/docs/contact-method)[

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

](https://apogee.avaui.dev/docs/sections/contact)