Krizaka UI
Krizaka UI
Patterns

Cover hero

The first screen of a shop or a place: its cover — a photo, or a muted loop that stays a still under reduced motion — behind the name, a one-line promise, a few true facts and the main action. Without a cover, the brand's colours.

Web · ✓Mobile · n/aDesktop · ✓BetaBlocks
import { CoverHero } from "@krizaka/ui/cover-hero";

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

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

Why it is here. Used by Akinaza.

When to use

  • The top of a business's public page, where its own photo or loop sells it before any text is read.
  • Any page whose subject has a cover image: a place, a venue, a profile.

When not to use

  • The first screen of a documentation or marketing page of the product itself.Use instead: Page hero
  • A product's overview with its window beside the words.

Installation

Install

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

Styles

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

Import

import { CoverHero } from "@krizaka/ui/cover-hero";

Examples

Shop

A cover photo, the name, the promise, open-now and the neighbourhood, and the main action.

Without a cover

The brand's colours stand in for the photo.

Props

A shop's first screen: the cover, the name, the promise, the facts and the main action.

PropTypeDefaultDescription
titlerequiredReactNode—The name: the page's h1.
actionsReactNode—The main action (ButtonLink).
back{ href: string; label: string; }—The way back, above the eyebrow.
coverCoverMedia—The cover. Without it the hero wears the brand's colours.
eyebrowReactNode—A short mono line above the name (where the shop is: Saint-Henri · Montréal).
factsReactNode—Chips under the lead: open now, the neighbourhood, a rating — only what is true.
leadReactNode—One line: what it promises.
linkAsLinkComponent—The app's link component for the back link.

Accessibility

  • 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.

Best practices

  • 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.

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

Comparison table

Previous

Decision list

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components