v0.9.4defuss-shadcn
Theme

defuss-shadcn / Website / Company / job-details

Built with: CSS

Job DetailsBLK

Describes one position's responsibilities, requirements, and benefits - with a summary that stays in view and the apply action. Part of the Company blocks.

On this page (2)
Component Skill — components/job-details/component-skill.md

Native basis

A header (title, facts, apply button), then <section>s with headings and lists, and an <aside> summary - a <dl> of the key facts that sticks while the description scrolls.

Built from

Badge, Button.

Web Platform APIs

<dl>Container queries:has()text-wrap

Classes

.mk-job-details.mk-job-details-head.mk-job-details-back.mk-job-details-title.mk-job-details-tags.mk-job-details-layout.mk-job-details-body.mk-job-details-list.mk-job-details-benefits.mk-job-details-summary

Data attributes

None - the summary becomes a sticky side column from 52rem.

§Default

Header with the facts as Badges, the description in sections with check lists and benefit tiles, and a summary (<aside>) that sticks from 52rem.

§CSS view file

/* -- Job Details (website · Company) --------------------------------------
   Describes one position's responsibilities, requirements, and benefits - with a summary that stays in view and the apply action. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-job-details, .mk-job-details *, .mk-job-details ::before, .mk-job-details ::after) { box-sizing: border-box; }
  .mk-job-details { container: mk-job-details / inline-size; width: 100%; }
  .mk-job-details-head { display: grid; gap: 0.75rem; padding-block-end: 2rem; border-block-end: 1px solid var(--border); }
  .mk-job-details-back { display: inline-flex; align-items: center; gap: 0.25rem; width: fit-content; color: var(--muted-foreground); font-size: 0.875rem; text-decoration: none;
    & svg { width: 1rem; height: 1rem; }
    &:hover { color: var(--foreground); }
  }
  .mk-job-details-title { margin: 0; font-size: clamp(1.75rem, 4cqi, 2.5rem); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-job-details-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mk-job-details-layout { display: grid; gap: 2.5rem; padding-block-start: 2rem; }
  .mk-job-details-body {
    display: grid;
    gap: 2rem;
    min-width: 0;
    & section { display: grid; gap: 0.75rem; }
    & h2 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.7; text-wrap: pretty; }
  }
  .mk-job-details-list {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    & li { position: relative; padding-inline-start: 1.75rem; line-height: 1.6; }
    & li::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 0.3em;
      width: 1.125rem;
      height: 1.125rem;
      border-radius: 50%;
      background: color-mix(in oklch, var(--primary) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.625rem no-repeat;
    }
  }
  .mk-job-details-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    & li { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.9375rem; font-weight: 500; }
    & svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--primary); }
  }
  .mk-job-details-summary {
    display: grid;
    gap: 1.25rem;
    align-self: start;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & dl { display: grid; gap: 0.875rem; margin: 0; }
    & dl div { display: grid; gap: 0.125rem; }
    & dt { color: var(--muted-foreground); font-size: 0.8125rem; }
    & dd { margin: 0; font-weight: 500; }
    & .btn { width: 100%; }
  }
  @container mk-job-details (min-width: 52rem) {
    .mk-job-details-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; }
    .mk-job-details-summary { position: sticky; top: 1.5rem; }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-job-details-list li::before { background: CanvasText; forced-color-adjust: none; }
    .mk-job-details-summary { border-color: CanvasText; }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub