LogoCloud
Adopter marks for landing proof strips: a centered row, a row spread across the measure, or a ruled grid of cells.
Trusted by on-call teams at
View code
<LogoCloud>
<img src={northwind} alt="Northwind" />
<img src={voltage} alt="Voltage" />
<img src={layerline} alt="Layerline" />
<img src={fernway} alt="Fernway" />
<img src={quadrant} alt="Quadrant" />
</LogoCloud>
<LogoCloud layout="spread" label="Trusted by on-call teams at" muted>
{marks}
</LogoCloud>
<LogoCloud layout="grid" muted>
{marks}
</LogoCloud>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.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
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.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
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
Ruled grid and marquee
View code
<LogoCloud layout="ruled" muted>{marks}</LogoCloud>
<LogoCloud layout="marquee" muted>{marks}</LogoCloud>Tiles
View code
<LogoCloud layout="tiles" label="Trusted by on-call teams at">
{marks}
</LogoCloud>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
layout | "row" | "spread" | "grid" | "ruled" | "tiles" | "marquee" | No | Arrangement. Defaults to DEFAULT_LAYOUT. |
label | RemixNode | No | A line above the marks, such as "Trusted by teams at". |
muted | boolean | No | 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 | Yes | 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. |