UI ComponentsContent
Article
Article/blog post card for content listings and feeds
Article card for displaying blog posts, news items, and content feeds.
Structure
Card Layout (Default)
┌─────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────┐ │
│ │ image-container │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ image │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ content │ │
│ │ category │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ title │ │ │
│ │ │ Article Title Here │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ excerpt │ │ │
│ │ │ Brief description of the │ │ │
│ │ │ article content... │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ meta │ │ │
│ │ │ ┌────┐ Jane Doe · Jan 15 │ │ │
│ │ │ │ 👤 │ 5 min read │ │ │
│ │ │ └────┘ │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ tags │ │ │
│ │ │ │React│ │TypeScript│ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘Horizontal Layout
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌───────────┐ ┌───────────────────────────────────┐ │
│ │ image │ │ content │ │
│ │ │ │ category │ │
│ │ │ │ title │ │
│ │ │ │ excerpt... │ │
│ │ │ │ author · date · reading time │ │
│ └───────────┘ └───────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<Article
title="Getting Started with TypeScript"
excerpt="Learn the basics of TypeScript and how to set up your first project."
image={{ src: '/blog/typescript.jpg', alt: 'TypeScript logo' }}
author={{ name: 'Jane Doe', avatar: '/avatars/jane.jpg' }}
date="2024-03-15"
category="Engineering"
tags={['TypeScript', 'JavaScript', 'Tutorial']}
readingTime={5}
url="/blog/getting-started-typescript"
/>In Blog Grid
<Blog
posts={posts.map(post => (
<Article key={post.slug} {...post} />
))}
/>Featured Article
<Article
layout="featured"
featured
title="The Future of Web Development"
image={heroImage}
author={author}
/>