Pros & Cons Block

A two-column content block that lists the advantages and disadvantages of a single option side by side.

Contentbit

by COcontentbit

Vite + React + TS

Pros

• Cheap to run on serverless infrastructure
• Near-instant setup with zero configuration
• Scales automatically with traffic spikes

Cons

• No offline mode for local development
• Cold starts add noticeable latency

"use client";

import ProsConsBlock from "@/components/ui/pros-cons";
import { genericBlocks } from "@contentbit/blocks";
import {
  assertValidDocument,
  compileDocument,
  createBlockRegistry,
} from "@contentbit/core";
import { ContentBlocks } from "@contentbit/react";

const markdown = `:::pros-cons
+ Cheap to run on serverless infrastructure
+ Near-instant setup with zero configuration
+ Scales automatically with traffic spikes
- No offline mode for local development
- Cold starts add noticeable latency
:::```

const registry = createBlockRegistry().use(genericBlocks());
const document = assertValidDocument(
  compileDocument(markdown, registry),
  "pros-cons-demo.md",
);

export default function ProsConsDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl px-4 py-8">
      <ContentBlocks
        document={document}
        components={{ "pros-cons": ProsConsBlock }}
        renderMarkdown={(md) => <p>{md}</p>}
      />
    </div>
  );
}

Dependencies

lucide-react @contentbit/react @contentbit/blocks @contentbit/core

Tags

Pros Con Comparison Content Block Markdown

Source

contentbit.dev

Published

7/8/2026