LogoSentence

Social proof as a sentence.

DesktopPhone

View code

tsx

<LogoSentence>
	Trusted by <span mix={[whiteSpace("nowrap")]}><img src={northwind} alt="Northwind" />,</span>{" "}
	<span mix={[whiteSpace("nowrap")]}><img src={voltage} alt="Voltage" />,</span>{" "}
	<img src={fernway} alt="Fernway" /> and 2,000 on-call teams.
</LogoSentence>

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.

Terminal

npm add @sdxc/ui remix

typescript

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

Usage

typescript

import { LogoSentence } from "@sdxc/ui/landing";

Sets its children as one centered, balanced line of prose: 1.25rem on a phone and 1.75rem from the lg container, weight 500 in the muted ink, with each mark scaled to the type so the line keeps an even rhythm.

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	Text with `<img>` or inline-SVG marks between the words. Each mark sits on the text's baseline at 0.8em (times its `--logo-scale`) in the heading ink. Keep a mark and its trailing comma in one `nowrap` span so a line never opens on it.

Also accepts everything in TagProps<"p">.