Jobs list
Open roles for a careers page: title, team, location and type, the whole row one link.
Open roles
<section class="mn-section mn-section-sm"><div class="mn-container"><ul class="mn-jobs">
<li class="mn-job"><h3 class="mn-job-title"><a href="#">Senior product designer</a></h3><p class="mn-job-meta"><span class="mn-badge mn-badge-soft">Design</span><span class="mn-badge mn-badge-outline mn-neutral">Berlin or remote (EU)</span><span class="mn-badge mn-badge-outline mn-neutral">Full-time</span></p><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></li>
<li class="mn-job"><h3 class="mn-job-title"><a href="#">Backend engineer, reconciliation</a></h3><p class="mn-job-meta"><span class="mn-badge mn-badge-soft">Engineering</span><span class="mn-badge mn-badge-outline mn-neutral">Cluj-Napoca</span><span class="mn-badge mn-badge-outline mn-neutral">Full-time</span></p><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></li>
<li class="mn-job"><h3 class="mn-job-title"><a href="#">Customer success lead</a></h3><p class="mn-job-meta"><span class="mn-badge mn-badge-soft">Customers</span><span class="mn-badge mn-badge-outline mn-neutral">Remote (CET ±2)</span><span class="mn-badge mn-badge-outline mn-neutral">Full-time</span></p><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></li>
<li class="mn-job"><h3 class="mn-job-title"><a href="#">Finance intern</a></h3><p class="mn-job-meta"><span class="mn-badge mn-badge-soft">Finance</span><span class="mn-badge mn-badge-outline mn-neutral">Berlin</span><span class="mn-badge mn-badge-outline mn-neutral">6 months</span></p><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></li>
</ul></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/jobs.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-jobs | The list (<ul>). |
| mn-job | A role: mn-job-title (with the link), mn-job-meta (badges), an arrow icon. |
Accessibility
- Only the title is a link, stretched over the row, so each role is one tab stop with a clear name.
- Write location and remote policy as text, not only icons.