SponsorWall

A tiered sponsor and partner wall.

DesktopPhone

View code

tsx

<LandingSection>
	<LandingHeader eyebrow="Partners" align="center" description="…">
		Built with the support of these teams
	</LandingHeader>
	<SponsorWall
		actions={
			<LinkButton href="/sponsor" color="brand" mix={[landingCtaChrome()]}>
				Become a sponsor
			</LinkButton>
		}
	>
		<SponsorWall.Tier label="Gold partners" size="xl">
			<a href="https://northwind.com"><svg role="img" aria-label="Northwind">…</svg></a>
			<a href="https://voltage.com"><svg role="img" aria-label="Voltage">…</svg></a>
		</SponsorWall.Tier>
		<SponsorWall.Tier label="Silver partners" size="lg">{silver}</SponsorWall.Tier>
		<SponsorWall.Tier label="Sponsors" size="sm">{bronze}</SponsorWall.Tier>
		<SponsorWall.Individuals label="Individual backers">
			<SponsorWall.Person href="https://github.com/ana" name="Ana Souza" src={ana} size="lg" />
			<SponsorWall.Person href="https://github.com/dana" name="Dana Okafor" size="md" />
			…
		</SponsorWall.Individuals>
	</SponsorWall>
</LandingSection>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

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.

Composition

The parts the component publishes, each a static property of the host.

SponsorWall
SponsorWall.TierOne sponsor tier: its label, then its marks in a ruled grid scaled by size.
SponsorWall.IndividualsThe individual backers: a centred, wrapping cloud of SponsorWall.Person circles under an optional label.
SponsorWall.PersonOne individual backer: a linked circle with their picture, or their initials, named by name for assistive technology and as a tooltip.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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

Also accepts everything in TagProps<"div">.

SponsorWall.Tier

Prop	Type	Required	Description
`label`	`RemixNode`	Yes	The tier's name, such as "Gold partners"; it heads the tier at the ambient depth.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	No	Cell and logo scale. Defaults to DEFAULT_TIER_SIZE.
`children`	`RemixNode`	Yes	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

Prop	Type	Required	Description
`label`	`RemixNode`	No	A label above the cloud, such as "Individual sponsors".
`children`	`RemixNode`	Yes	SponsorWall.Person circles.

Also accepts everything in TagProps<"div">.

SponsorWall.Person

Prop	Type	Required	Description
`href`	`string`	Yes	Where the circle links: the backer's profile or site.
`name`	`string`	Yes	The backer's name, which is the link's accessible name and its tooltip.
`src`	`string`	No	Picture URL; without one the circle shows the name's initials.
`size`	`"sm" \| "md" \| "lg"`	No	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.