BlocksContentBlog 01

Blog 01

About this block

Blog 01 is a blog post grid section that displays article cards with a cover image, category badge, title, excerpt, and author avatar with name and date. Built with shadcn/ui Card, Badge, and Avatar components, it uses a three-column responsive grid that collapses to one column on mobile. The post data is passed as an array of objects — connect it to any CMS, MDX file system, or Supabase query to render real posts.

When to use it

  • Product blogs that want to surface recent articles on the marketing homepage
  • Content marketing sections on SaaS landing pages that demonstrate topical expertise
  • Documentation sites that feature a 'latest updates' or 'from the blog' section
  • Any page where linking to published content builds authority and keeps visitors engaged longer

Notes

Display three posts maximum in this layout for clean grid alignment on desktop. For a full paginated blog index, build a dedicated blog listing page rather than using this block with more items.

Frequently asked questions

Does Blog 01 fetch real posts automatically?
No, post data is passed as an array of objects — connect it to a CMS, MDX files, or a Supabase query yourself.
How many posts should I display?
Three, for clean grid alignment on desktop. For a full paginated index, build a dedicated blog listing page instead of adding more items here.
Does it support category badges?
Yes, each post card includes a category badge field alongside the cover image, title, excerpt, and author avatar.
Shadcn/ui components
badgecardavatar
Connected toStatic — no backend wired