FAQ, question and answer rows

Install

npx shadcn add @klarhimmel/faq-rows

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import FaqRows from '@/components/klarhimmel/blocks/faq-rows';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FaqRows props={{
          "eyebrow": "Policies",
          "title": "The practical details, in plain words",
          "description": "What we promise, and what we ask of you.",
          "items": [
            {
              "question": "How do I pay?",
              "answer": "By card when you book, or at the front desk on arrival if you prefer. We accept cards, Swish and cash."
            },
            {
              "question": "What are the check-in and check-out times?",
              "answer": "Check-in from 15:00, check-out by 11:00. Early arrival or late departure can often be arranged: ask the front desk."
            },
            {
              "question": "Can I change my dates?",
              "answer": "Yes, free of charge until 48 hours before arrival, subject to availability. Write to us or use the link in your confirmation."
            },
            {
              "question": "Is the hotel accessible?",
              "answer": "The ground floor and two rooms are step-free, with a roll-in shower in one. Tell us what you need and we will prepare the room."
            },
            {
              "question": "Do you have parking?",
              "answer": "Six spaces behind the house, free for guests and first come first served. The public garage on Torggatan is a four minute walk."
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/faq-rows';

Also called

faq/rows

About: Every answer open, set as a table of rows: the question is a heading on the left, the answer beside it on the right, hairlines between. Nothing to click, so it prints and scans well; stacks on narrow containers.
Category: The questions people ask before they buy.

Notes

When to use it

A policy-style table where every answer is open: the question as a heading on the left, the answer beside it. Nothing to click, so it prints and scans well. For lighter, openable cards use `faq-centered`.

Writing for it

- Questions are headings in a one-third column and hold 120 characters, so phrase them as short noun phrases or plain questions such as 'Do you have parking?'. - Answers get 500 characters and span the wider two-thirds. Put concrete times, prices and conditions there, since the reader sees them without any click. - The default title shows the register: 'The practical details, in plain words'. A title (120) that promises facts fits this layout better than 'FAQ'.

Watch out for

An empty answer is allowed by the schema (only the question is required) and then the right cell is simply blank, leaving a heading with nothing beside it. Check every row after editing.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import FaqRows from '@/components/klarhimmel/blocks/faq-rows';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FaqRows props={{
          "eyebrow": "Policies",
          "title": "The practical details, in plain words",
          "description": "What we promise, and what we ask of you.",
          "items": [
            {
              "question": "How do I pay?",
              "answer": "By card when you book, or at the front desk on arrival if you prefer. We accept cards, Swish and cash."
            },
            {
              "question": "What are the check-in and check-out times?",
              "answer": "Check-in from 15:00, check-out by 11:00. Early arrival or late departure can often be arranged: ask the front desk."
            },
            {
              "question": "Can I change my dates?",
              "answer": "Yes, free of charge until 48 hours before arrival, subject to availability. Write to us or use the link in your confirmation."
            },
            {
              "question": "Is the hotel accessible?",
              "answer": "The ground floor and two rooms are step-free, with a roll-in shower in one. Tell us what you need and we will prepare the room."
            },
            {
              "question": "Do you have parking?",
              "answer": "Six spaces behind the house, free for guests and first come first served. The public garage on Torggatan is a four minute walk."
            }
          ]
        }} />
      </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`	`'Policies'`	Text, up to 60 characters.
`title`	`string`	`'The practical details, in plain wor…'`	Text, up to 120 characters.
`description`	`string`	`'What we promise, and what we ask of…'`	Text, up to 300 characters.
`items`	`{ question, answer }[]`	`5 items`	List of 2 to 8. Each item: question, answer.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.