---
type: block
title: Articles
description: Collection and listing layouts for journals, magazines, and editorial feeds.
---

> 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: 'articles-1' }}
---
import Articles1Block from "@/components/blocks/articles-1.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.svg"
---

<Articles1Block
  title="Stories, guides, and ideas from the team"
  description="Lead with one high-importance story, then let the rest of the catalog fall into a compact companion grid."
  articles={[
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Guide",
      title: "Astro patterns for editorial homepages",
      description:
        "Compact companion cards keep the secondary feed useful without competing with the lead story.",
      author: {
        image: avatarSil,
        initials: "SV",
        name: "Sil Veltman",
        date: "May 3, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Essay",
      title: "Why section primitives scale better than page templates",
      description:
        "A composable section system reduces boilerplate and keeps editorial pages feeling fresh.",
      author: {
        image: avatarSil,
        initials: "JD",
        name: "Jane Doe",
        date: "Apr 28, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Launch",
      title: "Shipping a registry with real previews",
      description:
        "Live previews make it easier for teams to evaluate blocks before installing them.",
      author: {
        image: avatarSil,
        initials: "MR",
        name: "Mark Reed",
        date: "Apr 21, 2026",
      },
    },
  ]}
/>
```

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

<Articles2Block
  title="Editorial systems for product teams"
  description="A featured essay with supporting notes for teams shaping product launches, documentation, and release narratives."
  featured={{
    image: {
      src: placeholderImage,
      alt: "",
    },
    category: "Strategy",
    title: "Designing a launch page that can keep changing after release day",
    description:
      "The strongest launch pages are not frozen announcements. They are living surfaces with room for customer proof, product detail, and follow-up stories as the release matures.",
    author: {
      image: avatarSil,
      initials: "NR",
      name: "Nora Reed",
      date: "May 1, 2026",
    },
  }}
  articles={[
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Planning",
      title: "How to turn release notes into a product story",
      description:
        "Start with the user change, then support it with details that explain timing, tradeoffs, and next steps.",
      author: {
        image: avatarSil,
        initials: "MC",
        name: "Maya Chen",
        date: "Apr 28, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Research",
      title: "Using customer language without flattening the message",
      description:
        "Good proof points sound specific. Keep the quote close to the context where the customer actually felt the value.",
      author: {
        image: avatarSil,
        initials: "TS",
        name: "Theo Singh",
        date: "Apr 21, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Workflow",
      title: "A weekly editorial rhythm for product teams",
      description:
        "A lightweight cadence helps teams keep docs, changelogs, and campaign pages aligned without a heavy planning ritual.",
      author: {
        image: avatarSil,
        initials: "AL",
        name: "Ari Lee",
        date: "Apr 14, 2026",
      },
    },
  ]}
/>
```

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

<Articles3Block
  title="All articles"
  articles={[
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Docs",
      title: "Designing better release notes",
      description:
        "This row-based listing works well when the article page itself carries most of the visual drama.",
      author: {
        image: avatarSil,
        initials: "SV",
        name: "Sil Veltman",
        date: "May 5, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Launch",
      title: "A content system for launch pages",
      description:
        "Horizontal cards give each article equal weight while staying scannable.",
      author: {
        image: avatarSil,
        initials: "JD",
        name: "Jane Doe",
        date: "Apr 30, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Guide",
      title: "Working with reusable sections",
      description:
        "Learn how section primitives reduce duplication across editorial layouts.",
      author: {
        image: avatarSil,
        initials: "MR",
        name: "Mark Reed",
        date: "Apr 22, 2026",
      },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      category: "Essay",
      title: "The case for wider editorial layouts",
      description:
        "Why content-first teams are moving away from narrow single-column designs.",
      author: {
        image: avatarSil,
        initials: "AL",
        name: "Amy Lin",
        date: "Apr 15, 2026",
      },
    },
  ]}
/>
```

```astro live props={{ name: 'articles-4' }}
---
import Articles4Block from "@/components/blocks/articles-4.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
---

<Articles4Block
  title="Ideas, process, and practice"
  description="Text-focused article cards for indexes that prioritize readability and category browsing."
  articles={[
    {
      category: "Process",
      title: "Component launch checklist",
      description:
        "A step-by-step guide for shipping new components to production without breaking existing pages.",
      author: {
        image: avatarSil,
        initials: "SV",
        name: "Sil Veltman",
        date: "May 4, 2026",
      },
    },
    {
      category: "Design",
      title: "Editorial pages that convert",
      description:
        "How to balance storytelling with clear calls to action in content-heavy layouts.",
      author: {
        image: avatarSil,
        initials: "JD",
        name: "Jane Doe",
        date: "Apr 27, 2026",
      },
    },
    {
      category: "Workflow",
      title: "A calmer design system workflow",
      description:
        "Reduce churn and keep your team focused by treating updates as editorial work.",
      author: {
        image: avatarSil,
        initials: "MR",
        name: "Mark Reed",
        date: "Apr 20, 2026",
      },
    },
    {
      category: "Opinion",
      title: "When to ship blocks over templates",
      description:
        "Templates lock you in. Blocks give teams the flexibility to compose pages that match their content.",
      author: {
        image: avatarSil,
        initials: "AL",
        name: "Amy Lin",
        date: "Apr 13, 2026",
      },
    },
    {
      category: "Guide",
      title: "Structuring content for reuse",
      description:
        "How to think about content architecture when building with composable section primitives.",
      author: {
        image: avatarSil,
        initials: "SV",
        name: "Sil Veltman",
        date: "Apr 6, 2026",
      },
    },
    {
      category: "Launch",
      title: "Source-first development",
      description:
        "Ship components as source files and let teams pull exactly what they need.",
      author: {
        image: avatarSil,
        initials: "JD",
        name: "Jane Doe",
        date: "Mar 30, 2026",
      },
    },
  ]}
/>
```

## Installation

```bash
npx shadcn@latest add @fulldev/articles-1 @fulldev/articles-2 @fulldev/articles-3 @fulldev/articles-4
```