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

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

## Content 1

```tsx title="Usage of @fulldev/content-1 (react/gallery/blocks/content-1.tsx, not installed)"
import { Content1 } from "@/components/blocks/content-1"

export default function Content1Demo() {
  return (
    <>
      <Content1
        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: "#" },
        ]}
      />
    </>
  )
}
```

## Content 2

```tsx title="Usage of @fulldev/content-2 (react/gallery/blocks/content-2.tsx, not installed)"
import { Content2 } from "@/components/blocks/content-2"

export default function Content2Demo() {
  return (
    <>
      <Content2
        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: "#" },
        ]}
      />
    </>
  )
}
```

## Content 3

```tsx title="Usage of @fulldev/content-3 (react/gallery/blocks/content-3.tsx, not installed)"
import { Content3 } from "@/components/blocks/content-3"

export default function Content3Demo() {
  return (
    <>
      <Content3
        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: "#" },
        ]}
      />
    </>
  )
}
```

## Content 4

```tsx title="Usage of @fulldev/content-4 (react/gallery/blocks/content-4.tsx, not installed)"
import { Content4 } from "@/components/blocks/content-4"

export default function Content4Demo() {
  return (
    <>
      <Content4
        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: "#" },
        ]}
      />
    </>
  )
}
```

## Install what this page shows

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