Logos strip · Klarhimmel UI

Install

npx shadcn add @klarhimmel/logos-strip

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <LogosStrip props={{
          "title": "Trusted by teams who care about craft",
          "description": "",
          "logos": [
            {
              "name": "Alder & Co"
            },
            {
              "name": "Meridian"
            },
            {
              "name": "Fjordworks"
            },
            {
              "name": "Lumen"
            },
            {
              "name": "Basalt"
            },
            {
              "name": "Kestrel"
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

logo-cloud/row

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

Notes

When to use it

A single quiet line of company names under the hero, as a light signal of who uses the product. It has no images; for real logo images use `logos-grid` or `logos-featured`.

Writing for it

- The title is a small muted line of up to 80 characters, such as Trusted by teams at. Write it as the start of a sentence the names complete. - Logos are plain names (40 characters each), two to eight of them. Use the shortest recognisable form of each company name. - The description is optional, 300 characters, and rarely needed. Skip it so the strip stays a single line.

Watch out for

The title is rendered as an h2 and the names as typeset text with no links or images. Eight long names are a lot for one line, so prefer short company names.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <LogosStrip props={{
          "title": "Trusted by teams who care about craft",
          "description": "",
          "logos": [
            {
              "name": "Alder & Co"
            },
            {
              "name": "Meridian"
            },
            {
              "name": "Fjordworks"
            },
            {
              "name": "Lumen"
            },
            {
              "name": "Basalt"
            },
            {
              "name": "Kestrel"
            }
          ]
        }} />
      </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
`title`	`string`	`'Trusted by teams who care about cra…'`	Text, up to 80 characters.
`description`	`string`	`''`	Text, up to 300 characters. Optional; empty is not rendered.
`logos`	`{ name }[]`	`6 items`	List of 2 to 8. Each item: name.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.