Section heading
DSSectionLabel is a quieter heading primitive for sub-sections WITHIN an in-app page. It's the right tool when a page (typically wrapped in DSPageLayout) has multiple sub-sections that each need their own title — "Your resumes", "Optimize your score", "Recent activity". Distinct from DSSectionHead, which is the marketing-rhythm primitive (display Lora, larger scale, supports a centered variant). DSSectionLabel is start-aligned, smaller, and reads as in-app chrome.
Default — h2 with subtitle
The everyday case. Lora display title at h2 with a one-line DM Sans subtitle. Sits above any body content (a card grid, a form, a checklist).
Your resumes
3 drafts, 2 published. Last updated 4 hours ago.
Title only
The minimal case — drop the sub when the title speaks for itself. Common for nested sub-sections under a DSSectionLabel that already carries the subtitle.
Optimize your score
With trailing actions
The actions slot lives at the right end of the heading row on md+ and wraps below the title on mobile. Right for section-scoped controls — a Run check button, a sort menu, an inline filter.
Recent activity
Edits, exports, and ATS runs from the past 7 days.
Nested — h3 for a sub-section inside a sub-section
Drop the level to h3 when you've already used h2 in the same page. The font scale steps down so the visual hierarchy matches the heading hierarchy.
Optimize your score
Improve ATS compatibility with targeted fixes.
Quick fixes
Two-minute changes that move the needle.
Nested body
Stacked — multiple labels in a single page body
The canonical pattern in a typical in-app page: each sub-section starts with a DSSectionLabel, then its body content. The labels carry the page rhythm without competing with the page-level title.
Drafts
In-progress resumes you haven't published yet.
No drafts yet
Published
Resumes you've shared with applications.