Vacancy

Default

A mono line naming the team, a linked title, one or two sentences, and four facts. The register draws its own top edge and every entry closes with its own rule including the last, so the list is bounded at both ends.

<ul class="cf-vacancies" role="list">
  <li class="cf-vacancy">
    <p class="cf-vacancy__meta"><span>Plattform</span></p>
    <h3 class="cf-vacancy__title">
      <a class="cf-vacancy__link" href="/karriere/data-engineer">Data Engineer (m/w/d)</a>
    </h3>
    <p class="cf-vacancy__excerpt">Sie bauen die Strecken, auf denen…</p>
    <dl class="cf-vacancy__facts">
      <div class="cf-vacancy__fact">
        <dt class="cf-vacancy__term">Standort</dt>
        <dd class="cf-vacancy__value">Konstanz, hybrid</dd>
      </div>
      <div class="cf-vacancy__fact">…</div>
    </dl>
  </li>
</ul>

The title picture

An opening names one picture that stands for it — bild: in its file, the Titelbild property in the Stellen register — and the row is drawn from it: .cf-vacancy--image on the entry, an <img> with .cf-vacancy__image as its first child, and everything the picture is not moved into a <div class="cf-vacancy__body"> beside it. scripts/build-jobs.py writes all three from the same record the sync filled, so the record, the file and the drawing cannot drift apart.

• Optional, and the layout does not reserve a hole for it. An opening without one is the row this register has always drawn, so a register where some rows carry a photograph reads as a register — a row of grey squares reads as a fault.
• The square. The picture is drawn exactly square — a width from the space scale and aspect-ratio: 1 / 1 with object-fit: cover — 96 px, and 64 px once the row drops below 34 rem. The width and height attributes still carry the pixel size of the file that was downloaded, not of the box drawn.
• It is decoration, not content. alt="", and it is not a link — .cf-vacancy__link stays the title and only the title, so the row's markup and its reading order do not change when the picture appears.
• Only on the register. The job page never draws it. It is an aid to scanning a list, and on a page describing one opening it would be a second claim on a page whose one lime moment is already taken.

The facts

Four name/value pairs — Standort, Anstellung, Umfang, Start — which is what <dl> is for and what nothing else in HTML is. They are the questions every candidate asks before reading a word of the description, so they are answered on the register rather than one click further in.

The drawing is the contact list's: a mono term with its value under it. What changes is the axis. Four short facts laid down a column would be four rows under every opening and would make the register three times as long as its content; laid along the row they read as a strip, and they wrap onto a second line on a phone without any rule of their own.

Column gap is --space-8 against a row gap of --space-3, and the asymmetry is the whole legibility of the block: a pair has to read as a pair before the row reads as a row, so the air between two facts must beat the air inside one. There are no rules between them — a line there would be neither an edge nor a division nor a label rule, which is the test in where a line may go. The register's own hairline is the only line in the component.

Keep it to four. A fifth fact is a fact for the job page, and a register whose facts wrap to three lines has stopped being a register.

When nothing is open

A company that is not hiring is the normal state, not an error, so the register is replaced rather than rendered empty — .cf-error--inline, at 200, exactly as the news overview does for a filter that matches nothing. → Error & Empty State

Note which button that is. On the page itself the initiative link is .cf-btn--primary and is the screen's one lime moment; in the empty state it drops to --outline, because .cf-error--inline is already the loudest thing on an otherwise empty page and two claims on one screen is one too many.

Anatomy

Accessibility

• The link text is the role title on its own, so it is unique and it makes sense read out of context — which is how a screen reader's link list presents it. No “mehr erfahren”, ever.
• The whole row is not a link. A stretched ::after over the entry would make the excerpt and the facts unselectable, and the facts are the part a candidate copies. The row lights on :focus-within instead, so keyboard and pointer get the same feedback.
• A picture is decoration. When an opening has one it carries alt="" and no link of its own — the title is still the only link, and what a reader who cannot see the picture loses is nothing that is not already in the block beside it.
• The facts are a real <dl>. Assistive technology announces the number of pairs and reads each value with its term attached; four loose spans read as eight unlabelled words.
• Nothing is carried by colour. The mono term is distinguished by face, size, case and position as well as by ink.
• Contrast measured against CF-Grau, the dark end of the page wash, so these are the floors: title and value 13.5:1, mono meta and term --text-secondary 5.9:1, excerpt 5.9:1. The row hairline is a separator, not a UI contour — the structure is in the markup — so it is not load-bearing for the 3:1 floor.
• The sheen is a background-position transition on a gradient. Nothing moves, nothing reflows, and there is no reduced-motion exception to make because there is no motion to remove.
• Focus rings come from base.css and are untouched here.

Before launch

• The count and the register come from one list. Karriere prints “4 offene Stellen” in the page header and then renders four entries. Both are the server's, out of the same query — the same standing the consent dialog's entry counts have.
• Structured data belongs on the job page, not here. Google's job posting documentation is explicit that JobPosting markup goes on a page describing exactly one opening, one URL per opening, and that a careers landing page listing several must not carry it. So the register links out and stays plain HTML; the JSON-LD — title, description, datePosted, validThrough, jobLocation, hiringOrganization — goes on /karriere/<rolle>, and every field in it has to match what the reader sees on that page. Stellenanzeige is that page: it carries the block, the register does not, and scripts/check-job-posting.py holds both halves of that sentence.
• Every posting needs an end date. An opening with no validThrough stays live in search results after it is filled. The four entries on the pattern page are placeholder copy; one of the four — Data Engineer — now has its job page, and the other three are still addresses without a template.
• The fifth and sixth fact live on the job page. The strip here holds four, and the two a candidate asks next — what it pays and how long the posting runs — are the ones the job page opens with. Vergütung and Bewerbungsschluss are the first two rows the register does not have.
• The mailbox is a placeholder. jobs@control-f.de is written on the page three times and has to exist, or the one lime moment on it is a dead end.
• The square comes from the register. The Titelbild property of the Stellen database becomes the bild: line and the file under design-system/assets/img/jobs/ on the next sync — same plate as a news picture, and scripts/check-content-images.py states the numbers. It is drawn only here; an opening whose page exists but whose register row has no picture is not missing anything.

Rules