{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "contact-section",
  "name": "Contact section",
  "category": "Sections",
  "description": "The end of a company or agency page: what happens after you write, direct details, and a short form, side by side.",
  "tags": [
    "contact section",
    "contact form",
    "get in touch",
    "start a project",
    "enquiry",
    "lead form",
    "agency",
    "company",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "closing",
    "intents": [
      "contact form section",
      "get in touch",
      "start a project",
      "enquiry form",
      "request a quote",
      "agency contact"
    ],
    "prominence": "high",
    "density": "medium",
    "worksAfter": [
      "faq",
      "testimonial",
      "process"
    ],
    "worksBefore": [
      "site-footer"
    ],
    "alternatives": [
      "cta"
    ],
    "avoid": "Long forms. Ask for name, email and a few lines; say when you will reply."
  },
  "url": "https://mian.ro/components/contact-section",
  "markdownUrl": "https://mian.ro/ai/components/contact-section.md",
  "classes": [
    {
      "name": "mn-contact",
      "description": "The split: intro and details on one side, the form on the other."
    },
    {
      "name": "mn-contact-details",
      "description": "A description list of direct ways to reach you."
    },
    {
      "name": "mn-contact-form",
      "description": "The form (use mn-card for a surface)."
    }
  ],
  "accessibility": [
    "Every field has a visible label and autocomplete; required fields say so in text.",
    "Say what happens after sending (“We reply within two working days”) near the button.",
    "Direct details (email, phone) are real links so they can be used without the form."
  ],
  "examples": [
    {
      "title": "Start a project",
      "description": null,
      "html": "<section class=\"mn-section\" aria-labelledby=\"ct-h\"><div class=\"mn-container\"><div class=\"mn-contact\">\n  <div class=\"mn-stack\" style=\"--mn-gap:1.25rem\"><h2 class=\"mn-title\" id=\"ct-h\">Tell us what you are making.</h2><p class=\"mn-intro\">A few lines are enough. We reply within two working days with questions or a first estimate.</p>\n    <dl class=\"mn-contact-details\"><div><dt>Email</dt><dd><a class=\"mn-link\" href=\"mailto:hello@forma.example\">hello@forma.example</a></dd></div><div><dt>Studio</dt><dd>Str. Popa Nan 12, Bucharest</dd></div><div><dt>Hours</dt><dd>Mon–Fri, 9:00–18:00 EET</dd></div></dl></div>\n  <form class=\"mn-card mn-contact-form\" action=\"#\" aria-labelledby=\"ct-h\"><div class=\"mn-card-body mn-form\">\n    <div class=\"mn-form-row\"><div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-name\">Name</label><input class=\"mn-input\" id=\"ct-name\" autocomplete=\"name\" required></div><div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-mail\">Email</label><input class=\"mn-input\" id=\"ct-mail\" type=\"email\" autocomplete=\"email\" required></div></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-budget\">Budget</label><select class=\"mn-select\" id=\"ct-budget\"><option>Under €15,000</option><option>€15,000–40,000</option><option>Over €40,000</option><option>Not sure yet</option></select></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"ct-msg\">About the project</label><textarea class=\"mn-textarea\" id=\"ct-msg\" rows=\"4\" required></textarea></div>\n    <button class=\"mn-btn\" type=\"submit\">Send the brief</button>\n  </div></form>\n</div></div></section>"
    }
  ],
  "css": ".mn-contact { display: grid; gap: clamp(2rem, 5cqi, 4rem); align-items: start; }\n@container mn (min-width: 52rem) { .mn-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }\n.mn-contact-details { display: grid; gap: .9rem; margin: .5rem 0 0; }\n.mn-contact-details > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-top: .9rem; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-contact-details dt { color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-contact-details dd { margin: 0; overflow-wrap: anywhere; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/contact-section.json"
  }
}