DocsCard

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { DocsCard } from '@nizivo/react/unstable/docs-card';

/** Stand-in for `@nizivo/icons` Layers (a Lucide stroke). */
function Layers(): JSX.Element {
  return (
    <svg
      viewBox="0 0 24 24"
      width="1em"
      height="1em"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.92}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
      <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
      <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
    </svg>
  );
}

export function DocsCardExample(): JSX.Element {
  return (
    <div style={{ inlineSize: 300 }}>
      <DocsCard
        href="/docs/components/"
        icon={<Layers />}
        title="Components"
        description="Every control with props, states, code and keyboard notes."
        meta="114 components"
      />
    </div>
  );
}

ImportCopy Anchor Link

import { DocsCard } from '@nizivo/react/unstable/docs-card';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/docs-card.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: the whole card is one link. How to choose.

ContentCopy Anchor Link

title names the area and the link, description says what is there, meta gives a real count ("114 components") and icon fills the tile. Keep counts true: generate them, never type them.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

DocsCardProps type

import type { DocsCardProps } from '@nizivo/react/unstable/docs-card'

The props of DocsCard, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-docs-card, .nz-docs-card-arrow, .nz-docs-card-description, .nz-docs-card-icon, .nz-docs-card-meta, .nz-docs-card-title, .nz-docs-card-top.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• docs-card: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.