# Logo Row

> A lead-in line and one wrapping row of client or press logos. Names become wordmarks when there is no image.

- **Slug:** `logo-row`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/logo-row
- **All files in one bundle:** https://viewership.ai/design/components/logo-row.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/logo-row.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/logo-row/`:

   - `LogoRow.astro` (raw: https://viewership.ai/design/raw/logo-row/LogoRow.astro.txt)

npm packages: none.

## Usage

```astro
---
import LogoRow from "../components/viewership/logo-row/LogoRow.astro";
---

<LogoRow />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import LogoRow from "./LogoRow.astro";
---

<LogoRow
  title="Stocked by independent shops from coast to coast"
  items={[{ name: "Harbor & Pine" }, { name: "Tallgrass" }, { name: "Lumen Co." }, { name: "Fieldnote" }, { name: "Saltmarsh" }, { name: "Kestrel" }]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Short lead-in line. |
| `items` | `{ name: string; src?: string; href?: string }[]` |  | Logos. Without `src` the name is set as a wordmark. |

## Source

### `src/components/viewership/logo-row/LogoRow.astro`

```astro
---
/**
 * LogoRow: a short lead-in line and one evenly spaced, wrapping row of logos.
 *
 * Give each item an `src` (single-colour marks work best) or leave it off to
 * set the name as a wordmark in the theme's display face.
 *
 * @example
 * <LogoRow title="Stocked by" items={[{ name: "Harbor & Pine" }, { name: "Lumen", src: "/logos/lumen.svg" }]} />
 */
interface Item {
  name: string;
  src?: string;
  href?: string;
}
interface Props {
  title?: string;
  items: Item[];
  class?: string;
}

const { title, items, class: className } = Astro.props;
---

<section class:list={["vs-logo-row", className]} aria-label={title ?? "Customers"}>
  <div class="vs-logo-row__inner">
    {title && <p class="vs-logo-row__title">{title}</p>}
    <ul class="vs-logo-row__list">
      {
        items.map((it) => {
          const mark = it.src ? <img src={it.src} alt={it.name} height="28" loading="lazy" /> : <span class="vs-display">{it.name}</span>;
          return <li>{it.href ? <a href={it.href}>{mark}</a> : mark}</li>;
        })
      }
    </ul>
  </div>
</section>

<style>
  .vs-logo-row {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-logo-row__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 6cqi, 72px) var(--vs-gutter);
  }
  .vs-logo-row__title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--vs-ink-3);
  }
  .vs-logo-row__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px clamp(28px, 6cqi, 72px);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vs-ink-2);
  }
  .vs-logo-row__list span {
    font-size: 1.375rem;
    white-space: nowrap;
  }
  .vs-logo-row__list img {
    display: block;
    width: auto;
    height: 28px;
    filter: grayscale(1);
    opacity: 0.75;
  }
  .vs-logo-row__list a {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
  }
  .vs-logo-row__list a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
</style>
```