Category Columns
Three topic columns for billing, product, and security with short plain text answers.
Three topic columns for billing, product, and security with short plain text answers.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Category Columns opens with a centered heading and a one-line subheading, then expands into a three-column grid. Each column carries a topic label underlined by a hairline rule, followed by a definition list of questions and plain-text answers stacked beneath it. The demo ships three topics, Billing, Product, and Security, each holding three Q&A pairs.
Every column is independent. You can rename the topic labels, rewrite any question or answer, add a fourth topic by extending the data array, or drop a column entirely. There are no interactive elements, so the block works without client-side JavaScript and renders instantly on the server.
Reach for this layout when your FAQ content divides naturally into a small number of topics and you want readers to jump straight to the section that applies to them. For a developer tools company this is a strong fit for a docs or pricing support page: engineers coming in with a billing question, an API export question, or a security compliance question can each find their column at a glance without scrolling through a long accordion.
Compared to a single accordion the columns put all topics on screen at once, which shortens time to answer for confident readers. Use an accordion variant when you have more than four or five questions per topic and need to keep page length in check.
A natural flow around it on a Marketing Pro page:
Before
After
One intro sentence sets the topic, then each column handles its own domain. A few ways to fill the three columns for a developer tools product:
Tip: keep each column to three or four Q&A pairs so the columns stay roughly the same height and the grid looks balanced at every breakpoint.