Sections

Blog Section

Blog post preview grid with category badge, author, and read time

Quick Preview

From the blog

Insights, tutorials, and news from our team.

View all posts

Design

Building scalable design systems with Tailwind CSS v4

Explore how the new @theme directive and CSS-first configuration simplify large-scale token management.

Sarah J.

May 20, 20256 min read

Engineering

React 19 server actions: the complete guide

A hands-on walkthrough of progressive enhancement with server actions, optimistic updates, and forms.

Alex C.

May 15, 20259 min read

Accessibility

Accessibility-first component patterns

How we approach WCAG 2.2 compliance from day one—keyboard focus, ARIA roles, and color contrast.

Maya P.

May 8, 20257 min read

Installation

// Copy the component from
src/components/sections/BlogSection.tsx

Usage

import { BlogSection } from '@/components/sections/BlogSection'

const posts = [
  {
    title:      'Building scalable design systems',
    slug:       'design-systems',
    excerpt:    'Exploring Tailwind v4 token management...',
    category:   'Design',
    date:       'May 20, 2025',
    readTime:   '6 min read',
    coverColor: 'from-teal-400 to-emerald-500',
    author: { name: 'Sarah J.', initials: 'SJ' },
  },
]

<BlogSection posts={posts} columns={3} />

2-Column Variant

2-column layout

Latest articles

Insights, tutorials, and news from our team.

View all posts

Design

Building scalable design systems with Tailwind CSS v4

Explore how the new @theme directive and CSS-first configuration simplify large-scale token management.

Sarah J.

May 20, 20256 min read

Engineering

React 19 server actions: the complete guide

A hands-on walkthrough of progressive enhancement with server actions, optimistic updates, and forms.

Alex C.

May 15, 20259 min read

Accessibility

Accessibility-first component patterns

How we approach WCAG 2.2 compliance from day one—keyboard focus, ARIA roles, and color contrast.

Maya P.

May 8, 20257 min read

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named Blog Section in React/Next.js.
Goal: recreate the same overall UI and behavior as the Blog Section reference from a component gallery.
What it needs to communicate: Blog post preview grid with category badge, author, and read time.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- title: string — default "From the blog" — Section heading
- subtitle: string — Section sub-heading
- posts: BlogPost[] — Array of blog post objects
- columns: 2 | 3 — default 3 — Number of grid columns
- showViewAll: boolean — default true — Show "View all" link
- viewAllHref: string — default "/blog" — Href for view-all link
- className: string — Additional CSS classes

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Gradient cover area per post
- Category badge
- Author avatar with initials
- Date and read time meta
- Hover shadow transition
- Server Component

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`title`	`string`	`"From the blog"`	Section heading
`subtitle`	`string`	-	Section sub-heading
`posts`	`BlogPost[]`	-	Array of blog post objects
`columns`	`2 \| 3`	`3`	Number of grid columns
`showViewAll`	`boolean`	`true`	Show "View all" link
`viewAllHref`	`string`	`"/blog"`	Href for view-all link
`className`	`string`	-	Additional CSS classes

Features

✓Gradient cover area per post
✓Category badge
✓Author avatar with initials
✓Date and read time meta
✓Hover shadow transition
✓Server Component