Krizaka
Documentation

Argument card

A compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.

WebBetaBlocks

Web only — React, from @krizaka/ui/argument-card. Beta: its API may still change in a minor version.

When to use

  • The reasons of a product page, the building blocks of an open-source page, the options of a decision.
  • When each subject has a problem to state before its solution, and a reader who scans before reading.

When not to use

  • When the card only leads somewhere.Use instead: Link card
  • For the decisions behind a choice, compared side by side.Use instead: Decision list

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { ArgumentCard } from "@krizaka/ui/argument-card";

Examples

A building block

Compact: the duck in the corner, the trap in one line, facts, one short action and an icon action.

Krizaka Java

krizaka/krizaka-java

The trap — Every service pins its own versions, and drifts.

  • Maven Central 0.1.0
  • Gradle plugin
Details

Unfolded in place

No detail page: panelLabel unfolds what it does, the cost and the pigeon's rule.

Pledges in escrow

The trap — Elsewhere, fans pay for a video that never comes.

Details

What it does

  • Credits wait on a ledger.
  • The creator is paid when the video is out.
What it costs you
Payouts wait for the delivery, not the pledge.

Nothing is paid that was not delivered.

The pigeon's rule

Three reasons

A product's reasons side by side in a grid: the hook and the way in, no panel.

Local inference

The trap elsewhere — Elsewhere, every prompt crosses the ocean.

Details

One pipeline

The trap elsewhere — Elsewhere, each feature guards itself — or forgets.

Details

Zero telemetry

The trap elsewhere — Elsewhere, usage data is the price of the free tier.

Details

Props

A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) → the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are never on the face: they live on the detail page (more) or in the card unfolded in place (panelLabel).

PropTypeDefaultDescription
hookrequired{ label: ReactNode; text: ReactNode; }—The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. label (The trap) is read by assistive technology before it, not shown.
titlerequiredReactNode—The title: the subject (a building block, a feature, a plan).
actionsReactNode—Discreet secondary actions at the foot, on the right (an ActionBar with variant="icons").
detailsreadonly { label: ReactNode; text: ReactNode; }[]—Unfolded only: the long version, as labelled paragraphs.
factsreadonly Fact[]—Compact facts under the line: registry and version, a status said honestly.
iconReactNode—The icon tile (a signature icon): decorative.
level2 | 3 | 43The title's level.
linkAsLinkComponent—The app's link component for internal addresses (Next's Link); an <a> otherwise.
markReactNode—Small, in the top corner: the bird whose rule it is (a Mascot of 40 px, still). Decorative.
metaReactNode—A mono line under the title (a repository, a package).
more{ href: string; label: ReactNode; }—The way in: a detail page — one short action at the foot (Details). With it, the card is only its face.
panelLabelReactNode—Without a detail page: the words that unfold the card in place (Details) — a native <details> holding the points, the rule and the long version. Ignored with more: the detail page holds them.
points{ label: ReactNode; items: readonly ReactNode[]; }—Unfolded only: what it does, as a few short points, with their label (What it does).
ruleReactNode—Unfolded only: the rule told by a bird (a MascotQuote, variant="inline").

Accessibility

  • An article named by its title; the hook's label is read before the line (visually hidden); the fold is a native details element.
  • The way in is described by the card's title (aria-describedby), so several Read more links stay distinct.
  • The lift, the light and the panel's chevron stop under prefers-reduced-motion.

Keyboard

KeysAction
Enter / SpaceOn the panel's summary, opens or closes the long version.

Best practices

  • The hook is ONE line (≤ 90 characters, regular weight) a reader keeps in five seconds — never three bold lines.
  • What it does, the bird's quote and the long version are never on the face: a detail page (more), or panelLabel.
  • One idea per card; one bird per idea: small in the corner (mark), its quote (rule) where the card unfolds.
  • Give each subject its hue with --kz-hue on the card (or a wrapper); the brand's accent otherwise.
  • Secondary actions as an icon ActionBar in actions; the way in as more.

Generated from the code of @krizaka/ui 2.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Action bar

A row of link actions — discuss, propose, report, read the docs, see the code: buttons with their words at the end of a page, or icon buttons whose words are a tooltip at the foot of a card.

Call-to-action panel

The invitation at the end of a section or a page: a title, why it matters, the ways to answer — in the hue of the page.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components