Contact section
The end of a company or agency page: what happens after you write, direct details, and a short form, side by side.
Start a project
Tell us what you are making.
A few lines are enough. We reply within two working days with questions or a first estimate.
- [email protected]
- Studio
- Str. Popa Nan 12, Bucharest
- Hours
- Mon–Fri, 9:00–18:00 EET
<section class="mn-section" aria-labelledby="ct-h"><div class="mn-container"><div class="mn-contact">
<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>
<dl class="mn-contact-details"><div><dt>Email</dt><dd><a class="mn-link" href="mailto:[email protected]">[email protected]</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>
<form class="mn-card mn-contact-form" action="#" aria-labelledby="ct-h"><div class="mn-card-body mn-form">
<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>
<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>
<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>
<button class="mn-btn" type="submit">Send the brief</button>
</div></form>
</div></div></section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/contact-section.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-contact | The split: intro and details on one side, the form on the other. |
| mn-contact-details | A description list of direct ways to reach you. |
| mn-contact-form | 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.