job detail career hiring apply recruitment position job detail posting apply requirements responsibilities salary career job detail page with apply button single job posting with requirements and sidebar
Job Board Base
Fetch pattern JSON:
curl https://webspire.de/patterns/job-board/base.json base.html
<article class="ws-job-board bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-6xl px-6">
<!-- Header -->
<div class="mb-10 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex items-start gap-5">
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 text-2xl font-bold text-white">A</div>
<div>
<p class="text-sm font-medium text-indigo-600">Acme Corporation</p>
<h1 class="mt-1 text-3xl font-bold text-slate-900">Senior Product Designer</h1>
<div class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-slate-500">
<span class="inline-flex items-center gap-1.5">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
San Francisco, CA (Remote OK)
</span>
<span class="inline-flex items-center gap-1.5">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
$140k – $180k
</span>
<span class="inline-flex items-center gap-1.5">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
5+ years experience
</span>
</div>
</div>
</div>
</div>
<!-- Two-column layout -->
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
<!-- Left: Main content -->
<div class="lg:col-span-2 space-y-10">
<section>
<h2 class="text-xl font-bold text-slate-900">Job Description</h2>
<div class="mt-4 space-y-4 text-slate-600 leading-relaxed">
<p>We're looking for a Senior Product Designer to join our growing design team. You'll work closely with product managers, engineers, and stakeholders to shape the user experience of our flagship platform used by millions worldwide.</p>
<p>In this role, you'll lead end-to-end design for key product areas, from discovery and research through prototyping and final implementation. You'll champion user needs while balancing business objectives and technical constraints.</p>
<p>The ideal candidate thrives in a fast-paced, collaborative environment and has a strong portfolio demonstrating both visual craft and systems thinking. You're comfortable presenting to senior leadership and mentoring junior designers.</p>
</div>
</section>
<section>
<h2 class="text-xl font-bold text-slate-900">Requirements</h2>
<ul class="mt-4 space-y-3">
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
5+ years of product design experience at a technology company
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Strong portfolio demonstrating end-to-end design process
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Expert proficiency in Figma, including component libraries and prototyping
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Experience with user research methods and usability testing
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Excellent communication skills and ability to articulate design decisions
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Understanding of HTML/CSS and design system principles
</li>
</ul>
</section>
<section>
<h2 class="text-xl font-bold text-slate-900">Responsibilities</h2>
<ul class="mt-4 space-y-3">
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Lead design for key product areas from concept through launch
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Conduct user research and translate insights into actionable design improvements
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Create and maintain design system components and documentation
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Collaborate with engineering to ensure pixel-perfect implementation
</li>
<li class="flex items-start gap-3 text-slate-600">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Mentor junior designers and contribute to team culture and processes
</li>
</ul>
</section>
</div>
<!-- Right: Sticky sidebar -->
<aside class="lg:sticky lg:top-8 lg:self-start space-y-6">
<a href="#" class="block w-full rounded-xl bg-indigo-600 px-6 py-3.5 text-center text-base font-semibold text-white shadow-lg shadow-indigo-500/25 transition hover:bg-indigo-700">Apply Now</a>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-6">
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500">Job Summary</h3>
<dl class="mt-4 space-y-4 text-sm">
<div>
<dt class="text-slate-500">Employment Type</dt>
<dd class="mt-0.5 font-medium text-slate-900">Full-Time</dd>
</div>
<div>
<dt class="text-slate-500">Experience Level</dt>
<dd class="mt-0.5 font-medium text-slate-900">Senior (5+ years)</dd>
</div>
<div>
<dt class="text-slate-500">Salary Range</dt>
<dd class="mt-0.5 font-medium text-slate-900">$140,000 – $180,000</dd>
</div>
<div>
<dt class="text-slate-500">Posted Date</dt>
<dd class="mt-0.5 font-medium text-slate-900">March 18, 2026</dd>
</div>
</dl>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-6">
<h3 class="text-sm font-semibold text-slate-900">Share this job</h3>
<div class="mt-3 flex gap-3">
<a href="#" class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-200 text-slate-600 transition hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400" aria-label="Share on Twitter">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-200 text-slate-600 transition hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400" aria-label="Share on LinkedIn">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="#" class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-200 text-slate-600 transition hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400" aria-label="Share via Email">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
</a>
<a href="#" class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-200 text-slate-600 transition hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400" aria-label="Copy link">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
</a>
</div>
</div>
</aside>
</div>
</div>
</article>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
jobdetailcareerhiringapplyrecruitmentposition
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Company logo, job title, and metadata strip. |
| description | Yes | Job description prose, requirements list, responsibilities list. |
| sidebar | Yes | Apply CTA, job summary card, share links. |