# Logo Grid
> Logos in bordered cells beside a short statement, like a spec sheet.
- **Slug:** `logo-grid`
- **Kind:** section ยท **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/ui/components/logo-grid
- **All files in one bundle:** https://viewership.ai/ui/components/logo-grid.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/logo-grid.json
## Install
1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):
```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```
2. Copy this file into `src/components/viewership/logo-grid/`:
- `LogoGrid.astro` (raw: https://viewership.ai/ui/raw/logo-grid/LogoGrid.astro.txt)
npm packages: none.
## Usage
```astro
---
import LogoGrid from "../components/viewership/logo-grid/LogoGrid.astro";
---
```
## Example
The gallery demo, verbatim. Use the import path from Usage instead of `./`.
```astro
---
import LogoGrid from "./LogoGrid.astro";
---
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | | Short headline beside the grid. |
| `body` | `string` | | Supporting line. |
| `items` | `{ name: string; src?: string; href?: string }[]` | | Logos. Multiples of four fill the grid. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |
## Source
### `src/components/viewership/logo-grid/LogoGrid.astro`
```astro
---
/**
* LogoGrid: logos in bordered cells beside a short statement, like a spec
* sheet. Two columns when narrow, four when wide.
*
* @example
*
*/
interface Item {
name: string;
src?: string;
href?: string;
}
interface Props {
title?: string;
body?: string;
items: Item[];
as?: "h2" | "h3";
class?: string;
}
const { title, body, items, as: Heading = "h2", class: className } = Astro.props;
---
{
(title || body) && (
{title && {title}}
{body && {body}
}
)
}
{
items.map((it) => {
const mark = it.src ? 
: {it.name};
return - {it.href ? {mark} : mark}
;
})
}