Brickslab.Tools

@brickslab./ui-web

En-tête de section avec titre, sous-titre et eyebrow optionnels. Utilisé en début de sections de page pour introduire du contenu. Supporte 3 alignements et l'eyebrow pour les catégories ou numéros de section.

Aperçu

avec eyebrow + subtitle — align: left

Composants

Mise en page & Structure

Des blocs prêts à l'emploi pour organiser vos interfaces en sections cohérentes.

sans eyebrow — align: center

Build faster. Ship smarter.

BricksLab vous fournit les briques pour construire des interfaces modernes et performantes.

align variants

align="left"

Section

Titre de section

align="center"

Section

Titre de section

align="right"

Section

Titre de section

titre seul (minimal)

Documentation API

Props

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Titre principal de la section.
`subtitle`	`string`	—	—	Sous-titre optionnel affiché sous le titre principal.
`align`	`"left" \| "center" \| "right"`	`"left"`	—	Alignement horizontal du contenu du header.
`eyebrow`	`string`	—	—	Texte court affiché au-dessus du titre (ex. : catégorie, tag, numéro de section). Souvent en couleur brand ou en petites majuscules.
`variant`	`"default" \| "compact"`	`"default"`	—	Style du header. "compact" réduit la hiérarchie visuelle et affiche un layout plus dense.
`count`	`number`	—	—	Compteur optionnel affiché en badge quand variant='compact'.

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="..."
  align="left"
  eyebrow="..."
  variant="default"
  count={0}
/>

titlesubtitlealigneyebrowvariantcount

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"
    align="left"
    variant="default"
  />
</div>

Utilisation

tsx

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

// Avec eyebrow
<SectionHeader
  eyebrow="Nouveautés"
  title="Composants de mise en page"
  subtitle="Structures flexibles pour organiser vos pages."
/>

// Centré — typique des sections hero
<SectionHeader
  title="Build faster. Ship smarter."
  subtitle="BricksLab vous fournit les briques pour construire des interfaces modernes."
  align="center"
/>

// Minimal — titre seul
<SectionHeader title="Documentation" />