Section backdrop
The backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.
Web only — React, from @krizaka/ui/section-backdrop. Beta: its API may still change in a minor version.
When to use
- 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.
When not to use
- Inside an app's screens: a working view needs a calm surface.Use instead: Page header
- To frame one item.Use instead: Card
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";Examples
Hero
The gradient, the dome and the grid behind a headline.
Sovereign by design
Your models, your data, your servers.
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
export default function SectionBackdropHero() {
return (
<SectionBackdrop grid className="rounded-xl px-8 py-16">
<h2 className="font-display text-3xl font-semibold text-fg">Sovereign by design</h2>
<p className="mt-2 max-w-md text-fg-secondary">Your models, your data, your servers.</p>
</SectionBackdrop>
);
}Plain
The gradient alone.
The gradient alone, ending on the page surface.
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
// Without the grid nor the dome: the gradient alone, ending on the page surface.
export default function SectionBackdropPlain() {
return (
<SectionBackdrop dome={false} className="px-8 py-12">
<p className="text-fg">The gradient alone, ending on the page surface.</p>
</SectionBackdrop>
);
}Closing call to action
direction="up": the tint at the bottom.
Start in minutes.
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
// `direction="up"`: the tint at the bottom, for a closing call to action.
export default function SectionBackdropUp() {
return (
<SectionBackdrop direction="up" className="px-8 py-12">
<p className="text-fg">Start in minutes.</p>
</SectionBackdrop>
);
}Sequence
Two sections in a row.
One section
The next one
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
// Two sections in a row: the first ends where the second begins.
export default function SectionBackdropSequence() {
return (
<div>
<SectionBackdrop grid className="px-8 py-14">
<p className="text-xl font-semibold text-fg">One section</p>
</SectionBackdrop>
<SectionBackdrop dome={false} className="px-8 py-14">
<p className="text-xl font-semibold text-fg">The next one</p>
</SectionBackdrop>
</div>
);
}Depth of field
A blurred foreground behind the content (media).
Depth of field
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
// `media`: a foreground blurred for depth of field, decorative, behind the content.
export default function SectionBackdropDepthOfField() {
return (
<SectionBackdrop
className="px-8 py-16"
media={<div className="absolute -bottom-10 left-6 h-40 w-40 rounded-xl border border-border-strong bg-accent-soft" />}
>
<p className="text-xl font-semibold text-fg">Depth of field</p>
</SectionBackdrop>
);
}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 | Default | 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). |
Accessibility
- Every layer is decorative and hidden from assistive technology;
mediatoo. - The drift of the light stops under
prefers-reduced-motion.
Best practices
- 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).
Related components
Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub