# Article Card

## Essence

Reusable public article preview card.

`Article Card` helps a reader decide whether to open a note/article by showing title, short summary, date, and topics in one clickable object.

## Hook

Use when an article needs to appear outside its full article page.

## Internal Rules

- The whole card is clickable when `href` is provided.
- Uses public-safe article metadata only.
- Shows title and summary as the core content.
- Uses `summary` as the card body copy; source data should be normalized before reaching the component.
- Shows publish date as quiet metadata.
- Formats parseable publish dates as human-readable text such as `June 18th, 2026`.
- Keeps metadata, title, summary, and topic rows vertically stable so repeated article cards align across a grid row.
- Shows topics when available.
- Surface padding and primary internal gap consume `--spacing-surface-*` tokens.
- Uses `--shadow-soft` to lift cards from secondary background surfaces.
- Linked interaction states consume alt-accent interaction tokens.
- Does not render article body content.
- Does not infer article metadata.
- Does not accept `description` as a separate article-card body prop.

## Use When

- Showing latest notes on the homepage.
- Listing all notes on `/notes/`.
- Showing related reading after an article.

## Do Not Use When

- Rendering the full article page.
- Rendering a generic project/system card.
- Showing tags that need to be independently clickable.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `title` | string | Article title. |
| `summary` | string | Short preview text. |
| `href` | URL/string | Article destination. |
| `publishedAt` | date/string | Public publish date metadata. |
| `topics` | string[] | Public topic labels. |

## Accessibility Notes

- The card is a single link with readable text content.
- Focus states must remain visible.
- Hover and pressed states should use alt-accent interaction states so the article card feels like a quiet reading surface, not a primary CTA.
- Metadata should not look like the primary action.

## Related Components And Patterns

- `Tag`: renders topic chips for now.
- `Articles Index Page`: uses Article Card for article lists.
- `Related Reading`: uses Article Card for recommendations.
- `Home Page`: uses Article Card for latest notes.

## Code Paths

- `packages/design-system/src/components/ArticleCard.astro`