SourceCard

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { SourceCard } from '@nizivo/react/unstable/source-card';

export function SourceCardExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 17.5rem)', gap: 16 }}>
      <SourceCard
        href="https://example.com/autumn-restock"
        domain="mossandkiln.com"
        title="Autumn restock: what sold out first"
        number={1}
      />
      <SourceCard
        href="/files/sales-report.pdf"
        type="file"
        domain="Sales report, October"
        title="Moss & Kiln sales report"
        number={2}
      />
    </div>
  );
}

ImportCopy Anchor Link

import { SourceCard } from '@nizivo/react/unstable/source-card';

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

Static or interactiveCopy Anchor Link

Server. No client JavaScript: it is a link. How to choose.

Web or fileCopy Anchor Link

type="web" (the default) shows a globe and opens in a new tab, with a visually hidden "(opens in a new tab)" after the title; type="file" shows a document and opens in place. newTab overrides either. domain is where it lives and title the card's main line. number repeats the Citation that points here; it is decorative, since the citation already names the source.

LayoutCopy Anchor Link

The card fills the width you give it: lay several out in a grid under the answer. The domain is cut short with an ellipsis when it does not fit; the title wraps.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SourceCardLabels type

import type { SourceCardLabels } from '@nizivo/react/unstable/source-card'

SourceCard's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
newTabrequired	string	'(opens in a new tab)'	Read after the title when the card opens in a new tab.

SourceCardProps type

import type { SourceCardProps } from '@nizivo/react/unstable/source-card'

The props of SourceCard, 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.

Layers: nz.components. Classes: .nz-source-card, .nz-source-card-domain, .nz-source-card-header, .nz-source-card-icon, .nz-source-card-number, .nz-source-card-title.

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:

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

KeyboardCopy Anchor Link

To be written.