# SponsorWall

> A tiered sponsor and partner wall: each tier is a labelled, ruled grid of marks whose cells and logos shrink with the tier, followed by a cloud of individual backers and a closing call to action, so the biggest supporters read first and every backer is shown.

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

Stacks sponsor tiers, the backer cloud and the closing actions, and opens a heading
scope so every tier label sits one level under the band's title.

## Examples

```tsx
<SponsorWall actions={<LinkButton href={sponsor}>{t("sponsor.cta")}</LinkButton>}>
	<SponsorWall.Tier label={t("sponsor.gold")} size="xl">{goldMarks}</SponsorWall.Tier>
	<SponsorWall.Tier label={t("sponsor.silver")} size="lg">{silverMarks}</SponsorWall.Tier>
</SponsorWall>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | SponsorWall.Tier groups, highest first, then an optional SponsorWall.Individuals. |
| `actions?` | `RemixNode` | Closing actions, such as "Become a sponsor", rendered inside a centred CtaGroup. |

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


### SponsorWall.Tier

One sponsor tier: its label, then its marks in a ruled grid scaled by `size`.

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `RemixNode` | The tier's name, such as "Gold partners"; it heads the tier at the ambient depth. |
| `size?` | `"sm" \| "md" \| "lg" \| "xl"` | Cell and logo scale. Defaults to DEFAULT_TIER_SIZE. |
| `children` | `RemixNode` | The marks: inline SVGs drawn in `currentColor`, images, or links wrapping either. Each direct child becomes one cell; passed as a list, the tier balances its rows. |

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


### SponsorWall.Individuals

The individual backers: a centred, wrapping cloud of SponsorWall.Person circles under an optional label.

| Prop | Type | Description |
| --- | --- | --- |
| `label?` | `RemixNode` | A label above the cloud, such as "Individual sponsors". |
| `children` | `RemixNode` | SponsorWall.Person circles. |

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


### SponsorWall.Person

One individual backer: a linked circle with their picture, or their initials, named by `name` for assistive technology and as a tooltip.

| Prop | Type | Description |
| --- | --- | --- |
| `href` | `string` | Where the circle links: the backer's profile or site. |
| `name` | `string` | The backer's name, which is the link's accessible name and its tooltip. |
| `src?` | `string` | Picture URL; without one the circle shows the name's initials. |
| `size?` | `"sm" \| "md" \| "lg"` | Circle size. Defaults to DEFAULT_PERSON_SIZE. |

Also accepts everything in `Omit<TagProps<"a">, "children" | "href" | "role">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `TierSize` | `"sm" \| "md" \| "lg" \| "xl"` | How prominent a tier is: `xl` for the top partners down to `sm` for the long tail. |
| `PersonSize` | `"sm" \| "md" \| "lg"` | How large a backer's circle draws, usually by how much they give. |