Klarhimmel UI

Testimonials, wall

Testimonials, wall preview

Install

npx shadcn add @klarhimmel/testimonials-wall

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TestimonialsWall props={{
          "eyebrow": "Wall of love",
          "title": "Small hotels, big opinions",
          "items": [
            {
              "emphasis": "featured",
              "quote": "Guests ask where we found the calendar. I tell them it was the best Sunday I ever spent on the business.",
              "name": "Sofia Brandt",
              "role": "Owner, Pensionat Björkudden"
            },
            {
              "emphasis": "normal",
              "quote": "Set up on a Sunday evening, first booking Monday morning.",
              "name": "Jonas Lind",
              "role": "Manager, Hotell Kvarnen"
            },
            {
              "emphasis": "normal",
              "quote": "Our guests keep telling us how easy the booking page is. Nobody has ever said that about our old one, and we have had the old one for eleven years.",
              "name": "Sara Holm",
              "role": "Front desk lead, Villa Lindeborg"
            },
            {
              "emphasis": "normal",
              "quote": "Honest pricing, and a person on the phone.",
              "name": "Mikael Dahl",
              "role": "Owner, Fjällstugan Björnbo"
            },
            {
              "emphasis": "normal",
              "quote": "The calendar sync just works. I have stopped checking it twice.",
              "name": "Amanda Ek",
              "role": "Revenue manager, Strandhotellet Saltö"
            },
            {
              "emphasis": "featured",
              "quote": "I recommend it to every owner I meet at the regional meetups, and I do not recommend things lightly.",
              "name": "Henrik Vall",
              "role": "Chair, Hospitality Network North"
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

import Block from '@/components/klarhimmel/blocks/testimonials-wall';
Also called
  • testimonials/wall
About
An editorial wall of short quotes in balanced columns: plain quotes under a hairline rule, one or two featured on a tinted card. No card boxes, unlike the grid. Use when you have many small voices rather than one big story.
Category
What customers say, one quote or many.

Notes

When to use it

An editorial wall of four to nine short quotes in balanced columns, with one or two set on a tinted card. Use it when there are many small voices; `testimonials-grid` boxes every quote, and `testimonials-split` gives one story the lead.

Writing for it

- Set emphasis to 'featured' on one or two items only. The featured quote is drawn larger on a tinted card and loses its force if there are many. - Quotes hold 320 characters. Since the columns balance by height, a few very short quotes next to long ones make the wall look intentional. - A photo is optional and replaces the initials with a 40px round image. Give its src and keep the alt empty, as the name is printed beside it.

Watch out for

The link under the wall is drawn only when it has a href, and the button itself disappears when its label is empty. The schema allows either one alone, so fill both or the link silently does not show.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TestimonialsWall props={{
          "eyebrow": "Wall of love",
          "title": "Small hotels, big opinions",
          "items": [
            {
              "emphasis": "featured",
              "quote": "Guests ask where we found the calendar. I tell them it was the best Sunday I ever spent on the business.",
              "name": "Sofia Brandt",
              "role": "Owner, Pensionat Björkudden"
            },
            {
              "emphasis": "normal",
              "quote": "Set up on a Sunday evening, first booking Monday morning.",
              "name": "Jonas Lind",
              "role": "Manager, Hotell Kvarnen"
            },
            {
              "emphasis": "normal",
              "quote": "Our guests keep telling us how easy the booking page is. Nobody has ever said that about our old one, and we have had the old one for eleven years.",
              "name": "Sara Holm",
              "role": "Front desk lead, Villa Lindeborg"
            }
          ]
        }} />
      </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'Wall of love'Text, up to 60 characters.
titlestring'Small hotels, big opinions'Text, up to 120 characters.
items{ emphasis, quote, name, role, photo }[]6 itemsList of 4 to 9. Each item: emphasis ('normal' | 'featured'), quote, name, role, photo (optional).
linkLink-Optional; empty is not rendered.
headingLevel'1' | '2'-One of '1', '2'. Optional; empty is not rendered.