announcement-banner stable Bandeau d’annonce/promo fin : badge optionnel, texte court et lien, bouton de fermeture optionnel (dismissible), variantes accent, encre ou paper-2.
SurvolBoutonsIcônes +2 3 décl. ← Familles
§ Famille · 23 variantes · 83 déclinaisons
band
23 variantes (23 stables) partagent la forme « band ». Chaque card ouvre la fiche technique ; les déclinaisons (presets) se prévisualisent en ligne.
3 déclinaisons
-
Annonce · papier 2
-
Annonce · papier 3
-
Annonce · encre
branded-callout stable Callout de marque fond paper-2 avec kicker §, titre display italique et corps de deux paragraphes, CTA optionnel.
Apparition au scrollDéfilementBoutons +1 6 décl.6 déclinaisons
-
Encadré marque · fond papier 2
-
Encadré marque · fond papier 3
-
Encadré marque · fond encre
-
Encadré marque · filet accent à gauche
-
Encadré marque · filet accent · fond papier 3
-
Encadré marque · filet accent · fond encre
closing-cta-band stable Bande CTA de cloture sur fond ink : kicker + titre display-lg (accent italique) + bouton primaire. Titre rendu en HTML (accent <em>).
Apparition au scrollSurvolBoutons +1 3 décl.3 déclinaisons
-
CTA de clôture · papier
-
CTA de clôture · papier 2
-
CTA de clôture · papier 3
comparison-pricing-callout stable Bloc « pourquoi nous » en trois colonnes de propositions de valeur, terminé par un CTA et une mention. Sert de pont entre les features et la page tarifaire.
Illustration au traitListe3 colonnes 4 décl.4 déclinaisons
-
Callout comparatif · papier
-
Callout comparatif · papier 2
-
Callout comparatif · papier 3
-
Callout comparatif · encre
cta-band stable Bandeau CTA horizontal pour relancer une action au milieu ou en fin de parcours.
BoutonsPleine largeur 3 décl.3 déclinaisons
-
CTA bande · fond papier 3
-
CTA bande · fond encre
-
CTA bande · fond accent
cta-final stable CTA final pour conclure une page et orienter vers l'action de conversion principale.
Apparition au scrollSurvolDéfilement +3 4 décl.4 déclinaisons
-
CTA final · fond papier 2
-
CTA final · fond papier 3
-
CTA final · fond encre
-
CTA final · fond accent
cta-inline stable CTA inline discret pour insérer une action contextuelle dans un contenu existant.
BoutonsPleine largeur 4 décl.4 déclinaisons
-
CTA en ligne · box papier
-
CTA en ligne · box papier 3
-
CTA en ligne · box encre
-
CTA en ligne · box accent
cta-newsletter-footer stable Capture email compacte multi-colonne de type pré-footer : titre, champ, bouton et mention RGPD sur une ligne. Sombre par défaut pour clore la page sur l’abonnement.
Illustration au traitBoutonsFormulaire +3 3 décl.3 déclinaisons
-
Newsletter pied · fond papier
-
Newsletter pied · fond papier 2
-
Newsletter pied · fond papier 3
department-cta stable Clôture CTA sur fond ink : Dingbat, titre display italique, body et deux boutons (rendez-vous + lien secondaire).
Apparition au scrollSurvolDéfilement +3footer-cta-band stable Bande CTA finale pleine largeur (titre, sous-titre, un à deux boutons), pensée comme le climax juste avant le footer. Sombre par défaut pour trancher avec la page.
Boutons2 colonnesScindé 13 décl.13 déclinaisons
-
Bande CTA finale · encre
-
Bande CTA finale · encre · arrondie
-
Bande CTA finale · encre · bouton au centre
-
Bande CTA finale · encre · boutons écartés
-
Bande CTA finale · encre · empilée · tout centré
-
Bande CTA finale · papier
-
Bande CTA finale · papier 2 · arrondie
-
Bande CTA finale · papier · empilée · compact
-
Bande CTA finale · papier 3 · boutons à droite · ample
-
Bande CTA finale · atomique · titre à gauche · bouton au centre
-
Bande CTA finale · atomique · titre centré · boutons à droite
-
Bande CTA finale · atomique · boutons écartés (between)
-
Bande CTA finale · atomique · CTA avant le titre
guarantee-block stable Bloc garantie pour expliciter les engagements, réduire le risque perçu et rassurer.
Liste2 colonnesMédia à droite +1 3 décl.3 déclinaisons
-
Garantie · papier 2
-
Garantie · papier 3
-
Garantie · encre
keyword-strip stable Bande d’items inline mono-majuscule separes par « · » : mots-cles (sans lien) ou liens sociaux/contact. Generique, reutilisable pour tout profil.
Apparition au scrollSurvolBadge +1 2 décl.2 déclinaisons
-
Bande mots-clés · liens encre
-
Bande mots-clés · rythme section
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 3 décl.3 déclinaisons
-
Bande impact · fond papier
-
Bande impact · fond papier 2
-
Bande impact · fond papier 3
newsletter-band stable Bande newsletter fond sombre : titre éditorial large à gauche, formulaire capture email à droite.
Apparition au scrollSurvolDéfilement +4 3 décl.3 déclinaisons
-
Bande newsletter · fond papier
-
Bande newsletter · fond papier 2
-
Bande newsletter · fond papier 3
newsletter-signup-section stable Section d'inscription newsletter pleine largeur (réutilise NewsletterSignup), fonds au choix dont ink pour un climax de page.
BoutonsCentré 3 décl.3 déclinaisons
-
Inscription newsletter · fond papier
-
Inscription newsletter · fond papier 2
-
Inscription newsletter · fond papier 3
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 5 décl.5 déclinaisons
-
Barre de preuves · fond papier 2
-
Barre de preuves · fond papier 3
-
Barre de preuves · fond encre
-
Barre de preuves · empilée verticale
-
Barre de preuves · empilée · encre
provenance-chip stable Chip de provenance E-E-A-T : badge plein (projet realise) ou outline (etude sources tierces), cliquable vers la page methodologie.
Apparition au scrollSurvolBadge +1 1 décl.1 déclinaison
-
Chip provenance · contour (sources tierces)
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 3 décl.3 déclinaisons
-
Bande ROI · papier
-
Bande ROI · papier 2
-
Bande ROI · papier 3
social-proof stable Section de logos clients ou partenaires pour installer une preuve sociale immédiate.
Défilement continuLogosListe +1 5 décl.5 déclinaisons
-
Preuve sociale · défilante · papier
-
Preuve sociale · défilante · papier 2
-
Preuve sociale · statique · papier 3
-
Preuve sociale · défilante · encre
-
Preuve sociale · statique · encre
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 2 décl.2 déclinaisons
-
Barre de specs · papier 3
-
Barre de specs · encre
tech-stack-band stable Bande stack technologique fond paper-2 avec kicker, lead et rangée de pills techniques.
Badge1 colonne 2 décl.2 déclinaisons
-
Bande stack tech · papier 3
-
Bande stack tech · encre
terminal-metrics-strip stable Strip KPI télémétrie tout mono : 2 à 6 cellules clé/valeur bordées de hairlines, esthétique console (uptime, agents, release), fonds paper, paper-2 ou ink.
Chiffres clésBloc de code3 colonnes 2 décl.2 déclinaisons
-
Bandeau télémétrie · fond papier 2
-
Bandeau télémétrie · fond encre
trust-badges-band stable Bandeau de badges de réassurance (sécurité, hébergement, conformité RGPD, garanties) en cellules hairline mono, placé juste avant le CTA pour lever l’objection risque.
Apparition au scrollDéfilementListe +2 6 décl.6 déclinaisons
-
Bandeau de confiance · papier
-
Bandeau de confiance · papier 2
-
Bandeau de confiance · papier 3
-
Bandeau de confiance · encre
-
Bandeau de confiance · cellules hairline
-
Bandeau de confiance · cellules encre