Master Components
Showcase
Page interne de validation visuelle et structurelle des composants maîtres du design system Gutenberg Etchenet.
Section header
En-tête de section maître
Le titre, le kicker et le lead utilisent les classes typographiques validées.
Contrat du composant
Classes : etch-header ethet-section-header ethet-content, etch-label ethet-section-kicker, etch-h2 ethet-section-title ethet-gradient-title, etch-sub ethet-section-lead
Structure : core/group + core/paragraph + core/heading + core/paragraph
Réutilisation : Changer seulement les textes.
Contraintes : Ne jamais reprendre les tailles/couleurs d’un ancien HTML.
Chevron next
Navigation entre sections validée
Le composant est un bouton Gutenberg natif rendu visuellement comme chevron.
Contrat du composant
Classes : ethet-section-next etch-nav-down-block; etch-nav-down-button ethet-button-chevron ethet-button-icon
Structure : core/buttons + core/button
Réutilisation : Changer uniquement URL et label éditeur.
Contraintes : Ne pas créer un bouton texte visible.
CTA final maître
Prêt à faire évoluer
votre présence en ligne ?
Le cadre visuel appartient au wrapper du bouton. Le lien interne reste transparent et sans double bordure.
Contrat du composant
Classes : ethet-cta-wrap etch-cta-wrap; ethet-cta-box etch-cta-box; ethet-cta-buttons
Structure : core/group wrapper + core/group box + core/buttons
Réutilisation : Changer textes, liens, labels; ne pas changer la structure.
Contraintes : Aucun double cadre sur .wp-block-button__link.
Stats grid
Chiffres clés alignés
Grille numérique avec cartes de hauteur cohérente et alignement bas de grille.
20+
années d’expérience
100+
sites réalisés
53
avis Google 5★
16 ans
durée maxi client
Contrat du composant
Classes : ethet-stats-grid; ethet-stat-card; ethet-stat-number; ethet-stat-label
Structure : core/group grid + core/group cards + paragraphs
Réutilisation : Changer uniquement nombres et labels.
Contraintes : align-items:end, pas stretch; pas de classes etcha-stat.
Cards grid 3
Cartes services maîtres
Version officielle récupérée depuis creation-site-web-test : structure trois colonnes, icônes couleur, badges, listes et actions.
Contrat du composant
Classes : ethet-card-columns ethet-layout mcs-service-cards-master; ethet-card-column; etch-card etch-sol-card ethet-card; ethet-card-icon-color-blue/teal/purple
Structure : core/columns + core/column + core/group card + core/html icon + paragraph badge + heading + paragraph + list + buttons
Réutilisation : Réutiliser exactement cette structure depuis creation-site-web-test. Changer seulement textes, liens et listes si la page métier le demande.
Contraintes : Ne pas remplacer par mcs_card_grid générique; ne pas uniformiser les icônes; ne pas supprimer badges, listes ou actions.
Cards grid 4 — à valider
Quatre cartes services à stabiliser
Statut non validé : cette section teste la hauteur commune, l’alignement interne et la stabilité avec des textes de longueurs différentes.
Dépannage à domicile
50 €/30 min, déplacement inclus
Télé-assistance
À partir de 10 €/10 min avec un texte plus long pour tester la stabilité de hauteur
Formation
Windows, logiciels, web
Crédit d’impôt
50 % pour les particuliers
Contrat du composant
Classes : etchs-g4 mcs-grid-4-pending; etchs-card etchs-stat mcs-grid-4-card
Structure : core/group grid + four core/group cards
Réutilisation : Statut à valider. Ne pas réutiliser en page métier tant que la variante n’est pas verrouillée.
Contraintes : Hauteur commune obligatoire; ne pas utiliser pour les stats numériques: utiliser Stats grid.
Feature cards
Variante feature validée
Cette section conserve le même composant maître que Cards grid 3. Elle sert de référence de réutilisation, pas de variante reconstruite.
Contrat du composant
Classes : Même contrat que Cards grid 3 master
Structure : Référence unique : mcs_service_cards_master issue de creation-site-web-test / ETCH-S3
Réutilisation : Réutiliser la même source unique. Si une variante est nécessaire, elle doit être documentée avant usage.
Contraintes : Interdit : anciennes cartes simplifiées, icônes génériques, espacements approximatifs.
Pricing cards
Cartes tarifaires maîtres
Variante web pricing issue de la page Accueil TEST.
Step cards — à valider
Une mise en place simple dans WordPress
Le composant teste une liste d’étapes pleine largeur : numéro à gauche, titre et description à droite, avec une lecture stable sur desktop et mobile.
Installer le plugin
Installer le plugin depuis WordPress.org ou envoyer le fichier ZIP depuis Extensions → Ajouter.
Activer Etchenet Reviews for Google Business
Une fois activé, le plugin ajoute son interface de réglages dans l’administration WordPress.
Configurer la source des avis
Renseigner Google API Key et Place ID, ou utiliser uniquement des avis manuels et l’import CSV/Excel.
Afficher le carrousel
Insérer le shortcode dans une page, un article ou une zone compatible shortcode.
Contrat du composant
Classes : etch-step-list mcs-step-list-pending; etch-step-card mcs-step-card-pending; mcs-step-content-pending
Structure : core/group list + core/group card + core/group content + heading + paragraph, compteur CSS natif
Réutilisation : À valider avant réutilisation sur pages métier. Ne pas reconstruire en grille compacte.
Contraintes : Une étape par ligne; numéro à gauche; titre et description groupés à droite; pas de marges artificielles.