Content components

Last updated:

|Edit this page

This page details frequently used code components you can add to articles. There are additional components demonstrated at posthog.com/example-components.

Call to action

Adding <ArrayCTA /> to any article will add this simple CTA:


Ready to find out more?


Don't overuse it, but it's useful for high intent pages, like comparisons.

Comparison tables

We used to create custom HTML tables, but we now have an easier to use component that allows us to change the styling of any table.

To use, first import the componenents by adding this code near the start, right after the frontmatter:

JSX
import { ComparisonTable } from 'components/ComparisonTable'
import { ComparisonRow } from 'components/ComparisonTable/row'

Then, customize the code below to fit your needs.

JSX
<ComparisonTable column1="Company name 1" column2="Company name 2">
<ComparisonHeader category="Optional header row" />
<ComparisonRow column1={true} column2="Text" feature="Feature name" description="Feature description" />
</ComparisonTable>

In ComparisonRow:

  • Values for column1 and column2 can be: {true} | {false} | "Text string"
  • feature is required but description can be omitted (only if not using that column for the entire table)

Here's what a comparison table looks like:

PostHogLogRocket

Self-serve

Free to try, no mandatory sales calls

Session replay

Watch real users use your product; diagnose bugs

Heatmaps

See where users click and interact

Product analytics

Custom trends, funnels, paths, and retention analysis

Autocapture

Capture events without manual instrumentation

Group analytics

Track metrics at the account or company level

A/B testing

Test changes and analyze their impact

Performance monitoring

Track core web vitals, server usage, and network performance.

Error monitoring

Capture exceptions and failures automatically

Issue management

Score issues, triage, monitor app health

Alerting

Set alerts on metric thresholds or anomalies

Open source

Build your own apps and contribute code

Important: You can only use the table components in mdx files – an extension to Markdown that lets you use JSX code in a markdown file.

Captions

You can add captions below images using the following code:

<Caption>Add you caption copy here</Caption>

Here's an example of what it looks like:

PostHog webshare pricing experiment

Adding the 'Buy Now' call to action and adjusting the text enabled Webshare to boost conversion by 26%

Quotation

You can add a styled quote component using the following code:

JSX
<BorderWrapper>
<Quote
imageSource="/images/customers/utku.jpg"
size="md"
name="Utku Zihnioglu"
title="Founder & CEO, Webshare "
quote={`“We saw PostHog, and saw that it does everything that we needed, and had all these syncing capabilities too. We just knew right away that it was the right tool for us. We started using all of its capabilities.”`}
/>
</BorderWrapper>

It looks like this:

“We saw PostHog, and saw that it does everything that we needed, and had all these syncing capabilities too. We just knew right away that it was the right tool for us. We started using all of its capabilities.”
Utku ZihniogluFounder & CEO, Webshare

We mainly use them in customer stories and some product pages.

Questions?

Was this page useful?

Next article

Testimonials and G2

Social reviews on G2 We collect reviews from users on G2 , both to act as social proof and to collect feedback on our product. After a process of trialling incentives, messaging and processes throughout 2022 we have established that: Reviews are best sought from users who have had a meaningful experience with the product (see below) Direct gift card incentives work better than other incentives, including charitable donations Batching reviews into monthly sends is imprecise and a non-trivial…

Read next article