Contact Section

Section combining contact details, form and/or map.

html

<section class="contact contact--side-by-side">
  <div class="contact__details">
    <h2 class="contact__heading">Get in touch</h2>
    <p><a href="tel:+1 (555) 010-2200" class="contact__link">+1 (555) 010-2200</a></p>
    <p><a href="mailto:hello@studio.example" class="contact__link">hello@studio.example</a></p>
    <form class="contact__form">
      <label for="contact-name">Name</label>
      <input id="contact-name" type="text" name="name" />
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="3"></textarea>
      <button type="submit">Send message</button>
    </form>
  </div>
  <div class="contact__map" role="img" aria-label="Map showing business location"></div>
</section>
<style>
.contact { display: flex; gap: 28px; font: 16px/1.5 system-ui, sans-serif; color: #241430; padding: 24px; background: #FAF7F2; }
.contact--side-by-side { flex-direction: row; }
.contact--stacked { flex-direction: column; }
.contact__details { flex: 1 1 260px; }
.contact__map { flex: 1 1 260px; min-height: 200px; border-radius: 12px; background: repeating-linear-gradient(45deg, #24143012, #24143012 10px, #24143008 10px, #24143008 20px); }
.contact__heading { margin: 0 0 12px; font-size: 24px; font-weight: 700; }
.contact__link { color: #241430; }
.contact__form { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; max-width: 320px; }
.contact__form label { font-size: 13px; font-weight: 600; }
.contact__form input, .contact__form textarea { font: inherit; padding: 8px 10px; border: 1px solid #24143033; border-radius: 8px; }
.contact__form button { align-self: flex-start; margin-top: 6px; background: #241430; color: #FAF7F2; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.contact__form button:hover, .contact__form button:focus-visible { opacity: .9; }
</style>

tailwind

<section class="contact-tw contact-tw--side-by-side flex gap-7 font-sans text-[#241430] p-6 bg-[#FAF7F2]">
  <div class="flex-1 min-w-[260px]">
    <h2 class="m-0 mb-3 text-2xl font-bold">Get in touch</h2>
    <p><a href="tel:+1 (555) 010-2200" class="text-[#241430]">+1 (555) 010-2200</a></p>
    <p><a href="mailto:hello@studio.example" class="text-[#241430]">hello@studio.example</a></p>
    <form class="flex flex-col gap-1.5 mt-4 max-w-[320px]">
      <label for="contact-tw-name" class="text-[13px] font-semibold">Name</label>
      <input id="contact-tw-name" type="text" name="name" class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg" />
      <label for="contact-tw-message" class="text-[13px] font-semibold">Message</label>
      <textarea id="contact-tw-message" name="message" rows="3" class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg"></textarea>
      <button type="submit" class="self-start mt-1.5 bg-[#241430] text-[#FAF7F2] border-0 px-4.5 py-2.5 rounded-lg font-semibold cursor-pointer hover:opacity-90">Send message</button>
    </form>
  </div>
  <div class="flex-1 min-w-[260px] min-h-[200px] rounded-xl" style="background: repeating-linear-gradient(45deg, #24143012, #24143012 10px, #24143008 10px, #24143008 20px);" role="img" aria-label="Map showing business location"></div>
</section>
<style>
.contact-tw--side-by-side { flex-direction: row; }
.contact-tw--stacked { flex-direction: column; }
</style>

react

export function ContactSection({
  heading = "Get in touch",
  phone = "+1 (555) 010-2200",
  email = "hello@studio.example",
  layout = "side-by-side",
  showMap = true,
}) {
  return (
    <section style={{ display: "flex", gap: 28, flexDirection: layout === "stacked" ? "column" : "row",
      font: "16px/1.5 system-ui, sans-serif", color: "#241430", padding: 24, background: "#FAF7F2" }}>
      <div style={{ flex: "1 1 260px" }}>
        <h2 style={{ margin: "0 0 12px", fontSize: 24, fontWeight: 700 }}>{heading}</h2>
        <p><a href={`tel:${phone}`} style={{ color: "#241430" }}>{phone}</a></p>
        <p><a href={`mailto:${email}`} style={{ color: "#241430" }}>{email}</a></p>
        <form style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 16, maxWidth: 320 }}>
          <label htmlFor="contact-name" style={{ fontSize: 13, fontWeight: 600 }}>Name</label>
          <input id="contact-name" type="text" name="name" style={{ font: "inherit", padding: "8px 10px", border: "1px solid #24143033", borderRadius: 8 }} />
          <label htmlFor="contact-message" style={{ fontSize: 13, fontWeight: 600 }}>Message</label>
          <textarea id="contact-message" name="message" rows={3} style={{ font: "inherit", padding: "8px 10px", border: "1px solid #24143033", borderRadius: 8 }} />
          <button type="submit" style={{ alignSelf: "flex-start", marginTop: 6, background: "#241430", color: "#FAF7F2",
            border: "none", padding: "10px 18px", borderRadius: 8, fontWeight: 600, cursor: "pointer" }}>Send message</button>
        </form>
      </div>
      {showMap && (
        <div role="img" aria-label="Map showing business location" style={{ flex: "1 1 260px", minHeight: 200,
          borderRadius: 12, background: "repeating-linear-gradient(45deg, #24143012, #24143012 10px, #24143008 10px, #24143008 20px)" }} />
      )}
    </section>
  );
}