AccentText
A single emphasized phrase inside a landing headline.
Know it is down before your users do
Incidents that write their own postmortem
Status pages your customers actually read
View code
<Heading size="display">
Know it is down <AccentText variant="swash">before</AccentText> your users do
</Heading>
<Heading size="display">
Incidents that write <AccentText variant="highlight">their own postmortem</AccentText>
</Heading>
<Heading size="display">
Status pages your customers <AccentText>actually read</AccentText>
</Heading>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 { AccentText } from "@sdxc/ui/landing";Stresses one phrase of a display heading while the heading keeps one weight; the swash, marker and chip dot are decorative, and the sheen falls back to solid ink under forced colors.
Examples
Sheen, pill and chip
Email for developers
The AI gateway
Docs for teams
View code
<h2 mix={[displayHeading(2)]}>
Email for <AccentText variant="sheen">developers</AccentText>
</h2>
<h2 mix={[displayHeading(2)]}>
The <AccentText variant="pill">AI</AccentText> gateway
</h2>
<h2 mix={[displayHeading(2)]}>
Docs <AccentText variant="chip">for teams</AccentText>
</h2>A pill word in a display heading
The AI gateway
View code
<Heading size="display">
The <AccentText variant="pill">AI</AccentText> gateway
</Heading>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
variant | "color" | "swash" | "highlight" | "sheen" | "pill" | "chip" | No | Treatment for the phrase. swash keeps the phrase on one line so the stroke spans it. Defaults to DEFAULT_VARIANT. |
children | RemixNode | Yes | The emphasized phrase. |
Also accepts everything in TagProps<"span">.
Types
| Name | Values | What it decides |
|---|---|---|
Variant | "color" | "swash" | "highlight" | "sheen" | "pill" | "chip" | How the phrase is stressed: brand color, brand color over a hand-drawn swash, a marker band behind the glyphs, a sheen fading the ink toward the end, an outlined uppercase pill at half size, or a tinted chip led by a dot. |