Columns — Plandalf docs

Columns arrange cards and other short content in a responsive grid. Use them for balanced, side-by-side material that is easier to compare than read sequentially. If one side becomes long, split the material into normal sections instead.

Basic card grid

Get started

Set up your first Plandalf checkout path with the quickstart guide.

API reference

Explore endpoints, parameters, and examples for the Plandalf API.

<Columns cols={2}>
  <Card title="Get started" icon="rocket" href="/docs/quickstart">
    Set up your first Plandalf checkout path with the quickstart guide.
  </Card>
  <Card title="API reference" icon="code" href="/docs/api/reference">
    Explore endpoints, parameters, and examples for the Plandalf API.
  </Card>
</Columns>

Column sub-component

Use Column when each side contains arbitrary MDX rather than a single card. This mirrors Mintlify’s pattern for paired install and usage snippets.

Installation

npm install @plandalf/browser

Usage

import { createPlandalf } from "@plandalf/browser";

const plandalf = createPlandalf({ site: "demo" });

<Columns cols={2}>
  <Column>

  **Installation**

  ```bash
  npm install @plandalf/browser
  ```

  </Column>
  <Column>

  **Usage**

  ```js
  import { createPlandalf } from "@plandalf/browser";

  const plandalf = createPlandalf({ site: "demo" });
  ```

  </Column>
</Columns>

Balanced comparison

<Columns cols={2}>
  <Column>
    <Panel title="Hosted checkout" icon="panel-top-open" inline>
      Use a hosted or modal frame when Plandalf owns the checkout experience.
    </Panel>
  </Column>
  <Column>
    <Panel title="Embedded checkout" icon="code" inline>
      Use an embedded surface when checkout should sit inside your app layout.
    </Panel>
  </Column>
</Columns>

Three-column scan

Use three columns for short, parallel explanations. Keep each column similar in weight so the reader can compare them quickly.

Offer

The product, price, checkout path, and buying surface.

Deadline

The timer, coupon, expiry, redirect, or launch window.

Handoff

The webhook, integration, sequence, or fulfillment action after purchase.

<Columns cols={3} gap="sm" align="start">
  <Column>
    <strong>Offer</strong>

    The product, price, checkout path, and buying surface.
  </Column>
  <Column>
    <strong>Deadline</strong>

    The timer, coupon, expiry, redirect, or launch window.
  </Column>
  <Column>
    <strong>Handoff</strong>

    The webhook, integration, sequence, or fulfillment action after purchase.
  </Column>
</Columns>

Spanning content

Use span when one column needs to carry a wider code sample or explanation beside shorter supporting content.

Open checkout

await plandalf.present("pro-plan");

<button data-plandalf-present="pro-plan">Buy Pro</button>

Properties

colsnumberdefault: 2

Number of columns per row. Accepts values from 1 to 4 and collapses responsively on smaller screens.

Plandalf extensions

columnsnumber

Alias for cols when imported snippets use a more explicit property name.

gapsm | md | lgdefault: md

Gap between columns.

alignstart | center | stretchdefault: stretch

Vertical alignment for the column grid.

span1 | 2 | 3 | 4default: 1

Set on an individual Column to let it occupy more grid tracks on wider screens.

class | classNamestring

Optional utility classes for local spacing or text changes.

Authoring rules

Use columns for short peer ideas, not long article sections.
Keep each column self-contained. Do not rely on reading left-to-right for critical setup.
Put cards or panels directly inside columns only when those surfaces are the content, not wrappers around more grids.
If one column grows much longer than the others, split the content into normal headings.

Panel Add supporting side notes.

Cards Use for linked next steps.

Tiles Use for dense navigation.