ArticleList
Grid layout for displaying multiple article cards. Automatically handles responsive columns and empty states.
Installation
typescript
import { ArticleList } from '@happyvertical/smrt-svelte';Basic Usage
Display articles in a responsive grid layout.
svelte
<ArticleList articles={articles} />Fixed Columns
Specify exact number of columns.
svelte
<ArticleList articles={articles} columns={2} />With Tags
Show article tags as badges.
svelte
<ArticleList articles={articles} showTags />Minimal Display
Show only titles and excerpts.
svelte
<ArticleList
articles={articles}
showDate={false}
showAuthor={false}
/>Empty State
Custom message when no articles available.
No blog posts yet. Check back soon!
svelte
<ArticleList
articles={[]}
emptyMessage="No blog posts yet. Check back soon!"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
articles * | Article[] | - | Array of article objects to display |
columns | number | 'auto' | 'auto' | Number of grid columns or auto for responsive |
showExcerpt | boolean | true | Show article descriptions |
showDate | boolean | true | Show publication dates |
showAuthor | boolean | true | Show author names |
showTags | boolean | false | Show article tags as badges |
emptyMessage | string | 'No articles published yet...' | Message shown when no articles |
TypeScript
typescript
import { ArticleList } from '@happyvertical/smrt-svelte';
interface Article {
id: string;
slug: string;
title: string;
description: string | null;
publish_date: string | null;
author: string | null;
tags: string; // JSON array or comma-separated
}
interface Props {
articles: Article[];
columns?: number | 'auto';
showExcerpt?: boolean;
showDate?: boolean;
showAuthor?: boolean;
showTags?: boolean;
emptyMessage?: string;
}