Every way the design system represents a resume. Card formats first, layouts second. All formats consume the same ResumeCardData shape (from src/types/resume.ts) so production data flows through without remapping.
One DSResumeCard component. Container queries on its own width drive the layout: below 24rem the ATS chip clips to the top as a tab and previews stack; above 24rem the chip moves to the top-right corner and previews lay out as a 3-column grid. Same DOM, same chrome, same data — only the CSS rules switch.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Set `aspect-ratio` (any CSS value — `'1 / 1.4'` for portrait sheet, `'16 / 9'` for landscape) and the card enforces that ratio at any width. Body content that exceeds the available height fades out at the bottom via a mask gradient. Works with the container-query layout switch — the card goes portrait at small widths, flat at medium, and the body fade kicks in either way.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Other ways to represent a resume — the marketing fanned-deck visual is decorative-only; the SVG live preview lives in the resume builder's right panel.
The live SVG render uses the Typst pipeline from useResumeSvg. See /design-system/resume-builder for the panel rendering against real resume data.
DSCollectionLayout's default body is a CSS grid. Drop DSResumeCard items in directly. Filter chips, view tabs, and the actions slot all sit in the layout shell.
Every resume tied to your profile, current state at a glance.
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Case Manager @ John Muir Health
Director of Patient Services @ Dignity Health
One-axis snap-scroll for cases where a vertical grid would feel wrong — sample picker, suggested templates, recently-viewed. Apply `.ds-scroll-strip` to the container and `.ds-scroll-strip__item` to each card. Default item width is 22rem; override per-instance with `style="width: 14rem"` for narrower cards — DSResumeCard's container queries adapt the layout to whatever width is set.
Default width (22rem · medium):
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Case Manager @ John Muir Health
Director of Patient Services @ Dignity Health
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Case Manager @ John Muir Health
Director of Patient Services @ Dignity Health
Narrow override (14rem · small):
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Case Manager @ John Muir Health
Director of Patient Services @ Dignity Health
Head of Nursing @ UCSF Medical Center
Leadership track. Emphasis on clinical operations + cross-team management.
Case Manager @ John Muir Health
Director of Patient Services @ Dignity Health
Use when the user picks one resume to act on (re-score, optimize, attach to an application). DSResumePickerList wraps stacked DSResumePickerRow items inside one bordered card; the trailing slot takes per-row actions (DSBtn, overflow menu, status chip).