UI ComponentsContent
Blog
Blog listing and layout with posts, categories, and pagination
Blog listing layout with support for featured posts, categories, tags, and multiple layout options.
Structure
┌─────────────────────────────────────────────────────┐
│ header │
│ ┌─────────────────────────────────────────────────┐ │
│ │ title description │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ featured │
│ ┌─────────────────────────────────────────────────┐ │
│ │ featured-post (hero) │ │
│ └─────────────────────────────────────────────────┘ │
├───────────────────────────────────────┬─────────────┤
│ posts │ sidebar │
│ ┌──────────┐ ┌──────────┐ ┌────────┐ │ ┌─────────┐ │
│ │ post-card│ │ post-card│ │post-...│ │ │categorie│ │
│ │ ┌──────┐ │ │ ┌──────┐ │ │ │ │ │ tags │ │
│ │ │image │ │ │ │image │ │ │ │ │ │newsletter│
│ │ ├──────┤ │ │ ├──────┤ │ │ │ │ └─────────┘ │
│ │ │title │ │ │ │title │ │ │ │ │ │
│ │ │excerpt│ │ │ │excerpt│ │ │ │ │
│ │ │meta │ │ │ │meta │ │ │ │ │ │
│ │ └──────┘ │ │ └──────┘ │ │ │ │ │
│ └──────────┘ └──────────┘ └────────┘ │ │
├───────────────────────────────────────┴─────────────┤
│ pagination │
│ ← prev 1 2 3 ... 10 next → │
└─────────────────────────────────────────────────────┘Usage
<Blog
title="Engineering Blog"
description="Technical articles from our team"
posts={posts}
categories={[
{ label: 'Engineering', slug: 'engineering' },
{ label: 'Product', slug: 'product' },
{ label: 'Design', slug: 'design' },
]}
featured={[posts[0]]}
pagination={{ page: 1, totalPages: 10 }}
layout="grid"
sidebar
/>