Sable Media Content Grid
An editorial magazine layout inspired by classic newspaper front pages.
Features
- Asymmetric grid: 2 large cards spanning 2 columns, 4 standard cards
- Category badges in crimson, headlines with serif fonts, author attribution with reading time
- Dramatic black-and-white palette with a single crimson (#DC2626) accent
- Hover state transitions headline color to crimson
- Separator-based visual rhythm mimicking print layout
- Light mode: white bg, black text, crimson accents
- Dark mode: near-black (#111111) bg, white text, crimson accents
- Fully responsive: single column on mobile, 2-col tablet, 4-col desktop
Usage
import SableMediaContentGrid from "@/registry/sable-media-content-grid/registry-item";
export default function Page() {
return <SableMediaContentGrid />;
}
Customization
- Replace placeholder image areas with actual images or thumbnails
- Modify the
articles data array to use your own content
- Adjust the crimson accent (#DC2626) to match your brand
- Swap serif font-family for your preferred editorial typeface
- Add links to headlines and "View All Stories" button
