CrosshairMark

Examples #

'use client';

import { CrosshairMark } from '@coreux/ui';

export default function Crosshair() {
  return (
    <div role="group" aria-label="Editorial note with a corner registration mark" style={{ position: 'relative', width: 360, height: 200, padding: 24, background: '#F4F1E9', color: '#0B1221' }}>
      <CrosshairMark variant="crosshair" size={32} color="#0B1221" className="absolute right-6 top-6" />
      <div style={{ paddingTop: 44 }}>
        <h3 className="font-display" style={{ margin: 0, fontSize: 28, lineHeight: 1.2, fontWeight: 700 }}>A point of reference.</h3>
        <p style={{ margin: '12px 0 0', maxWidth: 250, fontSize: 14, lineHeight: 1.5 }}>One small mark frames the note without competing with its message.</p>
      </div>
    </div>
  );
}

Usage & restraint #

Place one small registration mark in a card's corner or at the edge of an editorial composition. Leave a clear gap from headlines, labels, and actions. It should suggest the brand's technical graphic language without becoming the focal point.

• Crosshair retains the navy 32 px ring-and-lines seed on ivory.
• Plus retains the navy 32 px seed without a ring. It is decoration, not an add control.
• OnColor retains the ivory 32 px crosshair on a cobalt surface.

The seeds' variant, size, color, and 24 px surrounding space are preserved. The complete examples add a 360 × 200 px editorial note and position the mark in its upper-right corner, above the text. The wrapper supplies position: relative; the className on the motif supplies absolute positioning.

Use HalftoneCircle when you need a larger ambient texture, or TechnicalCollage for a small graphic panel that already includes registration marks. Avoid duplicating crosshairs around an existing blueprint.

Appearance & constraints #

crosshair draws a ring and two full-span perpendicular lines. plus draws only the lines. Width, height, and viewBox all follow size. The ring radius is 38% of size, the ring stroke is 4.5%, and the line strokes are 6%, so enlarging size enlarges every part of the mark.

Use finite positive sizes and one of the two declared variants. The implementation does not validate numbers or variant strings at runtime; it draws the ring only when the variant equals crosshair. The examples use 32 px while the omitted size default is 24 px.

color is a CSS stroke value, not a Tailwind class name. Its default currentColor follows surrounding text color. The transparent SVG supplies no background, tone, field mode, theme switch, or motion. The OnColor wrapper explicitly supplies cobalt and readable ivory text.

Keep this persistent brand motif in the structural/action palette, as the seeds do. CoreUX reserves teal, coral, saffron, and violet for data and storytelling contexts. A registration mark is not a status indicator and should not carry a semantic color meaning.

Props #

All props are optional. Types come from the installed declaration; defaults are checked against the component's parameter initializers.

Accessibility & layout #

The root SVG is marked role="presentation" and aria-hidden="true". It offers no keyboard focus, click handler, accessible label, or other interaction. Do not use it as the sole content of a button, as a location indicator, or to communicate an operation such as add or close.

Meaning stays in the visible note. The API accepts className but no children, style prop, or arbitrary HTML attributes. An outer wrapper can arrange content and position the mark; keep the graphic outside the text area. If a decorative layer overlaps a link, use pointer-events-none on that layer.

The mark itself is fixed-size SVG. The examples use fixed 360 × 200 px wrappers for consistent comparison; Fit to canvas scales the whole preview and Actual size enables contained scrolling. In production, text should reflow at small widths while the corner mark stays clear of content or is hidden. Hiding it should lose no information.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide