Recommendation Card
Categorized career recommendation card from ResultsView's locked section (Bunch D, Phase 2). Three fixed categories — strength, growth area, next step — each with its own icon and badge color, capped at 3 cards per grade.
All three categories
Strength (green, Sparkles), growth area (amber, Target), next step (accent/violet, Compass) — semantic colors from DESIGN.md, never a new palette. Density pass: cards flow in a self-adjusting 2-column grid instead of stacking full-width. Rendered at 624px, the width the grid actually gets on /results (max-w-2xl minus px-6) — so the card widths here are the card widths in the product.
Metrics reasoning was strong
Your metrics answer showed real rigor — measurable, tied to the actual pain point, with a clear "what would disprove this" instinct.
Ground trade-offs in numbers
Your build-vs-partner reasoning was solid strategically but stayed qualitative. Even a rough cost or timeline estimate would show feasibility thinking.
Make research decision-driven
Next time you propose research, name upfront what decision the findings would change — it shows the research is purposeful, not a checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
| recommendation | Recommendation | — | Category + title + body — one categorized career recommendation from the grading response. |
| categoryLabel | string | — | Localized badge label for the category — from resultsCopy.recommendationCategoryLabel[category]. |
| moreLabel | string | 'Show more' | Localized "Show more" toggle — only rendered when the body actually overflows 2 lines. |
| lessLabel | string | 'Show less' | Localized "Show less" toggle, shown once expanded. |
Clamped body (density pass)
In a narrow grid cell, the body clamps to 2 lines and reveals a "Show more" toggle only when the text actually overflows — a short recommendation never grows a redundant toggle.
Ground trade-offs in numbers
Your build-vs-partner reasoning was solid strategically but stayed qualitative. Even a rough cost or timeline estimate would show feasibility thinking. Your build-vs-partner reasoning was solid strategically but stayed qualitative. Even a rough cost or timeline estimate would show feasibility thinking.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn