# Jobs list · MIAN

Open roles for a careers page: title, team, location and type, the whole row one link.

- Id: `jobs` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/jobs
- Use for: careers page, open positions, job listings, we are hiring, vacancies.
- On a page: catalogue · prominence medium · density medium.
- Alternatives: list, table.
- Avoid: Roles without location, remote policy or team.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Open roles

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/jobs/source
