---
type: block
title: Article
description: Editorial article layouts for long-form stories, interviews, and analysis.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro live props={{ name: 'article-1' }}
---
import Article1Block from "@/components/blocks/article-1.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.svg"
---

<Article1Block
  title="Designing Astro pages like a magazine, not a dashboard"
  description="A strong content system needs editorial hierarchy, deliberate whitespace, and room for imagery, quotes, and callouts to breathe."
  author={{
    image: avatarSil,
    initials: "SV",
    name: "Sil Veltman",
    date: "May 2026 · 8 min read",
  }}
  image={{
    src: placeholderImage,
    alt: "",
  }}
>
  <p>
    When a block library grows beyond buttons and cards, the next problem is
    rhythm. Article layouts need a predictable reading width, but they also need
    places for context, secondary media, and editor notes.
  </p>
  <p>
    This version keeps the story column focused while moving the supporting
    context into a side card. That makes it useful for essays, changelogs,
    interviews, and longer release notes.
  </p>
  <p>
    Build it with semantic sections, card surfaces, and a small set of reusable
    UI primitives instead of one-off editorial CSS.
  </p>
</Article1Block>
```

```astro live props={{ name: 'article-2' }}
---
import Article2Block from "@/components/blocks/article-2.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.svg"
---

<Article2Block
  title="How teams turn component libraries into publishable page systems"
  description="This variant starts centered with metadata inline, which works well for longer interview or analysis pages."
  author={{
    image: avatarSil,
    initials: "SV",
    name: "Sil Veltman",
    date: "May 3, 2026",
    readingTime: "6 min read",
  }}
  image={{
    src: placeholderImage,
    alt: "",
  }}
>
  <p>
    When a block library grows beyond buttons and cards, the next problem is
    rhythm. Article layouts need a predictable reading width, but they also need
    places for context, secondary media, and editor notes.
  </p>
  <p>
    This version keeps the story column focused while moving the supporting
    context into a side card. That makes it useful for essays, changelogs,
    interviews, and longer release notes.
  </p>
  <p>
    Build it with semantic sections, card surfaces, and a small set of reusable
    UI primitives instead of one-off editorial CSS.
  </p>
</Article2Block>
```

## Installation

```bash
npx shadcn@latest add @fulldev/article-1 @fulldev/article-2
```