The single navigation target.
Primitive contract
LinkCard
Makes a bounded content group one accessible navigation target without nested interactive controls.
Single navigation target with grouped context · @sanchika/primitivesPurpose and semantics
Makes a bounded content group one accessible navigation target without nested interactive controls.
Recommended semantic: Prefer a root anchor containing non-interactive content. A single named-link pattern is allowed only when the consumer keeps the rest of the card non-interactive.
Anatomy
Purpose understandable outside layout position.
Optional source, boundary, category, or state facts.
Finite variants and important states
- Variant · variant
- default, muted
- Required states
- default, hover, focus-visible
- Class hooks
.sk-link-card · .sk-link-card-default · .sk-link-card-muted
Composed synthetic exemplar
Rendered state matrix
LinkCard: 3 required states
Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.
Accessibility and consumer responsibility
- Use native anchor keyboard behavior
- Never nest another interactive element
- Keep one tab stop
- The link name must convey title and purpose
- Metadata must remain in sensible reading order
- Enforce one interactive target
- Choose an understandable accessible name
- Keep application actions outside the LinkCard
- Content wraps
- The single target spans the available inline size
- No horizontal overflow
State feedback remains immediate when transitions are reduced.
- A CanvasText boundary and Highlight focus remain visible.
Compact API reference
- Package
@sanchika/primitives- CSS
@sanchika/primitives/styles.css- Contract
primitiveSpecs.find((contract) => contract.name === "LinkCard")- Primary class
.sk-link-card