Logo Sections
logo-marquee
stable Bibliothèque Mixte (inline ou partagé)Preuve sociale
Bandeau de logos image à défilement infini (« ils nous font confiance »), marquee CSS, grayscale optionnel. Respecte prefers-reduced-motion. Distinct du marquee-band texte mono.
Instances sur le site
Global 2 instances sur 2 pages
| Page | Position | Contenu | Variante |
|---|---|---|---|
| /services/agent-support-client | section 9 | Les outils qu'on branche à votre agent de support | ink |
| /services/automatisation-n8n | section 9 | Les outils qu'on orchestre dans n8n | ink |
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
kicker | Contenu | text | Non | fr / en | · |
logos | Contenu | array | Non | · | 4..24 |
speed | Présentation | enum | Non | · | slow · base |
grayscale | Contenu | bool | Non | · | · |
Déclinaisons · 13
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 9 générées.
-
Logos défilants · papier · cadence normale
curéelogo-marquee--paper-base -
Logos défilants · papier · cadence lente
curéelogo-marquee--paper-slow -
Logos défilants · papier 2 · cadence lente
curéelogo-marquee--paper-2-slow -
Logos défilants · encre · cadence normale
curéelogo-marquee--ink-base -
logo-marquee · marquee
généréelogo-marquee--marquee -
logo-marquee · grille uniforme
généréelogo-marquee--grid-uniform -
logo-marquee · grille auto
généréelogo-marquee--grid-auto -
logo-marquee · lignes séparées
généréelogo-marquee--rows-divided -
logo-marquee · grille bordée
généréelogo-marquee--bordered-grid -
logo-marquee · avec titre
généréelogo-marquee--with-heading -
logo-marquee · deux rangées
généréelogo-marquee--two-row -
logo-marquee · logo + citation
généréelogo-marquee--logo-quote -
logo-marquee · par paliers
généréelogo-marquee--tiered
Comparer les déclinaisons · 13
Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.
-
Logos défilants · papier · cadence normale
curéelogo-marquee--paper-baseOuvrir dans le builder -
Logos défilants · papier · cadence lente
curéelogo-marquee--paper-slowspeed:slowOuvrir dans le builder -
Logos défilants · papier 2 · cadence lente
curéelogo-marquee--paper-2-slowbackground:paper-2speed:slowOuvrir dans le builder -
Logos défilants · encre · cadence normale
curéelogo-marquee--ink-basebackground:inkOuvrir dans le builder -
logo-marquee · marquee
généréelogo-marquee--marqueelayout:marqueeOuvrir dans le builder -
logo-marquee · grille uniforme
généréelogo-marquee--grid-uniformlayout:grid-uniformOuvrir dans le builder -
logo-marquee · grille auto
généréelogo-marquee--grid-autolayout:grid-autoOuvrir dans le builder -
logo-marquee · lignes séparées
généréelogo-marquee--rows-dividedlayout:rows-dividedOuvrir dans le builder -
logo-marquee · grille bordée
généréelogo-marquee--bordered-gridlayout:bordered-gridOuvrir dans le builder -
logo-marquee · avec titre
généréelogo-marquee--with-headinglayout:with-headingOuvrir dans le builder -
logo-marquee · deux rangées
généréelogo-marquee--two-rowlayout:two-rowOuvrir dans le builder -
logo-marquee · logo + citation
généréelogo-marquee--logo-quotelayout:logo-quoteOuvrir dans le builder -
logo-marquee · par paliers
généréelogo-marquee--tieredlayout:tieredOuvrir dans le builder
Sections liées
Même famille
logo-wall stable Grille statique de logos partenaires ou clients, avec effet grayscale vers couleur au hover. Distinct du bandeau animé marquee-band.
Défilement continuZoom au survolApparition au scroll +6 13 décl.marquee-band stable Bandeau marquee mono uppercase à défilement horizontal infini · items + séparateurs · respecte prefers-reduced-motion.
Défilement continu1 colonne 9 décl.Même catégorie
ecosystem-partners stable Logos partenaires technologiques unifiés (masque alpha + currentColor), groupés par catégorie, grille / mur / marquee, variante dark.
Défilement continuSurvolIllustration au trait +4 20 décl.integrations-grid stable Grille de logos d’intégrations groupés par catégorie (CRM, communication, données). Répond à l’objection « est-ce que ça se branche à nos outils ? » d’un coup d’œil.
SurvolPlusieurs imagesLogos +2 8 décl.logo-wall stable Grille statique de logos partenaires ou clients, avec effet grayscale vers couleur au hover. Distinct du bandeau animé marquee-band.
Défilement continuZoom au survolApparition au scroll +6 13 décl.marquee-band stable Bandeau marquee mono uppercase à défilement horizontal infini · items + séparateurs · respecte prefers-reduced-motion.
Défilement continu1 colonne 9 décl.social-proof stable Section de logos clients ou partenaires pour installer une preuve sociale immédiate.
Défilement continuLogosListe +1 19 décl.Similaires
roi-band stable Bande ROI sur fond ink : en-tête eyebrow et titre display, chiffres KeyMetric placés en asymétrie 6/5.
Apparition au scrollDéfilementIllustration au trait +2 17 décl.key-metric-grid stable Grille de métriques chiffrées magnifiées (style FT/Bloomberg) composant l'atome KeyMetric : chiffre dominant, label mono, delta optionnel. Axes size/align/variant et 2 à 4 colonnes, fond alterné.
4 colonnes 19 décl.metric-callout-band stable Bande d’une à trois métriques héro surdimensionnées accompagnées d’une phrase de contexte. Frappe fort sur un résultat chiffré, sombre par défaut pour la mise en avant.
Compteurs animésListe3 colonnes 17 décl.metric-shift stable Comparaison avant → après : valeur initiale et finale magnifiées, delta.
Apparition au scrollDéfilementIllustration au trait +1 13 décl.proof-bar stable Barre de preuve compacte pour afficher des métriques clés et renforcer la crédibilité.
Apparition au scrollDéfilementChiffres clés +2 19 décl.spec-bar stable Barre de spécifications projet N colonnes (label mono + valeur) avec grille CSS var, extrait de CaseStudyTemplate.
Apparition au scrollDéfilement3 colonnes 16 décl.Code
Données de la section (à placer dans sections[])
{
"type": "logo-marquee",
"background": "paper",
"kicker_fr": "Ils nous font confiance",
"kicker_en": "Trusted by",
"speed": "base",
"grayscale": true,
"logos": [
{
"src": "/logos/client-lumen.svg",
"name_fr": "Lumen Retail",
"name_en": "Lumen Retail",
"href": "#"
},
{
"src": "/logos/client-atlas.svg",
"name_fr": "Atlas Finance",
"name_en": "Atlas Finance"
},
{
"src": "/logos/client-orio.svg",
"name_fr": "Orio Santé",
"name_en": "Orio Health"
},
{
"src": "/logos/client-nordis.svg",
"name_fr": "Nordis Industrie",
"name_en": "Nordis Industries"
},
{
"src": "/logos/client-vela.svg",
"name_fr": "Vela Logistique",
"name_en": "Vela Logistics"
},
{
"src": "/logos/client-kairo.svg",
"name_fr": "Kairo Énergie",
"name_en": "Kairo Energy"
}
]
}/library/section/logo-marquee.json
Chemin du détail machine
/library/section/logo-marquee.json