FAQ, columns
Install
npx shadcn add @klarhimmel/faq-columnsUsage
import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import FaqColumns from '@/components/klarhimmel/blocks/faq-columns';
export default function Section() {
return (
<Theme theme="brand">
<BlockSurface>
<FaqColumns props={{
"eyebrow": "Questions",
"title": "Answers before you ask",
"description": "Can not find what you need? Write to us and a person will reply within a working day.",
"items": [
{
"question": "Can I try it before I pay?",
"answer": "Yes. Every paid plan starts with 14 days free and needs no card. Starter stays free for as long as you like."
},
{
"question": "How do I move my existing projects?",
"answer": "Import from a spreadsheet or another planning tool. Owners, dates and files come across, and we can help with larger moves."
},
{
"question": "Can clients see their own work?",
"answer": "Share one project through a review link. Clients comment and approve without an account and never see the rest of your workspace."
},
{
"question": "What happens to my data if I leave?",
"answer": "Export everything as open files at any time. After you cancel we keep your workspace for 30 days, then delete it."
},
{
"question": "Do you offer discounts for non-profits?",
"answer": "Registered non-profits and schools get 30% off any paid plan. Write to us with your details and we will set it up."
},
{
"question": "Where is my data stored?",
"answer": "In European data centres, encrypted in transit and at rest. Business plans can choose a specific region."
}
]
}} />
</BlockSurface>
</Theme>
);
}Install
Import
import Block from '@/components/klarhimmel/blocks/faq-columns';- faq/columns
- Category
- The questions people ask before they buy.
Notes
When to use it
Up to eight questions with every answer already open, in two columns, for readers who scan rather than click. For a longer list that should fold away, use `faq-list`; for a printable single-column table, `faq-rows`.
Writing for it
- Questions hold 120 characters and answers 400, the tightest limits among the FAQ blocks, so write each answer as two sentences at most. - Because nothing is hidden, every item competes for attention; cut the questions nobody has actually asked before you reach the cap of eight. - Aim for an even number of items. With an odd count the second column ends one card short and the grid looks unfinished.
Watch out for
The columns only appear on wide containers (@3xl); on narrow ones the items stack in a single run, so item order is the reading order and not a left column followed by a right column. The title is optional here, unlike in several sibling blocks.
Pairs well with
Usage
The block in a page, with its default content (long lists shortened). Every prop is in the table below.
import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import FaqColumns from '@/components/klarhimmel/blocks/faq-columns';
export default function Section() {
return (
<Theme theme="brand">
<BlockSurface>
<FaqColumns props={{
"eyebrow": "Questions",
"title": "Answers before you ask",
"description": "Can not find what you need? Write to us and a person will reply within a working day.",
"items": [
{
"question": "Can I try it before I pay?",
"answer": "Yes. Every paid plan starts with 14 days free and needs no card. Starter stays free for as long as you like."
},
{
"question": "How do I move my existing projects?",
"answer": "Import from a spreadsheet or another planning tool. Owners, dates and files come across, and we can help with larger moves."
},
{
"question": "Can clients see their own work?",
"answer": "Share one project through a review link. Clients comment and approve without an account and never see the rest of your workspace."
}
]
}} />
</BlockSurface>
</Theme>
);
}Props
The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | 'Questions' | Text, up to 60 characters. |
title | string | 'Answers before you ask' | Text, up to 120 characters. |
description | string | 'Can not find what you need? Write t…' | Text, up to 300 characters. |
items | { question, answer }[] | 6 items | List of 2 to 8. Each item: question, answer. |
headingLevel | '1' | '2' | - | One of '1', '2'. Optional; empty is not rendered. |