# Contact sections > Contact forms, ways to reach you, store lists and maps, on the page or the brand colour. URL: https://apogee.avaui.dev/docs/contact-sections Last updated: 2026-10-20 Contact forms, ways to reach you, store lists and maps, on the page or the brand colour. Last updated October 20, 2026 Each example is a block built on [ContactForm](https://apogee.avaui.dev/docs/contact-form), [ContactMethod](https://apogee.avaui.dev/docs/contact-method), [MapEmbed](https://apogee.avaui.dev/docs/map-embed) and [WorldMap](https://apogee.avaui.dev/docs/world-map): 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. ```sh 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](https://apogee.avaui.dev/docs/sections/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. [ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form.dark.webp) Simple formA centred heading over a contact form. ](https://apogee.avaui.dev/docs/contact-sections/simple-form)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__form-and-map.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__form-and-map.dark.webp) Form and mapA heading and contact form beside a map (the map shows from lg). ](https://apogee.avaui.dev/docs/contact-sections/form-and-map)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__form-and-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__form-and-image-01.dark.webp) Form and image 01A heading and contact form beside a photo (the photo shows from lg). ](https://apogee.avaui.dev/docs/contact-sections/form-and-image-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__form-and-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__form-and-image-02.dark.webp) Form and image 02A photo beside a heading, an email link and a contact form with a services checklist. ](https://apogee.avaui.dev/docs/contact-sections/form-and-image-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-links-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-links-01.dark.webp) Simple links 01A centred heading over three contact methods with icons and links. ](https://apogee.avaui.dev/docs/contact-sections/simple-links-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-links-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-links-02.dark.webp) Simple links 02A heading over four contact cards. ](https://apogee.avaui.dev/docs/contact-sections/simple-links-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__map-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__map-01.dark.webp) Map 01A centred heading, a wide map and three office cards with their hours and addresses. ](https://apogee.avaui.dev/docs/contact-sections/map-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__map-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__map-02.dark.webp) Map 02A centred heading, a world map with office pins (from lg) and three contact cards. ](https://apogee.avaui.dev/docs/contact-sections/map-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-01.dark.webp) Simple icons 01Three contact methods with icons and links, no heading. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-02.dark.webp) Simple icons 02A centred heading over three contact methods. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-03.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-03.dark.webp) Simple icons 03A heading over three contact methods aligned to the start edge. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-03)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-04.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-04.dark.webp) Simple icons 04A heading beside six store addresses. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-04)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-form.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-form.dark.webp) Icons and formA heading and four contact methods beside a contact form. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-form)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-01.dark.webp) Icons and map 01A heading and three contact methods in a narrow column beside a map. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-map-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icon-cards-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icon-cards-02.dark.webp) Icon cards 02A heading in one column beside four contact cards. ](https://apogee.avaui.dev/docs/contact-sections/icon-cards-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icon-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icon-cards-01.dark.webp) Icon cards 01A centred heading over four contact cards. ](https://apogee.avaui.dev/docs/contact-sections/icon-cards-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-image.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-image.dark.webp) Icons and imageA heading and two offices on a tinted band, over a wide photo that overlaps its edge. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-image)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__centered-map.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__centered-map.dark.webp) Centred mapA centred heading over store addresses on either side of a map. ](https://apogee.avaui.dev/docs/contact-sections/centered-map)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__features-tabs-map-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__features-tabs-map-01.dark.webp) Features tabs map 01A heading over store tabs, each showing that store on a map. ](https://apogee.avaui.dev/docs/contact-sections/features-tabs-map-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icon-cards-03.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icon-cards-03.dark.webp) Icon cards 03A centred heading and a wide photo over three contact cards. ](https://apogee.avaui.dev/docs/contact-sections/icon-cards-03)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__vector-map-03.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__vector-map-03.dark.webp) Vector map 03A heading over a world map with office pins (from lg) and three contact cards. ](https://apogee.avaui.dev/docs/contact-sections/vector-map-03)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-01.dark.webp) Simple form 01A centred heading over a contact form capped to a readable width. ](https://apogee.avaui.dev/docs/contact-sections/simple-form-01)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__features-tabs-map-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__features-tabs-map-02.dark.webp) Features tabs map 02A heading and store tabs beside the selected store on a map. ](https://apogee.avaui.dev/docs/contact-sections/features-tabs-map-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-03.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-03.dark.webp) Simple form 03A heading, an email link and a contact form with a services checklist beside a photo. ](https://apogee.avaui.dev/docs/contact-sections/simple-form-03)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-04.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-04.dark.webp) Simple form 04A tinted sidebar with contact methods and links (from lg) beside a contact form. ](https://apogee.avaui.dev/docs/contact-sections/simple-form-04)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-02.dark.webp) Simple form 02A portrait photo (from lg) beside a heading and a contact form. ](https://apogee.avaui.dev/docs/contact-sections/simple-form-02)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-01-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-01-brand.dark.webp) Simple icons 01 brandSimple icons 01 on the brand colour: three contact methods, no heading. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-01-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-02-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-02-brand.dark.webp) Simple icons 02 brandSimple icons 02 on the brand colour: a centred heading over three contact methods. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-02-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-04-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-04-brand.dark.webp) Simple icons 04 brandSimple icons 04 on the brand colour: a heading beside six store addresses. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-04-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-form-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-form-brand.dark.webp) Icons and form brandIcons and form on the brand colour: a heading and four contact methods beside a form on a page-coloured panel. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-form-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-05.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-form-05.dark.webp) Simple form 05A brand-colour sidebar with contact methods and links (from lg) beside a form with a services checklist. ](https://apogee.avaui.dev/docs/contact-sections/simple-form-05)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-02-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-02-brand.dark.webp) Icons and map 02 brandA heading and two offices on a brand band, over a map that overlaps its edge. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-map-02-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-image-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-image-brand.dark.webp) Icons and image brandA heading and two offices on a brand band, over a wide photo that overlaps its edge. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-image-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-03-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__simple-icons-03-brand.dark.webp) Simple icons 03 brandSimple icons 03 on the brand colour: a heading over three contact methods. ](https://apogee.avaui.dev/docs/contact-sections/simple-icons-03-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-01-brand.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-01-brand.dark.webp) Icons and map 01 brandIcons and map 01 on the brand colour: a heading and three contact methods beside a map. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-map-01-brand)[ ![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-02.light.webp)![](https://apogee.avaui.dev/thumbs/contact-sections__icons-and-map-02.dark.webp) Icons and map 02A heading and two offices on a grey band, over a map that overlaps its edge. ](https://apogee.avaui.dev/docs/contact-sections/icons-and-map-02) ## 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)[ MapEmbedAn embedded street map centred on a place, with a marker and a link to the full map; no key, no script. ](https://apogee.avaui.dev/docs/map-embed)[ WorldMapA dotted world map with office pins; each pin names its place on hover or focus and links to it on a full map. ](https://apogee.avaui.dev/docs/world-map)