# Card 02

> A heading beside a location menu, over cards for each open position.

URL: https://apogee.avaui.dev/docs/careers-sections/card-02
Last updated: 2026-10-20

A heading beside a location menu, over cards for each open position.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/careers/card-02

```astro
---
/**
 * Card 02: A heading beside a location menu, over cards for each open position.
 *
 * @block careers
 * @order 6
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import JobCard from '@/components/apogee/JobCard/JobCard.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import { type CareersContent, type Job } from '@/components/apogee/sections/_shared/careers.ts'
import Select from '@/components/apogee/Select/Select.astro'

const demoJobs: Job[] = [
  {
    title: 'Product Designer',
    href: '#',
    description: "We're looking for a mid-level product designer to join our team.",
    department: 'Design',
    location: 'Remote',
    type: 'Full-time',
    salary: '80k – 100k',
    badge: { label: 'Design', color: 'primary' },
  },
  {
    title: 'Engineering Manager',
    href: '#',
    description: "We're looking for an experienced engineering manager to lead a product team.",
    department: 'Software Development',
    location: 'Remote',
    type: 'Full-time',
    salary: '120k – 150k',
    badge: { label: 'Software', color: 'neutral' },
  },
  {
    title: 'Customer Success Manager',
    href: '#',
    description: "Help our customers get the most out of the product, from first call to renewal.",
    department: 'Customer Success',
    location: 'Lisbon, Portugal',
    type: 'Full-time',
    salary: '70k – 90k',
    badge: { label: 'Customer success', color: 'positive' },
  },
  {
    title: 'Account Executive',
    href: '#',
    description: "Work with teams who are choosing their next design system.",
    department: 'Sales',
    location: 'London, UK',
    type: 'Full-time',
    salary: '90k – 120k',
    badge: { label: 'Sales', color: 'warning' },
  },
  {
    title: 'Content Marketing Lead',
    href: '#',
    description: "Write and plan the guides, notes and case studies people share.",
    department: 'Marketing',
    location: 'Remote',
    type: 'Part-time',
    salary: '60k – 80k',
    badge: { label: 'Marketing', color: 'primary' },
  },
]

/** @composable */
interface Props extends CareersContent {}

const {
  eyebrow = "We're hiring!",
  heading = 'Join our team',
  description = 'Our philosophy is simple: hire a team of diverse, passionate people and foster a culture that empowers you to do your best work.',
  items = demoJobs,
} = Astro.props
---

<Section spacing="large" containerWidth="medium">
  <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} class="mb-12">
    <Select slot="actions" label="Location" name="location" class="sm:w-56">
      <option selected>Worldwide</option>
      <option>Europe</option>
      <option>North America</option>
      <option>Asia</option>
      <option disabled>Oceania</option>
    </Select>
  </SectionHeader>
  <ul class="list-none p-0 flex flex-col gap-6">
    {items.map((job) => <li><JobCard job={job} variant="card" /></li>)}
  </ul>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add careers/card-02
```

This copies the block to `src/components/apogee/blocks/careers/` with everything it uses: JobCard, Section, SectionHeader, Select. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/careers-sections#copy-is-props).

## Accessibility

-   The heading is an `h2` by default, so the block slots into a page under its `h1`; item titles are one level down.
-   Each position is one link: the title stretches over the card. Its details are a description list (Location, Type, Salary) for screen readers.
-   Menus are native selects with a label or an `aria-label`.

## Related

[

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

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

TabsSwitch between panels of related content in the same space.

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

SelectA labeled, native <select> — full keyboard and mobile picker support for free — or a custom listbox with rich options over the same form control.

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