Brickslab.Lib

@brickslab./ui-webAnimation

Section en grille avec images, zoom au survol et overlay descriptif animé (framer-motion). Idéal pour présenter des détails produit, une collection ou des éléments de marque.

Aperçu

columns=4 · overlay au survol

Détails Signature

Chaque pièce est définie par un savoir-faire méticuleux et des matériaux d'exception.

Assemblage précis

Des ajustements invisibles et une finition impeccable, pièce après pièce.

Assemblage précis

Matériaux nobles

Bois, métal, textile : sélection rigoureuse pour un rendu durable et premium.

Matériaux nobles

Détails signature

Micro-textures, chanfreins, coutures : les détails racontent l'histoire de l'objet.

Détails signature

Contraste maîtrisé

Lumière, ombre et matières : un équilibre qui rend chaque pièce unique.

Contraste maîtrisé

columns=2 · imageAspectRatio="4/5"

Détails Signature

Chaque pièce est définie par un savoir-faire méticuleux et des matériaux d'exception.

Assemblage précis

Des ajustements invisibles et une finition impeccable, pièce après pièce.

Assemblage précis

Matériaux nobles

Bois, métal, textile : sélection rigoureuse pour un rendu durable et premium.

Matériaux nobles

Détails signature

Micro-textures, chanfreins, coutures : les détails racontent l'histoire de l'objet.

Détails signature

Contraste maîtrisé

Lumière, ombre et matières : un équilibre qui rend chaque pièce unique.

Contraste maîtrisé

Props

Prop	Type	Défaut	Requis	Description
`details`	`DetailItem[]`	—	✓	Liste des cartes à afficher. Chaque entrée contient id, image (URL), title et description.
`title`	`string`	`"Détails Signature"`	—	Titre de la section affiché en grand format centré.
`subtitle`	`string`	`"Chaque pièce est définie..."`	—	Sous-titre de la section.
`columns`	`1 \| 2 \| 3 \| 4`	`4`	—	Nombre de colonnes sur desktop. Sur tablette la grille passe automatiquement à min(columns, 2), et sur mobile à 1 colonne.
`cardRadius`	`string`	`"4px"`	—	Border-radius des cartes (valeur CSS).
`sectionPadding`	`string`	`"8rem 0"`	—	Padding vertical de la section (valeur CSS).
`overlayColor`	`string`	`"rgba(20,20,20,0.9)"`	—	Couleur du dégradé overlay affiché au survol des cartes.
`imageAspectRatio`	`string`	`"3/4"`	—	Ratio largeur/hauteur des images (ex: "1/1", "16/9", "3/4").
`className`	`string`	—	—	Classe CSS additionnelle sur le wrapper racine.

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
  details={[]}
  title="Détails Signature"
  subtitle="Chaque pièce est définie..."
  columns={4}
  cardRadius="4px"
  sectionPadding="8rem 0"
  overlayColor="rgba(20,20,20,0.9)"
  imageAspectRatio="3/4"
  // +1 autres props disponibles
/>

detailstitlesubtitlecolumnscardRadiussectionPaddingoverlayColorimageAspectRatioclassName

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"
  />
</div>

Utilisation

tsx

import { SignatureDetails, type DetailItem } from "@brickslab./ui-web";

const details: DetailItem[] = [
  { id: 1, image: "https://picsum.photos/900/1200?1", title: "Assemblage",  description: "..." },
  { id: 2, image: "https://picsum.photos/900/1200?2", title: "Matériaux",   description: "..." },
  { id: 3, image: "https://picsum.photos/900/1200?3", title: "Finition",    description: "..." },
  { id: 4, image: "https://picsum.photos/900/1200?4", title: "Contraste",   description: "..." },
];

// 4 colonnes (défaut)
<SignatureDetails
  title="Détails Signature"
  subtitle="Chaque pièce est définie par un savoir-faire méticuleux."
  details={details}
  columns={4}
  cardRadius="10px"
  sectionPadding="56px 0"
/>

// 2 colonnes, format carré
<SignatureDetails
  details={details}
  columns={2}
  imageAspectRatio="4/5"
  overlayColor="rgba(10,10,10,0.92)"
  sectionPadding="48px 0"
/>