# JobCard

> One open position; title with a status badge, a short description and its location, type and salary, as a list row or a card.

URL: https://apogee.avaui.dev/docs/job-card
Last updated: 2026-10-15

One open position; title with a status badge, a short description and its location, type and salary, as a list row or a card.

Last updated October 15, 2026

```astro
<JobCard job={job} />
```

## Add

```sh
npx @ava-ui/apogee add job-card
```

Pulls in Badge and Heading.

## Usage

```astro
---
import JobCard, { type Job } from '@/components/apogee/JobCard/JobCard.astro'
const job: Job = { title: 'Product Designer', href: '/careers/product-designer', location: 'Remote', type: 'Full-time' }
---
<JobCard job={job} variant="card" />
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `job` | `{ title, href, description?, department?, location?, type?, salary?, badge? }` | — | Required. `badge` is `{ label, color? }`. Details show only when set. |
| `variant` | `'row' \| 'card'` | `'row'` | A list row under a rule, or a bordered card that also shows the department and a “View job” cue. |
| `headingLevel` | `2 \| 3 \| 4 \| 5` | `3` | The title’s heading level. |
| `viewLabel` | `string` | `'View job'` | The cue beside the department on `card`. |
| `class` | `string` | — | Extra classes on the `<article>`, merged last. |

## Variants

```astro
<JobCard job={job} variant="card" />
```

On the brand colour, the row’s secondary text takes the on-colour:

```astro
<Section background="primary"><JobCard job={job} /></Section>
```

## States

-   **Hover** — the `card` border turns primary.
-   **Focus** — the title link shows the focus ring.

## Examples

Lists and groups of positions: [Careers sections](https://apogee.avaui.dev/docs/careers-sections).

## Accessibility

-   The card is an `<article>`; the title is a heading holding the link, stretched over the whole card.
-   Location, type and salary are a description list with hidden terms (“Location”, “Type”, “Salary”), so a screen reader hears what each value is; the icons are hidden.
-   The “View job” cue is hidden from screen readers; the title already names the link.

## Tokens

| Token | Used for |
| --- | --- |
| `--foreground-neutral` / `--foreground-neutral-faded` | Title / description and details |
| `--foreground-primary` | Department and “View job” |
| `--border-neutral` / `--border-primary` | Row rule and card edge / card hover |

## Do / Don’t

-   **Do** keep the description to one sentence.
-   **Don’t** list a salary range you would not offer.

## Content

-   Titles are the role, not the team: “Product Designer”, not “Join Design”.

## Related

[

PostCardOne article in a blog list; image, a top line, title, summary and a footer, as plain, a card or with an overlay.

](https://apogee.avaui.dev/docs/post-card)[

BadgeA small status label — for counts, tags, and state indicators.

](https://apogee.avaui.dev/docs/badge)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)