@brickslab./ui-web

Hero pleine-largeur pour les pages de navigation. Remplace SectionHeader avec un mesh gradient, un dot grid, un eyebrow pill et une stats row.

Aperçu

Exemple

Page Hero

Un hero moderne pour les pages principales. Dot grid, gradient mesh, stats row intégrés.

47Composants

100%TypeScript

v1.0Version

Avec children

Documentation

Résultats des Tests

Audit qualité 7 axes par composant.

92%Score moyen

47Composants

Code

tsx

import { PageHero } from "@brickslab./ui-web";

<PageHero
  eyebrow="Catalogue Complet"
  title="47 composants"
  subtitle="Tous les composants React documentés et testés."
  stats={[
    { value: 47, label: "Web" },
    { value: "13", label: "Catégories" },
  ]}
/>

Props

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Titre principal (h1).
`subtitle`	`string`	—	—	Sous-titre affiché sous le titre.
`eyebrow`	`string`	—	—	Badge pill au-dessus du titre (ex: 'Catalogue Complet').
`stats`	`PageHeroStat[]`	—	—	Ligne de statistiques sous le titre. Chaque stat a value, label et une color optionnelle.
`children`	`React.ReactNode`	—	—	Slot pour contenu additionnel (boutons, badges…).

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  title="..."
  subtitle="..."
  eyebrow="..."
  stats={[]}
  children={<span>...</span>}
/>

titlesubtitleeyebrowstatschildren

Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    subtitle="Votre sous-titre"
    eyebrow="Catégorie"
  />
</div>