Service card

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

• Mobile · n/a. A shop's public storefront is a web page; the apps book through their own lists. → List

Pourquoi il est là. Used by Akinaza.

Installation

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

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

import { ServiceCard } from "@krizaka/ui/service-card";

Exemples

Props

Accessibilité

• An article named by its heading; the way in is the only tab stop and stretches over the card, so the whole card takes the press.
• The link or button is described by the service's name, so « Book » is read with the service it books.
• With onSelect the button carries aria-pressed (the chosen service).

Clavier

Bonnes pratiques

• variant="index" is the Cahier's card for a shop page: same props, same accessible output. Its button is the way in, not the whole card, so the name stays selectable; keep it straight (a card you pick is never askew).
• Pass the price already formatted (the shop's currency and the reader's locale): the card never formats money.
• Use priceFrom only when the price truly varies; keep included to three short lines.
• Show tag (« Popular ») only from real data, such as the most booked service — never as decoration.
• Give the way in a verb (« Book », « Choose ») and, from a Server Component, an href to the booking page with the service in the address.
• Put the cards in a CardGrid so a row shares one height.

Composants liés

• Card gridA responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.
• Slot pickerThe next free times of a service as tappable chips: a strip of days, then the day's times — each a link to the booking page or a toggle the reader presses.
• Opening hoursA shop's weekly hours in one quiet row — « Open now · closes at 5 pm » and today's hours — that unfolds into the whole week, today highlighted.
• Link cardAn entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page; under the pointer its surface and hairline go one step up, nothing moves.
• Argument cardA 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.

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