Logos, with quote · Klarhimmel UI

Install

npx shadcn add @klarhimmel/logos-featured

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import LogosFeatured from '@/components/klarhimmel/blocks/logos-featured';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <LogosFeatured props={{
          "eyebrow": "Trusted by 2,400 hotels",
          "quote": "It replaced three tools and a binder. The team stopped asking where things are.",
          "name": "Anders Wikström",
          "role": "Owner, Hotell Kvarnen",
          "logosTitle": "Also running on Northlight",
          "logos": [
            {
              "name": "Hotell Kvarnen",
              "media": {
                "src": "",
                "alt": "Hotell Kvarnen logo"
              }
            },
            {
              "name": "Villa Lindeborg",
              "media": {
                "src": "",
                "alt": "Villa Lindeborg logo"
              }
            },
            {
              "name": "Strandhotellet Saltö",
              "media": {
                "src": "",
                "alt": "Strandhotellet Saltö logo"
              }
            },
            {
              "name": "Fjällstugan Björnbo",
              "media": {
                "src": "",
                "alt": "Fjällstugan Björnbo logo"
              }
            },
            {
              "name": "Pensionat Björkudden",
              "media": {
                "src": "",
                "alt": "Pensionat Björkudden logo"
              }
            },
            {
              "name": "Gårdshotellet",
              "media": {
                "src": "",
                "alt": "Gårdshotellet logo"
              }
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/logos-featured';

Also called

logo-cloud/featured

Category: Who already uses it, as a quiet row or grid of logos.

Notes

When to use it

A customer quote with a row of logos under it, for when one endorsement should lead and the logos back it up. For logos alone use `logos-grid`; for several quotes use `testimonials-grid`.

Writing for it

- The quote holds 320 characters. Pick a line with a result in it, then give the speaker's name (60) and role (80) in the next two fields. - Logos take two to six entries, each with a name (40) and a media image. The name is also the screen reader text once an image is set. - The logosTitle (80) introduces the row, so word it as a claim about the customers, not just a label.

Watch out for

An item with no image and no name is dropped from the row. While no image is set the name is drawn as a text wordmark, which looks like a stand-in rather than a real logo.

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 LogosFeatured from '@/components/klarhimmel/blocks/logos-featured';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <LogosFeatured props={{
          "eyebrow": "Trusted by 2,400 hotels",
          "quote": "It replaced three tools and a binder. The team stopped asking where things are.",
          "name": "Anders Wikström",
          "role": "Owner, Hotell Kvarnen",
          "logosTitle": "Also running on Northlight",
          "logos": [
            {
              "name": "Hotell Kvarnen",
              "media": {
                "src": "",
                "alt": "Hotell Kvarnen logo"
              }
            },
            {
              "name": "Villa Lindeborg",
              "media": {
                "src": "",
                "alt": "Villa Lindeborg logo"
              }
            },
            {
              "name": "Strandhotellet Saltö",
              "media": {
                "src": "",
                "alt": "Strandhotellet Saltö logo"
              }
            },
            {
              "name": "Fjällstugan Björnbo",
              "media": {
                "src": "",
                "alt": "Fjällstugan Björnbo logo"
              }
            },
            {
              "name": "Pensionat Björkudden",
              "media": {
                "src": "",
                "alt": "Pensionat Björkudden logo"
              }
            },
            {
              "name": "Gårdshotellet",
              "media": {
                "src": "",
                "alt": "Gårdshotellet logo"
              }
            }
          ]
        }} />
      </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`	`'Trusted by 2,400 hotels'`	Text, up to 60 characters.
`quote`	`string`	`'It replaced three tools and a binde…'`	Text, up to 320 characters.
`name`	`string`	`'Anders Wikström'`	Text, up to 60 characters.
`role`	`string`	`'Owner, Hotell Kvarnen'`	Text, up to 80 characters.
`logosTitle`	`string`	`'Also running on Northlight'`	Text, up to 80 characters.
`logos`	`{ name, media }[]`	`6 items`	List of 2 to 6. Each item: name, media.