Brickslab.Toolsv2.1.1

@brickslab./ui-web

Section combinant un carrousel d'images avec du contenu texte. Permet de présenter des produits, collections ou packs avec une mise en page flexible (image à gauche ou à droite).

Aperçu

Disposition standard (carrousel à droite)

📸 Carrousel (placeholder)

Produit Premium

Découvrez notre collection exclusive avec des images haute résolution et une présentation moderne.

Disposition inversée (carrousel à gauche)

📸 Carrousel (placeholder)

Nouvelle Collection

Parcourez nos dernières créations avec un carrousel interactif.

Sans description ni actions

📸 Carrousel (placeholder)

Simple et épuré

Variante overlay (carrousel en fond, texte par-dessus)

📸 Carrousel en arrière-plan

Titre Overlay

Le texte se superpose au carrousel avec un gradient sombre pour améliorer la lisibilité.

Variante overlay (texte à droite)

📸 Carrousel en arrière-plan

Collection Exclusive

Découvrez nos produits avec un texte positionné à droite.

Props

PropTypeDéfautRequisDescription
titlestring—✓Titre de la section.
descriptionstring——Description ou texte accompagnant le titre (optionnel).
carouselReact.ReactNode—✓Contenu du carrousel (généralement MediaCarousel ou autre galerie).
actionsReact.ReactNode——Boutons ou actions additionnelles à afficher sous la description.
imageLeftbooleanfalse—Si true, place le carrousel à gauche et le texte à droite. Par défaut, carrousel à droite.
variant"default" | "overlay""default"—Variante de layout. "default" : disposition côte à côte. "overlay" : texte superposé sur le carrousel.
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="..."
  description="..."
  carousel={<span>...</span>}
  actions={<span>...</span>}
  imageLeft={false}
  variant="default"
/>
titledescriptioncarouselactionsimageLeftvariant
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"
    description="Votre sous-titre"
    variant="default"
  />
</div>

Utilisation

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

// Variante par défaut (côte à côte)
export function DefaultVariant() {
  return (
    <CarouselWithTextSection
      title="Découvrez nos produits"
      description="Disposition côte à côte avec carrousel et texte."
      carousel={<div>/* Votre carrousel ici */</div>}
      imageLeft={false}
    />
  );
}

// Variante overlay (texte superposé)
export function OverlayVariant() {
  return (
    <CarouselWithTextSection
      title="Collection Exclusive"
      description="Texte superposé sur le carrousel avec gradient."
      carousel={<div>/* Votre carrousel ici */</div>}
      variant="overlay"
      imageLeft={false}
    />
  );
}

Notes

💡 Deux variantes disponibles :

  • variant="default" : Disposition côte à côte (carrousel et texte côte à côte)
  • variant="overlay" : Texte superposé sur le carrousel avec gradient pour la lisibilité