Awards 6 - Milestones grid with separator rows

Pro

A display-size milestones heading over a labeled grid of milestone title, type, and year with horizontal separators between entries.

Shadcn Awards 6 block

Component Data

  • ID:awards6
  • Access:pro
  • Created:Aug 26, 2025
  • Type:block

Awards 6 block design & features

Awards6 opens with a four-column grid on large screens where the first column is intentionally empty for alignment and the remaining span carries a stacked headline: an enormous "Milestones" line and a smaller "& Achievements." subtitle. Below that, a faux table header labels "Milestone", "Type", and "Year", then the Shadcn UI Separator component repeats between each data row so entries read as stacked bands rather than zebra striping.

Each milestone row is a responsive grid: padded index numerals appear only on large breakpoints, the title spans two columns on wide layouts, and the right side pairs a type label with the year on a single flex row. Typography alternates between heavy display sizes up top and restrained body and mono accents in the list.

The aesthetic is crisp and timeline-like, suitable when you want achievements to feel like a ledger. Content-wise you need a short title, a category or nomination string, and a year per item. Complexity is moderate due to the breakpoint-specific column visibility.

On medium and smaller widths the grid compresses to three columns with adjusted spans so types and years stay reachable without horizontal scrolling.