Featured Blog Card
Hero card used at the top of /blog for the latest post. Desktop: horizontal image-left / content-right. Mobile: stacked image-over-content.
Desktop layout
Mobile layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
post* | BlogPost | - | Blog post data from Sanity. Needs `title`, `slug`, `publishedAt`, `excerpt`; `mainImage` and `tags` are optional. |
layout | "auto" | "desktop" | "mobile" | "auto" | "auto" swaps between layouts via the `lg` breakpoint (matches production). "desktop" and "mobile" force a specific view — useful for previewing both side-by-side. |
Import
tsx
import { FeaturedBlogCard } from '@/components/sections/FeaturedBlogCard'Usage
tsx
{/* Production (auto-switches at lg breakpoint) */}
<FeaturedBlogCard post={post} />
{/* Force a specific layout */}
<FeaturedBlogCard post={post} layout="desktop" />
<FeaturedBlogCard post={post} layout="mobile" />