Krizaka UI
Krizaka UI
ComposantsIdentité et personnes

Identity card

The identity of a business or a person at the top of a sheet: a mark, the name and what it is called, chips for its status and registration number, and a QR code that hands the contact to a phone.

Web · ✓Mobile · n/aBureau · ✓BêtaAffichage de données
Niveau de support
Bêta
Taille
Non mesurée
Qui l'utilise
Aucun produit en production ne l'importe encore Compté dans l'inventaire daté du 2026-10-28.
import { IdentityCard } from "@krizaka/ui/identity-card";

Web uniquement — React, depuis @krizaka/ui/identity-card. Bêta : son API peut encore changer à une version mineure.

  • Mobile · n/a. A phone shows its own identity in the profile screen; the QR code is meant to be scanned from another screen.

Pourquoi il est là. Akinaza's business sheet: the shop's legal and trade names, registration number and a vCard QR code, above the numbers an owner copies (krizaka/akinaza#497).

Quand l’utiliser

  • At the top of a business sheet or a profile page, above the facts a person copies (tax numbers, address, links).
  • When a phone should be able to add the contact: pass qr with a vCard(…) text.

Quand ne pas l’utiliser

  • For a person at a glance with gauges and stats.À la place : Profile card
  • For the head of a collection or a shop in a switcher.À la place : Entity header

Installation

Installer

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

Styles

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

Importer

import { IdentityCard } from "@krizaka/ui/identity-card";

Exemples

A business

Mark, names, status and registration number, and the contact as a QR code.

Props

The identity of a business or a person: mark, name, subtitle, chips and a contact QR code. Wraps to one column on a phone.

PropTypeDéfautDescription
markrequisReactNode—The mark: a logo, an avatar. Decorative — the name carries the meaning.
namerequisReactNode—The name: the legal name of the business, the person's name. It is the card's heading.
chipsReactNode—Under the subtitle, in a row that wraps: a status chip, the registration number as a mono chip, the city.
eyebrowReactNode—A small line above the name (“Business card”), passed translated.
nameAs"h1" | "h2" | "h3" | "p"h2The level of the name.
qrIdentityCardQr—A QR code at the end (under the text on a phone): the contact as a phone can read it.
subtitleReactNode—What it is called day to day, its legal form: “Salon Cèdre & Ciseaux · Incorporated”.

Accessibilité

  • name is the heading (h2 by default; h1 when the card is the page's title). The mark is decorative and hidden from assistive technology.
  • The QR code is an image named by qr.label.

Clavier

TouchesAction
Tab, EnterReaches and activates the QR code's copy button, when there is one.

Bonnes pratiques

  • Put the legal name in name (the heading) and the day-to-day name in subtitle; the registration number goes in a mono chip.
  • Pass the text of the QR code translated, and copyLabel so a person on the computer can paste the vCard.
  • Put only public facts in the vCard: it is drawn in the page and copied to the clipboard.

Générée depuis le code de @krizaka/ui 3.78.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Captcha

Précédent

Notification preferences

Suivant

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés