# 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.

```ts
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.

## Examples

```tsx
<div mix={[relative()]}>
	<Crosshair corner="start-start" />
	<Crosshair corner="end-end" size="sm" />
</div>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `corner?` | `"start-start" \| "start-end" \| "end-start" \| "end-end"` | Corner to centre on. Defaults to DEFAULT_CORNER. |
| `size?` | `"sm" \| "md"` | 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. |