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

• Mobile · n/a. A shop's public storefront is a web page. → Profile card

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 { CoverHero } from "@krizaka/ui/cover-hero";

Exemples

Props

Accessibilité

• A header with the h1; the loop is aria-hidden and never focusable, and it is not rendered at all under reduced motion.
• The text sits on a veil made of the scrim tokens, readable over any cover in dark and light.

Bonnes pratiques

• Use the business's own media; with none, leave cover out — the hero still reads as designed.
• Give the still real alt text when it shows something that matters; leave it empty when it only sets a mood.
• Keep the facts to what is true now (open now, the neighbourhood, a rating that exists) — never a placeholder.
• One main action; pair it with StickyAction so a phone keeps it in reach.
• Keep the loop short (under 10 s, a few hundred kB): the still is what most readers see first.

Composants liés

• Page heroThe first screen of a page: the way back, an eyebrow, the h1, a lead, what follows them (facts, actions) and an aside (the page's bird) — on the brand's backdrop, painted at once.
• Sticky actionThe one action of a page held at the bottom edge of a phone's screen while it scrolls — pure CSS, not drawn from md up.
• Service cardA service a shop sells, as a card that argues: icon or photo, name, duration, capacity, price (« from » when it varies), what is included, a « Popular » tag — and one way in, the whole card pressable.
• Media galleryA shop's own photos and loops in tiles — the first featured, loops playing muted while their tile is on screen (a still under reduced motion), a caption on the foot of a tile.
• BadgeA short status or label: a tone, two sizes, an optional dot that can pulse.

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