Home / Snippets / UI Components /

Job listing card

Stripe-accent job tile: monogram logo, comp band chip, remote perks, apply CTA.

Northwind Labs

Staff design engineer

€95k – €118k

Remote (EU) · product team · 4-day summer weeks

Design tokens Storybook Annual conf budget

Posted 3 days ago

Widely Supported

uino-js

Quick implementation

.job-listing-card {
  position: relative;
  padding-left: 1.25rem;
}
.job-listing-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: linear-gradient(180deg, var(--accent), oklch(0.5 0.1 260));
}

Prompt this to your LLM

Salary transparency in the card hierarchy.

Build a job listing card.

Use .job-listing-demo and .job-listing-card.
Include logo initial, company line, job title, salary pill, meta line, perk chips, footer with posted date + Apply button.
Left accent bar via pseudo-element.

Return HTML + CSS.

Why this matters in 2026

EU pay transparency rules make salary bands expected UI; cards should surface them at preview time.

The logic

Accent rail ties list scanlines together when cards stack in a column feed.

Accessibility & performance

Keep Apply as a button that opens your applicant flow; salary should repeat in plain text for screen readers.