Section grid
A flexible navigation primitive for resume sections. Two container layouts (grid, inline), two cell layouts (stacked, inline), three column templates, and two themes — combined to fit the career builder navigation, the resume builder picker tabs, and any FAB-style add menu. The API is preserved verbatim from the production component (src/components/common/ResumeSectionGrid.vue); only the visual tokens were re-pointed to --ds-*.
Layout variants
Container and cell layouts compose orthogonally. Five working combinations cover every consumer surface.
Standard grid · stacked cells
layout='grid' · columns='standard' (4-col) · buttonLayout='stacked'. Icon over label, badge top-right. The default for compact navigation surfaces.
Wide grid · stacked cells
columns='wide' · 4 cols on mobile, 6 on tablet+. Used by CareerDataNav.vue when 12 sections need to fit a single horizontal band.
Single column · stacked cells
columns='single'. One cell per row — for narrow rails, mobile drawers, or vertical menus.
Inline · inline cells
layout='inline' · buttonLayout='inline'. Horizontal scroll row of icon-then-label cells. Honours --ds-resume-section-grid-start-inset / -end-inset for page-margin alignment. fullLabel is preferred when the cell layout is inline.
Dark theme · standard grid
themeVariant='dark'. Tokens flip to the warm-cream-on-ink palette used inside the resume builder picker panel.
In context
The same primitive sitting inside its three production homes — career builder, picker tabs, and FAB-style add menu.
Career builder navigation
Wide layout with the active section highlighted. Click a tile to swap active — mirrors the live behaviour of CareerDataNav.vue.
Resume builder picker tabs (dark)
Standard 4-col grid on the dark builder panel. The active tab uses the inverted badge fill for emphasis.
FAB add-menu
A compact popover-style surface — single column, stacked cells, no badges. Each tile drops a new entry into the active section.
States
Empty, partial, and full population. Badges only render when the consumer supplies them — there's no placeholder zero.
Empty
Every section badge is omitted. Cells stay clickable — the user adds their first item and the badge appears.
Partial
Two sections populated, three still empty. Mixing badged and unbadged cells happens often in the early-onboarding state.
Full
Every section badged. The wide column layout balances cleanly when all 12 cells carry data.
Badge severities
Severity tints the badge foreground. Values map to status tokens — neutral, accent, success, warning, muted.
Severity row
Same shape, four severities. The neutral badge is the default — accent / success / warning are reserved for sparing emphasis.
API
Props and slots — preserved verbatim from the production component.
Reference
Drop-in replacement for ResumeSectionGrid. Pass the same data shape; emit handler signature is unchanged.
sections- Array of
DSResumeSectionItem. Each item carries key, icon, label, optional fullLabel, optional href (renders NuxtLink), active flag, statBadge. themeVariant'light'(default) on cream surfaces;'dark'for the builder panel.layout'grid'(default) or'inline'for horizontal scroll.buttonLayout'stacked'(default — icon over label) or'inline'(icon then label, prefersfullLabel).columns'single' | 'standard' | 'wide'. Only applies whenlayout='grid'.ariaLabel- Optional override for the nav landmark label.
@select- Emitted with the section
key. Fires on every cell click — buttons and NuxtLinks both.