Crosshair
A small "+" mark centred on a corner of its positioned ancestor, the registration mark a ruled page draws where a rail meets a rule.
View code
<div mix={[raw({ position: "relative", border: "1px solid var(--ui-landing-hairline)" })]}>
<Crosshair corner="start-start" />
<Crosshair corner="start-end" />
<Crosshair corner="end-start" />
<Crosshair corner="end-end" />
…
</div>
<Crosshair corner="end-end" size="sm" />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 { Crosshair } from "@sdxc/ui/landing";Draws a "+" in hairline ink, absolutely positioned and centred on one corner of the
nearest positioned ancestor by a negative half-size margin on every side. Give the
ancestor position: relative; logical insets put the mark on the mirrored corner in RTL.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
corner | "start-start" | "start-end" | "end-start" | "end-end" | No | Corner to centre on. Defaults to DEFAULT_CORNER. |
size | "sm" | "md" | No | Mark size. Defaults to DEFAULT_SIZE. |
Also accepts everything in Omit<TagProps<"span">, "children">.
Types
| Name | Values | What it decides |
|---|---|---|
Size | "sm" | "md" | sm is an 11px mark for dense grids; md is the 21px mark a band corner takes. |
Corner | "start-start" | "start-end" | "end-start" | "end-end" | Corner of the positioned ancestor the mark centres on, as <block>-<inline> in logical terms, so a right-to-left page mirrors the marks with its content. |