Contact sections

Two patterns: a centered contact form, and a responsive grid of office addresses.

Preview

Our offices

Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non.

Los Angeles

4556 Brendan Ferry

Los Angeles, CA 90210

New York

886 Walter Street

New York, NY 12345

Toronto

7363 Cynthia Pass

Toronto, ON N3Y 4H8

London

114 Cobble Lane

London N1 2EF

Contact sales

Aute magna irure deserunt veniam aliqua magna enim voluptate.

React preview

LiveView (HEEx)

alias DesignSystem.UI.ContactSections

<ContactSections.contact_offices offices={[
  %{name: "Los Angeles", lines: ["4556 Brendan Ferry", "Los Angeles, CA 90210"]},
  %{name: "Toronto", lines: ["7363 Cynthia Pass", "Toronto, ON N3Y 4H8"]}
]} />

<ContactSections.contact_form
  id="contact"
  title="Contact sales"
  phx-submit="contact_submit"
/>

React (JSX)

import { ContactForm, ContactOffices } from "../ui/index.mjs"

<ContactOffices
  offices={[
    { name: "Los Angeles", lines: ["4556 Brendan Ferry", "Los Angeles, CA 90210"] },
    { name: "Toronto", lines: ["7363 Cynthia Pass", "Toronto, ON N3Y 4H8"] },
  ]}
/>

<ContactForm
  title="Contact sales"
  onSubmit={(e) => {
    e.preventDefault()
    submitContact(new FormData(e.target))
  }}
/>