FAQ, centred cards · Klarhimmel UI

Install

npx shadcn add @klarhimmel/faq-centered

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FaqCentered props={{
          "eyebrow": "FAQ",
          "title": "Good to know before you book",
          "description": "The short answers. For anything else, we are one message away.",
          "items": [
            {
              "question": "Is breakfast included?",
              "answer": "Yes, every morning from 07:30 to 10:30. We can pack a picnic breakfast if you leave early."
            },
            {
              "question": "Can I check in late?",
              "answer": "Any time. After 22:00 you get a door code by text and your key is waiting in the box on the wall."
            },
            {
              "question": "Do you take dogs?",
              "answer": "In four of the seven rooms, for 150 kr a night. Tell us when you book so we can pick the right room."
            },
            {
              "question": "What is the cancellation policy?",
              "answer": "Free up to 48 hours before arrival. After that we charge the first night unless we can rebook the room."
            }
          ],
          "more": {
            "label": "All questions and answers",
            "href": "#help"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

faq/centered

About: A centred heading over a narrow column of questions, each in its own rounded card that opens on click, and one link at the bottom. Gentler than the ruled list and good for short sets of three to six.
Category: The questions people ask before they buy.

Notes

When to use it

A short set of three to six questions that a visitor opens on click, each in its own rounded card under a centred heading. If there are many questions or you want every answer visible, `faq-rows` or `faq-columns` fits better.

Writing for it

- Both title (120) and each question (160) are required, so write the question the way a customer would type it into a search box, not as a topic label. - Answers stop at 600 characters and sit behind a click, so put the decision-making fact in the first sentence and leave the detail for the rest. - The single link under the cards (more) is meant for a help page; give it a label like the one in the default, 'All questions and answers', that says where it leads.

Watch out for

The 'more' link is drawn only when its label is non-empty, so clearing the label removes the link entirely, whatever the href says. The set must hold at least two items and at most eight.

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 FaqCentered from '@/components/klarhimmel/blocks/faq-centered';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FaqCentered props={{
          "eyebrow": "FAQ",
          "title": "Good to know before you book",
          "description": "The short answers. For anything else, we are one message away.",
          "items": [
            {
              "question": "Is breakfast included?",
              "answer": "Yes, every morning from 07:30 to 10:30. We can pack a picnic breakfast if you leave early."
            },
            {
              "question": "Can I check in late?",
              "answer": "Any time. After 22:00 you get a door code by text and your key is waiting in the box on the wall."
            },
            {
              "question": "Do you take dogs?",
              "answer": "In four of the seven rooms, for 150 kr a night. Tell us when you book so we can pick the right room."
            },
            {
              "question": "What is the cancellation policy?",
              "answer": "Free up to 48 hours before arrival. After that we charge the first night unless we can rebook the room."
            }
          ],
          "more": {
            "label": "All questions and answers",
            "href": "#help"
          }
        }} />
      </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`	`'FAQ'`	Text, up to 60 characters.
`title`	`string`	`'Good to know before you book'`	Text, up to 120 characters.
`description`	`string`	`'The short answers. For anything els…'`	Text, up to 300 characters.
`items`	`{ question, answer }[]`	`4 items`	List of 2 to 8. Each item: question, answer.
`more`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.