Ruby Media Content Grid
A sophisticated editorial content grid designed for media, news, and publishing platforms.
Features
- Featured article — Large hero card (3/5 width) with full image area, category badge, and detailed excerpt
- Side stack — Two smaller article cards (2/5 width) stacked alongside the featured article
- Bottom grid — 3-column card grid for additional stories
- Author rows — Avatar with initials fallback, name, and date
- Category badges — Red-600 accent badges for content categorization
- Bookmark buttons — Interactive bookmark icons with hover states
- Read time — Clock icon with estimated reading duration
- Strong typography — Font-black headings, text-balance, tracking-tight
Dependencies
@/components/vue-ui/card — Shadcn-Vue Card@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/avatar — Shadcn-Vue Avatar@/components/vue-ui/separator — Shadcn-Vue Separator@/components/vue-ui/button — Shadcn-Vue Button
Customization
- Articles: Replace data arrays with real article content
- Images: Swap placeholder divs with actual images using
<img> or next/image
- Colors: Change red-600 badge accent to match your brand
- Layout: Adjust lg:grid-cols ratio for different featured/side proportions
