Skip to content
NockerlDesignv2.0.0

Card

In review
Live · web

Elevation ladder: same fill, deeper neutral shadow + top sheen

L12px

Inline rows, chips

L25px

Most cards

L39px

Popovers, input bar

L414px

Sheets, dialogs

Interactive: hover raises, press sinks, tab for the focus ring

Static

Borderless card

No hairline: depth reads from the shadow + catch-light alone. Not interactive.

Interactive card fired 0 times. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)


export function SessionList() {
  return (
    <>
      {/* Static container: the standard L2 plane. */}
      <Card elevation="l2">
        <h3>Nockerl design system</h3>
        <p>A lifted card: neutral shadow below, catch-light on top.</p>
      </Card>


      {/* Interactive. The whole surface is one tappable button. */}
      <Card elevation="l2" interactive ariaLabel="Open session nockerl-cli" onClick={openSession}>
        <span className="eyebrow">Session</span>
        <h3>nockerl-cli</h3>
      </Card>
    </>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
elevation'l1' | 'l2' | 'l3' | 'l4''l2'Elevation rung. Grows the neutral shadow, never the surface lightness.
interactivebooleanfalseRenders the surface as a button: hover raises, press sinks, focus shows the ring.
borderlessbooleanfalseDrop the hairline border; depth then reads from shadow + catch-light alone.
onClick() => voidClick handler. Only meaningful when interactive.
ariaLabelstringAccessible name for an interactive card (required when its content is not a clear label).
childrenReactNodeCard content. Padded by the card; never bleeds to the edge.