Klarhimmel UI

Testimonials, featured and more

Testimonials, featured and more preview

Install

npx shadcn add @klarhimmel/testimonials-split

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import TestimonialsSplit from '@/components/klarhimmel/blocks/testimonials-split';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TestimonialsSplit props={{
          "eyebrow": "Customers",
          "title": "The people who run these places",
          "featured": {
            "quote": "We went from answering booking emails at midnight to waking up to confirmed stays. It gave me my evenings back, and the guests have never been happier with how easy it is.",
            "name": "Karin Åberg",
            "role": "Owner, Pensionat Exempel",
            "photo": {
              "src": "",
              "alt": "Portrait of Karin Åberg in the guesthouse garden"
            }
          },
          "more": [
            {
              "quote": "Set up on a Sunday evening. First booking on Monday morning.",
              "name": "Jonas Lind",
              "role": "Manager, Hotell Provet"
            },
            {
              "quote": "Honest pricing, and a person on the phone when I need one.",
              "name": "Mikael Dahl",
              "role": "Owner, Fjällstugan Test"
            },
            {
              "quote": "The calendar sync just works. I stopped checking it twice.",
              "name": "Amanda Ek",
              "role": "Revenue manager, Strandhotellet"
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

import Block from '@/components/klarhimmel/blocks/testimonials-split';
Also called
  • testimonials/split
About
One long quote on a tinted panel with a portrait, beside a stack of two or three short quotes. A lead story with supporting voices; unlike the wall, the hierarchy is fixed.
Category
What customers say, one quote or many.

Notes

When to use it

One long quote on a tinted panel with a portrait, beside a stack of two or three short quotes. A fixed hierarchy of lead story and supporting voices; use `testimonials-wall` when no voice should lead.

Writing for it

- The featured quote is required and holds 360 characters, and each supporting quote holds 200. Make the featured one the story and the others one-line reactions. - The featured portrait is cropped at 4 to 5 portrait, so supply a photo of the person with space over the head. - The title is required (120 characters) and capped at a narrow width, so say who is talking or what they have in common.

Watch out for

The supporting list needs at least two items and at most three. Only the featured card has a photo field, so the others are plain text cards and will look lighter by design.

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 TestimonialsSplit from '@/components/klarhimmel/blocks/testimonials-split';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TestimonialsSplit props={{
          "eyebrow": "Customers",
          "title": "The people who run these places",
          "featured": {
            "quote": "We went from answering booking emails at midnight to waking up to confirmed stays. It gave me my evenings back, and the guests have never been happier with how easy it is.",
            "name": "Karin Åberg",
            "role": "Owner, Pensionat Exempel",
            "photo": {
              "src": "",
              "alt": "Portrait of Karin Åberg in the guesthouse garden"
            }
          },
          "more": [
            {
              "quote": "Set up on a Sunday evening. First booking on Monday morning.",
              "name": "Jonas Lind",
              "role": "Manager, Hotell Provet"
            },
            {
              "quote": "Honest pricing, and a person on the phone when I need one.",
              "name": "Mikael Dahl",
              "role": "Owner, Fjällstugan Test"
            },
            {
              "quote": "The calendar sync just works. I stopped checking it twice.",
              "name": "Amanda Ek",
              "role": "Revenue manager, Strandhotellet"
            }
          ]
        }} />
      </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.

PropTypeDefaultDescription
eyebrowstring'Customers'Text, up to 60 characters.
titlestring'The people who run these places'Text, up to 120 characters.
featured{ quote, name, role, photo }{…}Fields: quote, name, role, photo.
more{ quote, name, role }[]3 itemsList of 2 to 3. Each item: quote, name, role.
headingLevel'1' | '2'-One of '1', '2'. Optional; empty is not rendered.