---
type: block
title: Content
description: Flexible narrative content sections for explainers, comparisons, and supporting context.
---

> 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: 'content-1' }}
---
import Content1Block from "@/components/blocks/content-1.astro"
---

<Content1Block
  title="Build better products with a system designed for clarity"
  description="A stacked content section that pairs editorial copy with a full-width image below. Use it to explain a feature, process, or value proposition with visual support."
  features={[
    "Clear headline with supporting description",
    "Bullet list for quick feature scanning",
    "Action buttons for next steps",
    "Full-width image below the content",
  ]}
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#" },
  ]}
/>
```

```astro live props={{ name: 'content-2' }}
---
import Content2Block from "@/components/blocks/content-2.astro"
---

<Content2Block
  title="Pair editorial copy with a supporting image"
  description="Use this block when screenshots, diagrams, or photos need to sit beside copy without turning the whole page into a gallery."
  features={[
    "Clear headline and intro with supporting copy",
    "One media surface with rounded treatment",
    "Concise bullet points instead of a heavy card grid",
  ]}
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#" },
  ]}
/>
```

```astro live props={{ name: 'content-3' }}
---
import Content3Block from "@/components/blocks/content-3.astro"
---

<Content3Block
  title="A full-width media section with a spread header"
  description="This variation uses a spread layout with title and description on the left, action buttons on the right, and a prominent full-width image below."
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#" },
  ]}
/>
```

```astro live props={{ name: 'content-4' }}
---
import Content4Block from "@/components/blocks/content-4.astro"
---

<Content4Block
  title="See the difference in every detail"
  description="A 1:2 split layout with a smaller text column on the left and a larger image on the right. Use it for feature highlights where the visual should dominate."
  features={[
    "Compact text column with checklist",
    "Larger image area for visual emphasis",
    "Asymmetric grid for visual hierarchy",
  ]}
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#" },
  ]}
/>
```

## Installation

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