# LogoCloud

> Adopter marks for landing proof strips: a centered row, a row spread across the measure, or a ruled grid of cells.

```ts
import { LogoCloud } from "@sdxc/ui/landing";
```

Lays logo children out by `layout`, sizes each direct child to the logo height, and
draws an optional label above them.

## Examples

```tsx
<LogoCloud layout="spread" label={t("proof.label")}>
	<img src={acme} alt="Acme" />
	<img src={globex} alt="Globex" />
</LogoCloud>
```

```tsx
<LogoCloud layout="grid" muted>{marks}</LogoCloud>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `layout?` | `"row" \| "spread" \| "grid" \| "ruled" \| "tiles" \| "marquee"` | Arrangement. Defaults to DEFAULT_LAYOUT. |
| `label?` | `RemixNode` | A line above the marks, such as "Trusted by teams at". |
| `muted?` | `boolean` | Draws inline-SVG marks in the body ink and turns image marks grayscale, so a row of brand colors reads as one band; marks never lose opacity. |
| `children` | `RemixNode` | Consumer-supplied marks — `<img>` or inline SVG children. The cloud sizes each direct child; an SVG draws with `currentColor`, and a `--logo-scale` style on a mark (default 1) lets a square glyph stand taller than a wordmark. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Layout` | `"row" \| "spread" \| "grid" \| "ruled" \| "tiles" \| "marquee"` | How the marks sit: a centered wrapping `row`; a `spread` row edge to edge across the measure from the `lg` container (centered wrap below); a `grid` of 4rem cells ruled between them; `ruled`, the same grid closed by an outer frame; `tiles`, each mark on its own tinted 3:2 tile; or a `marquee` that scrolls them past. |