Columns
Equal-width column grid for side-by-side comparisons, feature lists, or mixed content layouts.
For isolated previews, theme switching, and sandbox editing, open the Columns playground on holydocs.com .
When to use
Use this component when page density, comparison, or spatial composition matters as much as the words themselves.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
2-Column
Side-by-side comparison layout.
Before
Manually write and maintain docs in a separate repo. Inconsistencies creep in with every release.
After
HolyDocs auto-generates and keeps docs in sync with your codebase on every push.
mdx<Columns cols={2}> <div> ### Before Manually write and maintain docs in a separate repo. Inconsistencies creep in with every release. </div> <div> ### After HolyDocs auto-generates and keeps docs in sync with your codebase on every push. </div></Columns>
3-Column
Three-column feature grid.
Fast — Docs build in seconds on Cloudflare's edge network.
Smart — AI keeps content accurate as your code evolves.
Beautiful — Polished themes that make your docs shine.
mdx<Columns cols={3}> <div> **Fast** — Docs build in seconds on Cloudflare's edge network. </div> <div> **Smart** — AI keeps content accurate as your code evolves. </div> <div> **Beautiful** — Polished themes that make your docs shine. </div></Columns>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | 2 | Number of columns. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<Columns cols={2}> <div> ### Before Manually write and maintain docs in a separate repo. </div> <div> ### After HolyDocs keeps your docs in sync automatically. </div></Columns>
Tips
- Layout components amplify good content and bad content equally. Fix hierarchy and copy length before adding more structure.
- Test long headings, narrow screens, and translated strings. Layout bugs usually appear at the edges, not in the happy path.
- Use layout to create contrast between sections, not to decorate every paragraph.
Related Components
Switchable content panels for presenting alternative configurations, languages, or frameworks.
More
- Interactive playground: Columns on holydocs.com
- Component library index: /components