ArticleCard

Card component for article previews. Shows title, excerpt, date, author, and optional tags. Links to the article detail page.

Installation

typescript

import { ArticleCard } from '@happyvertical/smrt-svelte';

Basic Usage

Article card with all default options.

Getting Started with SMRT

Learn how to build your first SMRT application in under 5 minutes.

January 15, 2025 By Jane Smith

svelte

<ArticleCard article={article} />

With Tags

Show article tags as badges.

Advanced SMRT Patterns

Explore advanced patterns for building scalable applications with SMRT.

January 10, 2025 By John Doe

advancedpatternsarchitecture

svelte

<ArticleCard article={article} showTags />

Minimal Card

Title only without metadata.

Getting Started with SMRT

svelte

<ArticleCard
  article={article}
  showExcerpt={false}
  showDate={false}
  showAuthor={false}
/>

Props

Prop	Type	Default	Description
`article` *	`Article`	-	Article object with id, slug, title, description, publish_date, author, tags
`showExcerpt`	`boolean`	`true`	Show article description/excerpt
`showDate`	`boolean`	`true`	Show publication date
`showAuthor`	`boolean`	`true`	Show author name
`showTags`	`boolean`	`false`	Show article tags as badges

TypeScript

typescript

import { ArticleCard } 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 {
  article: Article;
  showExcerpt?: boolean;
  showDate?: boolean;
  showAuthor?: boolean;
  showTags?: boolean;
}