Section backdrop
The backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.
Web uniquement — React, depuis @krizaka/ui/section-backdrop. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. Used by Orazaka, Yasakia, krizaka.com.
Quand l’utiliser
- Behind the hero of a marketing page (
grid, the dome). - Behind a closing call to action (
direction="up"). - To chain sections: each one ends on the page surface where the next begins.
Quand ne pas l’utiliser
- Inside an app's screens: a working view needs a calm surface.À la place : Page header
- To frame one item.À la place : Card
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";Exemples
Hero
The gradient, the dome and the grid behind a headline.
Sovereign by design
Your models, your data, your servers.
Plain
The gradient alone.
The gradient alone, ending on the page surface.
Closing call to action
direction="up": the tint at the bottom.
Start in minutes.
Sequence
Two sections in a row.
One section
The next one
Depth of field
A blurred foreground behind the content (media).
Depth of field
Props
A section of a page in the Krizaka visual language: the brand's section gradient (--kz-brand-gradient-*, so it
follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every
section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA
(tested in
| Prop | Type | Défaut | Description |
|---|---|---|---|
animated | boolean | true | The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. |
as | "div" | "footer" | "header" | "section" | section | The element: section (default), header, footer or div. |
direction | "down" | "up" | down | Where the brand tint sits: down (default) starts tinted and ends on the page surface; up ends tinted (a closing call to action). |
dome | boolean | true | The light dome above the content (the halo of a hero). Default true. |
grid | boolean | false | A floor of perspective lines under the content. Default false. |
media | ReactNode | — | A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). |
Accessibilité
- Every layer is decorative and hidden from assistive technology;
mediatoo. - The drift of the light stops under
prefers-reduced-motion.
Bonnes pratiques
- One strong backdrop per screen: the hero, or the closing call to action — not every section.
- The colours come from the brand theme (
.brand-*): never pass a colour. - Keep text on it in the text roles (
text-fg,text-fg-secondary).
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub