CheckList
Checked claim rows for landing CTAs and hero support lists.
- Checks from six regions
- Alerts by email, Slack and SMS
- Ninety days of response history
- Free for five monitors
- No card required
View code
<div mix={[vstack({ gap: 6, align: "start" })]}>
<CheckList>
<CheckRow>Checks from six regions</CheckRow>
<CheckRow>Alerts by email, Slack and SMS</CheckRow>
<CheckRow>Ninety days of response history</CheckRow>
</CheckList>
<CheckList orientation="horizontal">
<CheckRow>Free for five monitors</CheckRow>
<CheckRow>No card required</CheckRow>
</CheckList>
</div>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 { CheckList } from "@sdxc/ui/landing";Lays CheckRow children as a stacked claim list or a wrapping horizontal cluster under CTAs.
Examples
<CheckList orientation="horizontal">
<CheckRow>{t("claim.fast")}</CheckRow>
<CheckRow>{t("claim.free")}</CheckRow>
</CheckList>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
orientation | "stacked" | "horizontal" | No | Layout axis. Defaults to DEFAULT_ORIENTATION. |
children | RemixNode | Yes | One or more CheckRow items. |
Also accepts everything in TagProps<"ul">.
Types
| Name | Values | What it decides |
|---|---|---|
Orientation | "stacked" | "horizontal" | Whether rows stack as a claim list or wrap as a horizontal cluster under a hero CTA. |
Also exported
Other components this module publishes.
CheckRow