Pages Medium
Job Board — Job Detail
A polished, scannable job detail page for a job board or ATS. Shows a sticky header with title, company, location, salary chips and remote badge, plus apply and save actions. Sections cover the role, responsibilities, requirements and benefits, alongside a company snapshot card, hiring-manager note and similar roles. Interactions include a sticky apply bar that appears on scroll, a synced save toggle, an expandable company panel and native share with clipboard fallback.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--brand: #2563eb;
--brand-d: #1d4ed8;
--brand-50: #eaf1ff;
--ink: #0f172a;
--ink-2: #475569;
--muted: #64748b;
--bg: #f6f8fb;
--surface: #ffffff;
--line: rgba(15, 23, 42, 0.1);
--line-2: rgba(15, 23, 42, 0.18);
--ok: #16a34a;
--warn: #d97706;
--danger: #dc2626;
--new: #2563eb;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--sh-md: 0 6px 20px rgba(15, 23, 42, 0.08);
--sh-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
.skip-link {
position: absolute;
left: -999px;
top: 8px;
background: var(--ink);
color: #fff;
padding: 10px 16px;
border-radius: var(--r-sm);
z-index: 100;
}
.skip-link:focus { left: 12px; }
.link {
color: var(--brand-d);
text-decoration: none;
font-weight: 600;
}
.link:hover { text-decoration: underline; }
/* ---------- Topbar ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.topbar__inner {
max-width: 1120px;
margin: 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.02em;
}
.brand__mark { color: var(--brand); }
.topnav {
display: flex;
gap: 4px;
margin-right: auto;
}
.topnav__link {
text-decoration: none;
color: var(--ink-2);
font-weight: 500;
font-size: 0.9rem;
padding: 8px 12px;
border-radius: var(--r-sm);
}
.topnav__link:hover { background: var(--brand-50); color: var(--brand-d); }
.topnav__link.is-active { color: var(--ink); font-weight: 600; }
.topbar__cta { display: flex; align-items: center; gap: 12px; }
.avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #2563eb);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.avatar--lg { width: 46px; height: 46px; font-size: 0.9rem; }
/* ---------- Breadcrumb ---------- */
.crumbs {
max-width: 1120px;
margin: 0 auto;
padding: 16px 24px 0;
}
.crumbs__list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
font-size: 0.82rem;
color: var(--muted);
}
.crumbs__list li:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: var(--line-2);
}
.crumbs__list a { text-decoration: none; color: var(--muted); }
.crumbs__list a:hover { color: var(--brand-d); }
.crumbs__list [aria-current] { color: var(--ink); font-weight: 600; }
/* ---------- Layout ---------- */
.layout {
max-width: 1120px;
margin: 0 auto;
padding: 20px 24px 120px;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 24px;
align-items: start;
}
.primary { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rail {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 84px;
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
}
/* ---------- Job head ---------- */
.jobhead { padding: 24px; }
.jobhead__top { display: flex; gap: 16px; }
.logo {
width: 56px;
height: 56px;
border-radius: var(--r-md);
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.35rem;
color: #fff;
flex: 0 0 auto;
}
.logo--lg { width: 52px; height: 52px; font-size: 1.25rem; }
.logo--north { background: linear-gradient(135deg, #0f766e, #0ea5e9); }
.logo--lumen { background: linear-gradient(135deg, #7c3aed, #db2777); }
.logo--orbit { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.logo--vela { background: linear-gradient(135deg, #1d4ed8, #06b6d4); }
.jobhead__title {
margin: 0;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.jobhead__company {
margin: 6px 0 12px;
font-size: 0.95rem;
color: var(--ink-2);
display: flex;
align-items: center;
gap: 6px;
}
.verified {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--brand-50);
color: var(--brand-d);
font-size: 0.7rem;
font-weight: 800;
display: inline-grid;
place-items: center;
}
.metarow {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
}
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: #f1f5f9;
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 0.8rem;
font-weight: 500;
padding: 5px 10px;
border-radius: 999px;
}
.chip__ic { font-size: 0.85rem; }
.chip--remote {
background: #ecfdf5;
border-color: rgba(22, 163, 74, 0.25);
color: #15803d;
font-weight: 600;
}
.chip--new {
background: var(--brand-50);
border-color: rgba(37, 99, 235, 0.25);
color: var(--brand-d);
font-weight: 600;
}
.jobhead__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
/* ---------- Buttons ---------- */
.btn {
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
border-radius: var(--r-sm);
border: 1px solid transparent;
padding: 11px 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }
.btn--sm { padding: 8px 13px; font-size: 0.85rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--primary {
background: var(--brand);
color: #fff;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.btn--primary:hover { background: var(--brand-d); }
.btn--ghost {
background: var(--surface);
border-color: var(--line-2);
color: var(--ink);
}
.btn--ghost:hover { background: #f8fafc; border-color: var(--ink-2); }
.btn--save {
background: var(--surface);
border-color: var(--line-2);
color: var(--ink);
}
.btn--save:hover { background: #f8fafc; }
.btn--save.is-saved {
background: var(--brand-50);
border-color: rgba(37, 99, 235, 0.4);
color: var(--brand-d);
}
.btn--save.is-saved [data-bookmark] { filter: none; }
.applicants {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
color: var(--muted);
font-weight: 500;
}
.dots { display: inline-flex; }
.dots i {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--surface);
margin-left: -6px;
display: inline-block;
}
.dots i:first-child { margin-left: 0; }
.dots i:nth-child(1) { background: #f59e0b; }
.dots i:nth-child(2) { background: #10b981; }
.dots i:nth-child(3) { background: #6366f1; }
/* ---------- Prose ---------- */
.prose { padding: 24px; }
.prose__h {
margin: 0 0 14px;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.prose__h3 {
margin: 24px 0 10px;
font-size: 1.02rem;
font-weight: 700;
}
.prose p { margin: 0 0 12px; color: var(--ink-2); }
.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticklist li {
position: relative;
padding-left: 28px;
color: var(--ink-2);
}
.ticklist li::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
width: 19px;
height: 19px;
border-radius: 50%;
background: #ecfdf5;
color: var(--ok);
font-size: 0.72rem;
font-weight: 800;
display: grid;
place-items: center;
}
.perks {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.perk {
display: flex;
align-items: center;
gap: 9px;
background: #f8fafc;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 11px 13px;
font-size: 0.88rem;
font-weight: 500;
color: var(--ink);
}
/* ---------- Similar jobs ---------- */
.similar { padding: 24px; }
.joblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jobrow {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border: 1px solid transparent;
border-radius: var(--r-md);
transition: background 0.15s ease, border-color 0.15s ease;
}
.jobrow:hover { background: #f8fafc; border-color: var(--line); }
.jobrow .logo { width: 42px; height: 42px; font-size: 1.05rem; border-radius: 10px; }
.jobrow__body { min-width: 0; flex: 1; }
.jobrow__title {
display: inline-block;
font-weight: 700;
text-decoration: none;
font-size: 0.95rem;
}
.jobrow__title:hover { color: var(--brand-d); }
.jobrow__meta { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.iconbtn {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: var(--r-sm);
border: 1px solid var(--line);
background: var(--surface);
cursor: pointer;
font-size: 1rem;
filter: grayscale(1) opacity(0.6);
transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.iconbtn:hover { background: #f1f5f9; }
.iconbtn[aria-pressed="true"] {
filter: none;
background: var(--brand-50);
border-color: rgba(37, 99, 235, 0.4);
}
.iconbtn:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }
/* ---------- Rail ---------- */
.snapshot { padding: 22px; }
.snapshot__head { display: flex; gap: 13px; align-items: center; }
.snapshot__name { margin: 0; font-size: 1.05rem; font-weight: 700; }
.snapshot__tag { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.snapshot__stats {
list-style: none;
margin: 18px 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.snapshot__stats div {
background: #f8fafc;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 10px 12px;
}
.snapshot__stats dt { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.snapshot__stats dd { margin: 3px 0 0; font-size: 1rem; font-weight: 700; }
.snapshot__more {
border-top: 1px solid var(--line);
margin-bottom: 16px;
padding-top: 14px;
animation: fade 0.25s ease;
}
.snapshot__about { margin: 0 0 12px; font-size: 0.86rem; color: var(--ink-2); }
.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.taglist li {
font-size: 0.75rem;
font-weight: 600;
color: var(--brand-d);
background: var(--brand-50);
border-radius: 999px;
padding: 4px 10px;
}
.snapshot__link { display: inline-block; margin-top: 14px; font-size: 0.85rem; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hiring { padding: 22px; }
.hiring__h { margin: 0 0 14px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.hiring__person { display: flex; align-items: center; gap: 12px; }
.hiring__name { margin: 0; font-weight: 700; font-size: 0.95rem; }
.hiring__role { margin: 1px 0 0; font-size: 0.82rem; color: var(--muted); }
.hiring__note {
margin: 14px 0 0;
font-size: 0.88rem;
font-style: italic;
color: var(--ink-2);
border-left: 3px solid var(--brand-50);
padding-left: 12px;
}
/* ---------- Sticky apply bar ---------- */
.applybar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(12px);
border-top: 1px solid var(--line-2);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
transform: translateY(110%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.applybar.is-visible { transform: translateY(0); }
.applybar__inner {
max-width: 1120px;
margin: 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.applybar__info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.applybar__title { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.applybar__sub { font-size: 0.82rem; color: var(--muted); }
.applybar__actions { display: flex; gap: 10px; flex: 0 0 auto; }
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 92px;
transform: translate(-50%, 20px);
background: var(--ink);
color: #fff;
padding: 11px 18px;
border-radius: var(--r-sm);
font-size: 0.88rem;
font-weight: 500;
box-shadow: var(--sh-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 60;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Responsive ---------- */
@media (max-width: 920px) {
.layout { grid-template-columns: 1fr; }
.rail { position: static; flex-direction: column; }
}
@media (max-width: 520px) {
.topbar__inner { padding: 10px 16px; gap: 12px; }
.topnav { display: none; }
.crumbs { padding: 14px 16px 0; }
.layout { padding: 16px 16px 130px; gap: 16px; }
.jobhead, .prose, .similar, .snapshot, .hiring { padding: 18px; }
.jobhead__title { font-size: 1.3rem; }
.jobhead__top { flex-direction: column; gap: 12px; }
.jobhead__actions .btn { flex: 1; justify-content: center; }
.applicants { width: 100%; margin: 4px 0 0; justify-content: flex-start; }
.perks { grid-template-columns: 1fr; }
.applybar__inner { padding: 10px 16px; gap: 10px; }
.applybar__info { display: none; }
.applybar__actions { flex: 1; }
.applybar__actions .btn { flex: 1; justify-content: center; }
.toast { bottom: 84px; width: calc(100% - 32px); text-align: center; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-on");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-on");
}, 2200);
}
/* ---------- Save toggle (header + sticky bar stay in sync) ---------- */
var saved = false;
var saveBtn = document.getElementById("saveBtn");
var saveBtnBar = document.getElementById("saveBtnBar");
function renderSave() {
[saveBtn, saveBtnBar].forEach(function (b) {
if (!b) return;
b.classList.toggle("is-saved", saved);
b.setAttribute("aria-pressed", String(saved));
var label = b.querySelector(".btn__label");
if (label) label.textContent = saved ? "Saved" : "Save";
});
}
function toggleSave() {
saved = !saved;
renderSave();
toast(saved ? "Saved to your jobs" : "Removed from saved jobs");
}
if (saveBtn) saveBtn.addEventListener("click", toggleSave);
if (saveBtnBar) saveBtnBar.addEventListener("click", toggleSave);
/* ---------- Apply ---------- */
var applicants = 42;
var applied = false;
function apply() {
if (applied) {
toast("You've already applied to this role");
return;
}
applied = true;
applicants += 1;
document.querySelectorAll("#applyBtn, #applyBtnBar").forEach(function (b) {
b.textContent = "Applied ✓";
b.disabled = true;
b.style.opacity = "0.85";
b.style.cursor = "default";
});
var ap = document.querySelector(".applicants");
if (ap) ap.lastChild.textContent = " " + applicants + " applicants";
toast("Application sent to Northwind Labs");
}
["applyBtn", "applyBtnBar"].forEach(function (id) {
var el = document.getElementById(id);
if (el) el.addEventListener("click", apply);
});
/* ---------- Share ---------- */
var shareBtn = document.getElementById("shareBtn");
if (shareBtn) {
shareBtn.addEventListener("click", function () {
var data = {
title: "Senior Product Designer — Northwind Labs",
text: "Check out this role at Northwind Labs",
url: location.href
};
if (navigator.share) {
navigator.share(data).catch(function () {});
} else if (navigator.clipboard) {
navigator.clipboard.writeText(location.href).then(
function () { toast("Job link copied to clipboard"); },
function () { toast("Could not copy link"); }
);
} else {
toast("Sharing not supported here");
}
});
}
/* ---------- Expand company ---------- */
var companyToggle = document.getElementById("companyToggle");
var companyMore = document.getElementById("companyMore");
if (companyToggle && companyMore) {
companyToggle.addEventListener("click", function () {
var open = companyMore.hasAttribute("hidden");
if (open) {
companyMore.removeAttribute("hidden");
companyToggle.textContent = "Show less";
} else {
companyMore.setAttribute("hidden", "");
companyToggle.textContent = "Expand company";
}
companyToggle.setAttribute("aria-expanded", String(open));
});
}
/* ---------- Save toggles on similar jobs ---------- */
document.querySelectorAll("[data-save-row]").forEach(function (btn) {
btn.addEventListener("click", function () {
var on = btn.getAttribute("aria-pressed") === "true";
btn.setAttribute("aria-pressed", String(!on));
var name = (btn.getAttribute("aria-label") || "Job").replace(/^Save\s+/, "");
toast(on ? "Removed " + name : "Saved " + name);
});
});
/* ---------- Sticky apply bar shows after header scrolls away ---------- */
var applybar = document.getElementById("applybar");
var jobhead = document.getElementById("applyBtn");
if (applybar && jobhead && "IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
var show = !e.isIntersecting && e.boundingClientRect.top < 0;
applybar.classList.toggle("is-visible", show);
applybar.setAttribute("aria-hidden", String(!show));
});
},
{ threshold: 0, rootMargin: "-72px 0px 0px 0px" }
);
io.observe(jobhead);
} else if (applybar) {
// Fallback: simple scroll threshold
window.addEventListener("scroll", function () {
var show = window.scrollY > 320;
applybar.classList.toggle("is-visible", show);
applybar.setAttribute("aria-hidden", String(!show));
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Senior Product Designer — Northwind Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar">
<div class="topbar__inner">
<a class="brand" href="#" aria-label="Hirelane home">
<span class="brand__mark" aria-hidden="true">◆</span>
<span class="brand__name">Hirelane</span>
</a>
<nav class="topnav" aria-label="Primary">
<a href="#" class="topnav__link is-active">Find jobs</a>
<a href="#" class="topnav__link">Companies</a>
<a href="#" class="topnav__link">Salaries</a>
</nav>
<div class="topbar__cta">
<button class="btn btn--ghost btn--sm" type="button">Sign in</button>
<span class="avatar" aria-hidden="true">JR</span>
</div>
</div>
</header>
<nav class="crumbs" aria-label="Breadcrumb">
<ol class="crumbs__list">
<li><a href="#">Jobs</a></li>
<li><a href="#">Design</a></li>
<li aria-current="page">Senior Product Designer</li>
</ol>
</nav>
<main id="main" class="layout">
<article class="primary">
<section class="jobhead card" aria-labelledby="jobtitle">
<div class="jobhead__top">
<div class="logo logo--north" aria-hidden="true">N</div>
<div class="jobhead__id">
<h1 id="jobtitle" class="jobhead__title">Senior Product Designer</h1>
<p class="jobhead__company">
<a href="#" class="link">Northwind Labs</a>
<span class="verified" title="Verified employer" aria-label="Verified employer">✓</span>
</p>
<ul class="metarow" aria-label="Job summary">
<li class="chip"><span class="chip__ic" aria-hidden="true">📍</span> Berlin, DE</li>
<li class="chip chip--remote">Remote-friendly</li>
<li class="chip"><span class="chip__ic" aria-hidden="true">🕒</span> Full-time</li>
<li class="chip"><span class="chip__ic" aria-hidden="true">💶</span> €78k – €96k</li>
<li class="chip chip--new">Posted 2 days ago</li>
</ul>
</div>
</div>
<div class="jobhead__actions">
<button class="btn btn--primary" id="applyBtn" type="button">Apply now</button>
<button class="btn btn--save" id="saveBtn" type="button" aria-pressed="false">
<span class="btn__ic" aria-hidden="true" data-bookmark>🔖</span>
<span class="btn__label">Save</span>
</button>
<button class="btn btn--ghost" id="shareBtn" type="button">
<span class="btn__ic" aria-hidden="true">↗</span> Share
</button>
<span class="applicants" aria-label="42 applicants so far">
<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
42 applicants
</span>
</div>
</section>
<section class="card prose" aria-labelledby="about-h">
<h2 id="about-h" class="prose__h">About the role</h2>
<p>Northwind Labs builds tooling that helps climate teams turn raw sensor data into
decisions. As our Senior Product Designer you'll own the end-to-end experience of our
analytics suite — from first sketch to shipped flow — partnering tightly with research,
product and a six-person engineering pod.</p>
<p>You'll set the visual and interaction language for a product used daily by scientists
who care more about clarity than decoration. This is a high-ownership role for someone who
enjoys ambiguity and ships at a steady, deliberate pace.</p>
<h3 class="prose__h3">What you'll do</h3>
<ul class="ticklist">
<li>Lead design for two product areas, from discovery through high-fidelity delivery.</li>
<li>Run lightweight research sessions and translate findings into crisp design decisions.</li>
<li>Grow and maintain our component library alongside front-end engineers.</li>
<li>Pair with PMs to scope work into small, shippable increments.</li>
<li>Raise the craft bar across the team through critique and mentorship.</li>
</ul>
<h3 class="prose__h3">What we're looking for</h3>
<ul class="ticklist">
<li>5+ years designing complex web applications, ideally data-heavy products.</li>
<li>A portfolio that shows systems thinking, not just polished screens.</li>
<li>Fluency in Figma and comfort reading the front-end you hand off.</li>
<li>Strong written communication — much of the team works async.</li>
<li>Bonus: experience with charts, maps or scientific visualisation.</li>
</ul>
<h3 class="prose__h3">Benefits & perks</h3>
<ul class="perks">
<li class="perk"><span aria-hidden="true">🏝️</span> 30 days paid leave</li>
<li class="perk"><span aria-hidden="true">🩺</span> Private health cover</li>
<li class="perk"><span aria-hidden="true">💻</span> €1,500 home-office budget</li>
<li class="perk"><span aria-hidden="true">📚</span> Yearly learning stipend</li>
<li class="perk"><span aria-hidden="true">🌍</span> 4 weeks work-from-anywhere</li>
<li class="perk"><span aria-hidden="true">📈</span> Equity options</li>
</ul>
</section>
<section class="card similar" aria-labelledby="similar-h">
<h2 id="similar-h" class="prose__h">Similar jobs</h2>
<ul class="joblist" id="similarList">
<li class="jobrow">
<div class="logo logo--lumen" aria-hidden="true">L</div>
<div class="jobrow__body">
<a href="#" class="jobrow__title">Product Designer, Platform</a>
<p class="jobrow__meta">Lumen Health · Remote (EU) · €70k–€85k</p>
</div>
<button class="iconbtn" type="button" data-save-row aria-pressed="false" aria-label="Save Product Designer, Platform">🔖</button>
</li>
<li class="jobrow">
<div class="logo logo--orbit" aria-hidden="true">O</div>
<div class="jobrow__body">
<a href="#" class="jobrow__title">Senior UX Designer</a>
<p class="jobrow__meta">Orbit Maps · Munich, DE · €82k–€98k</p>
</div>
<button class="iconbtn" type="button" data-save-row aria-pressed="false" aria-label="Save Senior UX Designer">🔖</button>
</li>
<li class="jobrow">
<div class="logo logo--vela" aria-hidden="true">V</div>
<div class="jobrow__body">
<a href="#" class="jobrow__title">Design Systems Lead</a>
<p class="jobrow__meta">Vela Analytics · Hybrid · €90k–€110k</p>
</div>
<button class="iconbtn" type="button" data-save-row aria-pressed="false" aria-label="Save Design Systems Lead">🔖</button>
</li>
</ul>
</section>
</article>
<aside class="rail" aria-label="Company information">
<div class="card snapshot">
<div class="snapshot__head">
<div class="logo logo--north logo--lg" aria-hidden="true">N</div>
<div>
<h2 class="snapshot__name">Northwind Labs</h2>
<p class="snapshot__tag">Climate data infrastructure</p>
</div>
</div>
<dl class="snapshot__stats">
<div><dt>Size</dt><dd>120–180</dd></div>
<div><dt>Founded</dt><dd>2018</dd></div>
<div><dt>Funding</dt><dd>Series B</dd></div>
<div><dt>Rating</dt><dd>4.6 ★</dd></div>
</dl>
<div class="snapshot__more" id="companyMore" hidden>
<p class="snapshot__about">Headquartered in Berlin with hubs in Lisbon and remote
teammates across nine countries. Northwind partners with research institutes and
municipalities to make environmental data usable.</p>
<ul class="taglist">
<li>Design-led</li><li>Async-first</li><li>B-Corp</li><li>Mission-driven</li>
</ul>
</div>
<button class="btn btn--ghost btn--block" id="companyToggle" type="button" aria-expanded="false" aria-controls="companyMore">
Expand company
</button>
<a href="#" class="link snapshot__link">View all 7 open roles →</a>
</div>
<div class="card hiring">
<h2 class="hiring__h">Hiring manager</h2>
<div class="hiring__person">
<span class="avatar avatar--lg" aria-hidden="true">AM</span>
<div>
<p class="hiring__name">Amara Okafor</p>
<p class="hiring__role">Head of Design</p>
</div>
</div>
<p class="hiring__note">"We hire for taste and curiosity. Show us how you think."</p>
</div>
</aside>
</main>
<div class="applybar" id="applybar" aria-hidden="true">
<div class="applybar__inner">
<div class="applybar__info">
<span class="applybar__title">Senior Product Designer</span>
<span class="applybar__sub">Northwind Labs · €78k–€96k</span>
</div>
<div class="applybar__actions">
<button class="btn btn--save btn--sm" id="saveBtnBar" type="button" aria-pressed="false">
<span aria-hidden="true" data-bookmark>🔖</span> <span class="btn__label">Save</span>
</button>
<button class="btn btn--primary" id="applyBtnBar" type="button">Apply now</button>
</div>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Job Detail
A self-contained job detail page in the style of a modern job board. The header pairs a company logo with the role title, a verified-employer badge and a row of scannable chips for location, remote status, contract type, salary and freshness. Primary actions — apply, save and share — sit directly beneath, with a live applicant count that ticks up when you apply.
The body splits the listing into clear sections: an overview, a tick-listed set of responsibilities and requirements, and a benefits grid. A right rail carries a company snapshot card with key stats, an expandable “about” panel, and a hiring-manager note. A “similar jobs” list lets you bookmark related roles inline.
Interactions are vanilla JS: the save toggle stays in sync between the header and a sticky apply
bar that slides up once you scroll past the header (driven by an IntersectionObserver). Share uses
the Web Share API with a clipboard fallback, the company panel expands in place, and a small
toast() helper confirms every action. Layout collapses to a single column on tablet and is tuned
down to 360px.
Illustrative UI only — fictional jobs & companies, not a real hiring platform.