Hero Editorial Split
Mise en page asymétrique en deux colonnes : titre serif éditorial à gauche, image plein format à droite. Inspirée des magazines de mode et d'art de vivre haut de gamme. Idéale pour artisans, boulangeries, caves, marques à histoire qui misent sur la typographie et la photographie produit.
- mood
- editorial · luxe · organic · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- alimentaire-artisanalimentaire-cavecommerce-modeartisanat-craft
- presets
- editorialartisan-craftorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Hero Fullbleed Video
Vidéo en arrière-plan plein écran avec overlay dégradé sombre, titre et sous-titre centrés en surimpression. Impact visuel maximal, immersif. Idéal pour restaurants avec ambiance, salles d'événement, hôtels, salles de sport, marques qui veulent montrer leur atmosphère plus que leur produit.
- mood
- luxe · maximalist · cozy · playful
- density
- airy · moderate
- animation
- moderate · contrast high
- sectors
- alimentaire-restaurantculture-evenementielbien-etrecommerce-modeservice-pro
- presets
- dark-luxeeditorialneon-tech
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Hero Centered Minimal
Hero épuré avec titre et sous-titre centrés sur fond uni, sans image ni élément décoratif. Beaucoup d'espace blanc, typographie sobre, sensation de clarté et de confiance. Idéal pour cabinets médicaux, cabinets de conseil, professions libérales, marques tech épurées qui misent sur la rigueur et la lisibilité.
- mood
- minimal · clinical
- density
- airy · simple
- animation
- none · contrast medium
- sectors
- sante-medicalsante-paramedicalservice-proeducation-formationgeneric
- presets
- minimal-swissclinical-medicaleditorial
- a11y
- WCAG AAA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Hero Cinematic Overlay
Photographie plein écran avec dégradé dramatique de bas en haut, texte aligné en bas à gauche. Esthétique cinématographique et éditoriale, très atmosphérique. Idéal pour événementiel, lieux de culture, hôtels haut de gamme, commerces de mode, marques qui veulent raconter une ambiance par la photo.
- mood
- editorial · luxe · cozy · organic
- density
- balanced · moderate
- animation
- subtle · contrast high
- sectors
- culture-evenementielcommerce-modealimentaire-restaurantbien-etrecommerce-specialise
- presets
- dark-luxeeditorialorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Hero Product Showcase
Hero orienté catalogue : titre et sous-titre à gauche, grille de 3 produits emblématiques à droite avec image, nom et prix. Met en avant les best-sellers ou la nouvelle collection dès la première impression. Idéal pour commerces, boutiques en ligne, caves, boulangeries qui veulent mettre leur offre phare au-dessus du pli.
- mood
- editorial · minimal · organic · cozy
- density
- dense · moderate
- animation
- subtle · contrast medium
- sectors
- commerce-modecommerce-decocommerce-specialisealimentaire-artisanalimentaire-cave
- presets
- editorialminimal-swissorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Hero Typographic Brutalist
Typographie monumentale plein écran, pas d'image, couleurs crues et contrastées. Esthétique brutaliste, bold, sans concession. Idéal pour marques de mode audacieuses, galeries d'art, événements culturels, agences créatives, marques qui veulent marquer les esprits dès la première seconde sans photo.
- mood
- brutalist · maximalist · playful
- density
- dense · moderate
- animation
- expressive · contrast high
- sectors
- commerce-modeculture-evenementielcommerce-specialiseartisanat-craft
- presets
- brutalistneon-techplayful-90s
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Hero Bento Gradient
Grille bento asymétrique 3x2 avec gradient mesh en fond, bloc principal avec CTA à gauche et 4 mini-cartes de features à droite. Style populaire sur 21st.dev, idéal pour SaaS, web3, startups tech qui veulent un hero moderne et dense sans photo.
- mood
- technical · maximalist · editorial · playful
- density
- dense · rich
- animation
- moderate · contrast high
- sectors
- service-proeducation-formationcommerce-specialisegeneric
- presets
- neon-techdark-luxebrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Hero Interactive Grid
Hero sombre plein écran avec grille de points en fond et halo de couleur qui suit la souris (reveal pattern Magic UI / 21st.dev). Titre gradient vertical, subtitle sobre, dual CTA arrondi. Signature visuelle immédiate pour landing SaaS, web3, outils tech haut de gamme.
- mood
- technical · maximalist · luxe · playful
- density
- airy · moderate
- animation
- expressive · contrast high
- sectors
- service-proculture-evenementielcommerce-specialisegeneric
- presets
- neon-techdark-luxebrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
About Editorial Story
Section 'À propos' en layout magazine 2 colonnes asymétriques : photo portrait à gauche, texte narratif long (3-5 paragraphes) à droite avec eyebrow, titre serif et signature italique. Pour les métiers où l'histoire et l'humain vendent (artisans, thérapeutes, chefs, créateurs).
- mood
- editorial · luxe · organic · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- alimentaire-artisanalimentaire-restaurantalimentaire-cavesante-paramedicalbien-etreartisanat-craftculture-evenementiel
- presets
- editorialartisan-craftorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
About Stats Grid
Bandeau preuve sociale en 4-5 chiffres-clés : années d'expertise, clients servis, projets livrés, satisfaction, récompenses. Fond contrasté, chiffres géants accentués. Excellent pour SaaS, cabinets de conseil, startups qui veulent prouver leur traction par les nombres.
- mood
- minimal · editorial · clinical · cozy
- density
- balanced · simple
- animation
- subtle · contrast high
- sectors
- service-proeducation-formationcommerce-specialiseculture-evenementielgeneric
- presets
- dark-luxeclinical-medicalminimal-swisseditorial
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
About Team Grid
Présentation de l'équipe en grille 4-8 personnes : photo circulaire, nom, rôle, liens sociaux optionnels. Pour agences, cabinets, studios créatifs qui veulent humaniser et montrer qui est derrière le service.
- mood
- editorial · minimal · clinical · organic
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- service-proartisanat-craftculture-evenementielsante-medicalsante-paramedicaleducation-formation
- presets
- minimal-swisseditorialclinical-medicalorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Services Grid Icons
Grille de 3 à 6 services avec icône ronde en haut, titre, courte description. Hover micro-interactions. Compact et scannable. Idéal pour landing pages SaaS, cabinets de conseil, agences qui veulent survoler leur offre rapidement avant d'entrer dans le détail.
- mood
- minimal · editorial · clinical · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- service-proservice-proximiteeducation-formationcommerce-specialisegeneric
- presets
- minimal-swisseditorialclinical-medicalneon-tech
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Services Cards Detailed
Trois cartes détaillées avec image en haut, titre, sous-titre, liste de 3-5 points, prix et bouton d'action. Équivalent d'une mini-grille de pricing. Pour agences, artisans, cabinets qui veulent expliquer ce qu'ils font avec du détail sans faire une vraie page pricing.
- mood
- editorial · minimal · clinical · organic
- density
- dense · rich
- animation
- subtle · contrast medium
- sectors
- service-procommerce-specialiseculture-evenementielartisanat-batimentartisanat-craftservice-proximitebien-etre
- presets
- editorialminimal-swissclinical-medicaldark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Services Bento Mesh
Grille bento asymétrique 3x2 avec 1 carte héros large + 4 cartes compactes, chacune avec gradient mesh radial en fond. Pattern signature 21st.dev. Adapté SaaS/produit où chaque 'service' est une capacité produit (integrations, analytics, automation, API…).
- mood
- technical · maximalist · luxe · playful
- density
- balanced · moderate
- animation
- subtle · contrast high
- sectors
- service-procommerce-specialiseeducation-formationgeneric
- presets
- neon-techdark-luxebrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Testimonials Carousel Minimal
Un témoignage à la fois, citation serif géante centrée, avatar et nom en dessous. Autoplay lent (6s), swipe + dots + flèches. Utilise le widget Carousel. Pour quand on veut donner du poids à chaque avis plutôt que d'en montrer 6 d'un coup.
- mood
- minimal · editorial · luxe · organic
- density
- airy · moderate
- animation
- moderate · contrast medium
- sectors
- service-proeducation-formationsante-paramedicalbien-etreculture-evenementielcommerce-mode
- presets
- editorialminimal-swissorganic-naturaldark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Testimonials Grid Cards
Grille 3-4 colonnes de cartes témoignages : rating étoiles optionnel, citation, avatar (ou initiale placeholder), nom, rôle. Dense et scannable, parfait quand on a 6-12 témoignages solides qu'on veut montrer d'un coup pour rassurer au maximum.
- mood
- minimal · editorial · clinical · cozy
- density
- dense · moderate
- animation
- subtle · contrast medium
- sectors
- commerce-modecommerce-decocommerce-specialiseservice-proeducation-formationsante-paramedical
- presets
- minimal-swisseditorialclinical-medicalorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Testimonials Marquee Rows
Deux lignes de témoignages qui défilent en sens opposé via le widget Marquee. Cartes glassmorphism sur fond sombre, effet cinétique moderne très populaire sur 21st.dev. Parfait pour SaaS, agences, startups qui ont beaucoup d'avis et veulent du dynamisme visuel.
- mood
- technical · maximalist · editorial · playful
- density
- dense · moderate
- animation
- moderate · contrast high
- sectors
- service-proeducation-formationcommerce-specialisegeneric
- presets
- neon-techdark-luxebrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
FAQ Accordion Clean
Liste de questions en accordéon : une seule ouverte à la fois, transition douce via widget Accordion. Colonne centrée étroite (720px max), titre et intro centrés. Ergonomie classique et reconnaissable, idéale quand on a 5-15 questions à couvrir.
- mood
- minimal · editorial · clinical · cozy
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- service-proservice-proximitesante-medicaleducation-formationcommerce-modecommerce-specialisegeneric
- presets
- minimal-swissclinical-medicaleditorialorganic-natural
- a11y
- WCAG AAA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
FAQ Two Columns
Toutes les questions visibles directement en 2 colonnes — pas d'accordéon, on voit tout d'un coup. Idéal quand les réponses sont courtes et qu'on veut que le visiteur scanne rapidement. Meilleur pour SEO (contenu indexable) et pour FAQ techniques de 6-12 questions.
- mood
- minimal · editorial · technical · cozy
- density
- dense · simple
- animation
- none · contrast medium
- sectors
- service-proeducation-formationcommerce-specialisegenericculture-evenementiel
- presets
- minimal-swissclinical-medicalneon-techeditorial
- a11y
- WCAG AAA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
FAQ Floating Cards
FAQ en grille de cartes flottantes avec shadow légère et hover lift, pas d'accordion : le contenu est toujours visible, idéal pour 4-8 questions courtes. Pattern 21st.dev moderne, plus visuel que `accordion-clean`, plus moderne que `two-columns`.
- mood
- minimal · editorial · technical · playful
- density
- balanced · simple
- animation
- subtle · contrast low
- sectors
- service-proeducation-formationcommerce-specialisesante-paramedicalgeneric
- presets
- minimal-swissneon-techeditorialclinical-medicalpastel-cozy
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Contact Form Map Split
Section contact en 2 colonnes : formulaire à gauche (nom, email, message, bouton d'envoi), carte interactive + infos pratiques à droite (adresse, téléphone, email, horaires). Layout complet pour commerces physiques, restaurants, cabinets avec adresse visitable.
- mood
- minimal · clinical · editorial · cozy
- density
- balanced · moderate
- animation
- none · contrast medium
- sectors
- alimentaire-restaurantalimentaire-artisansante-medicalsante-paramedicalservice-proximitecommerce-decocommerce-specialisebien-etre
- presets
- editorialminimal-swissorganic-naturalclinical-medical
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Contact Minimal Info
Trois cartes épurées centrées : email, téléphone, adresse. Aucun formulaire. Parfait pour professions libérales, one-page vitrines, portfolios, services pro qui communiquent par email/tél plutôt que via un formulaire générique.
- mood
- minimal · clinical · editorial · cozy
- density
- airy · simple
- animation
- none · contrast medium
- sectors
- service-prosante-medicalsante-paramedicaleducation-formationservice-proximitegeneric
- presets
- minimal-swissclinical-medicaleditorial
- a11y
- WCAG AAA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
CTA Banner Solid
Bandeau plein largeur avec couleur de marque forte en fond, titre punchy centré, sous-titre et un bouton unique arrondi. Conversion-oriented : aucune distraction, appel à l'action clair et dominant. Idéal pour fin de page avant footer ou en bas d'une landing.
- mood
- minimal · brutalist · editorial · cozy
- density
- balanced · simple
- animation
- subtle · contrast high
- sectors
- genericservice-procommerce-modeservice-proximiteeducation-formation
- presets
- editorialbrutalistminimal-swissdark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
CTA Split Promise
CTA argumenté en 2 colonnes : titre + 2-3 promesses en liste à puces (ex. 'Essai gratuit', 'Sans engagement', 'Support 7/7') à gauche, bouton principal et bouton secondaire empilés à droite. Plus convainquant que le banner-solid car il lève les objections.
- mood
- editorial · minimal · clinical · organic
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- service-proeducation-formationcommerce-specialiseservice-proximite
- presets
- minimal-swisseditorialclinical-medicalorganic-natural
- a11y
- WCAG AAA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
CTA Gradient Glass
Carte glassmorphism centrée flottant sur un gradient mesh coloré, avec CTA primaire arrondi et CTA secondaire transparent. Pattern populaire sur 21st.dev pour SaaS haut de gamme, web3, produits tech qui veulent un final page qui claque.
- mood
- technical · maximalist · luxe · playful
- density
- balanced · moderate
- animation
- moderate · contrast high
- sectors
- service-procommerce-specialiseeducation-formationgeneric
- presets
- neon-techdark-luxebrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Footer Minimal Links
Footer léger sur une ligne : copyright à gauche, 3 à 5 liens essentiels au centre, icônes sociales optionnelles à droite. Idéal pour sites one-page, startups, sites vitrines qui veulent un pied de page discret qui ne dilue pas l'attention.
- mood
- minimal · editorial · cozy
- density
- airy · simple
- animation
- none · contrast low
- sectors
- service-proservice-proximitegenericcommerce-mode
- presets
- minimal-swisseditorialclinical-medical
- a11y
- WCAG AAA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Footer Corporate Sitemap
Footer complet en 4 colonnes : branding + newsletter à gauche, puis 3 colonnes de liens thématiques (services, ressources, entreprise). Barre basse avec copyright et liens légaux. Parfait pour e-commerce, SaaS, corporate et marques établies qui veulent maximiser la navigation.
- mood
- editorial · minimal · clinical · cozy
- density
- dense · moderate
- animation
- none · contrast high
- sectors
- commerce-modecommerce-decocommerce-specialiseservice-proeducation-formationculture-evenementiel
- presets
- dark-luxeclinical-medicalminimal-swisseditorial
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Logos Marquee Grayscale
Bandeau de logos en défilement infini horizontal, en grayscale qui passe en couleur au survol. Utilise le widget Marquee avec pauseOnHover. Classique 21st.dev pour renforcer la confiance sociale via les références clients / partenaires / médias.
- mood
- minimal · editorial · clinical
- density
- airy · simple
- animation
- moderate · contrast low
- sectors
- service-proeducation-formationcommerce-specialiseculture-evenementielgeneric
- presets
- minimal-swisseditorialclinical-medicalorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Logos Grid Static
Grille statique 5-6 colonnes de logos partenaires/clients sans animation. Plus corporate et institutionnel que le marquee, évite de distraire. Idéal pour secteurs pro, juridique, santé ou B2B où la sobriété compte.
- mood
- minimal · clinical · editorial · cozy
- density
- airy · simple
- animation
- none · contrast low
- sectors
- service-prosante-medicalsante-paramedicaleducation-formationgeneric
- presets
- minimal-swissclinical-medicaleditorialartisan-craft
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Logos Trust Badges
Grille de 3-4 badges de certifications ou partenariats officiels avec micro-copie descriptive sous chaque logo. Plus qualitatif que quantitatif. Idéal pour rassurer sur agréments, conformité RGPD, labels secteur (Qualiopi, Bio, ISO…).
- mood
- clinical · minimal · editorial · organic
- density
- airy · simple
- animation
- subtle · contrast low
- sectors
- sante-medicalsante-paramedicalservice-proeducation-formationalimentaire-artisan
- presets
- clinical-medicalminimal-swisseditorialorganic-naturalartisan-craft
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Pricing Table 3 Colonnes
Trois plans en colonnes (ex. Free / Pro / Enterprise) avec badge 'Recommandé' sur le plan central mis en avant, liste de features avec coches, CTA dédié par plan. Pattern SaaS classique, conversion-oriented.
- mood
- minimal · editorial · clinical · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- service-proeducation-formationcommerce-specialisegeneric
- presets
- minimal-swisseditorialclinical-medicalneon-tech
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Pricing Cards Compare
Deux cartes côte à côte pour comparer directement deux formules (ex. Free vs Premium), avec une carte highlightée en inversé (fond foncé) pour mettre en avant la meilleure offre. Style simple et direct, pour professionnels qui n'ont que 2 niveaux.
- mood
- editorial · minimal · clinical · cozy
- density
- balanced · simple
- animation
- none · contrast high
- sectors
- service-proservice-proximiteeducation-formationbien-etresante-paramedical
- presets
- editorialminimal-swissclinical-medicaldark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Pricing Stripe Compare
Pricing pattern landing Stripe / 21st.dev : toggle mensuel / annuel (−20%) en haut, 3 à 4 plans horizontaux avec prix dynamique, liste de features coches vertes et plan populaire en accent. Format attendu par les acheteurs SaaS B2B 2024-25 pour une décision rapide.
- mood
- minimal · technical · editorial · playful
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- service-procommerce-specialiseeducation-formationgeneric
- presets
- minimal-swissneon-techeditorialclinical-medical
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Gallery Masonry 3 Colonnes
Grille masonry 3 colonnes avec hauteurs variables, mise en page type Pinterest. Parfait pour portfolios photographes, boutiques mode/déco/bijoux, ateliers créatifs qui veulent montrer beaucoup d'images avec du rythme visuel.
- mood
- editorial · maximalist · organic · playful
- density
- dense · simple
- animation
- subtle · contrast medium
- sectors
- culture-evenementielcommerce-modecommerce-decocommerce-specialiseartisanat-craftalimentaire-artisan
- presets
- editorialminimal-swissorganic-naturaldark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Gallery Grid Uniform
Grille carrée uniforme 3 ou 4 colonnes avec tiles égales, hover zoom subtil, caption optionnelle. Simple et lisible, parfait pour boutiques e-commerce, catalogues produits, ateliers avec pièces de même format.
- mood
- minimal · editorial · clinical · cozy
- density
- dense · simple
- animation
- subtle · contrast medium
- sectors
- commerce-modecommerce-decocommerce-specialisealimentaire-artisanalimentaire-caveartisanat-craft
- presets
- minimal-swisseditorialorganic-naturalclinical-medical
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Stats Big Numbers
Bandeau autonome de 3-4 chiffres-clés en grande typo avec label discret. Plus sobre qu'un about/stats-grid : pas de titre/intro, juste les chiffres. Pour poser une preuve sociale entre deux sections de page.
- mood
- minimal · editorial · clinical · cozy
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- service-procommerce-specialiseeducation-formationgeneric
- presets
- minimal-swisseditorialclinical-medicalneon-tech
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Stats Icon Grid
Grille de 3-4 métriques chacune avec icône, grand chiffre en accent, label et ligne de détail contextuelle. Plus riche que big-numbers : permet de contextualiser chaque chiffre (unité, période, méthodologie). Idéal pour rapports d'impact, ESG, transparence.
- mood
- editorial · minimal · clinical · cozy
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- service-prosante-paramedicaleducation-formationcommerce-specialiseculture-evenementielgeneric
- presets
- minimal-swisseditorialclinical-medicalorganic-naturalneon-tech
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Stats Timeline
Frise horizontale de jalons chronologiques : date + chiffre-clé + label court. Permet de raconter la trajectoire d'une entreprise (fondation, levée, croissance, ouverture) en un regard. Complément storytelling au bandeau big-numbers.
- mood
- editorial · minimal · luxe · organic
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- service-proalimentaire-artisancommerce-specialiseculture-evenementieleducation-formationgeneric
- presets
- editorialminimal-swissartisan-craftdark-luxeorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Newsletter Inline Form
Bandeau horizontal discret : titre + accroche à gauche, input email + bouton submit à droite sur une seule ligne. Perfect pour opt-in email dans le flux de page, avant un footer ou après un article blog.
- mood
- minimal · editorial · clinical · cozy
- density
- balanced · simple
- animation
- none · contrast medium
- sectors
- service-procommerce-modecommerce-specialiseeducation-formationculture-evenementielalimentaire-artisan
- presets
- minimal-swisseditorialclinical-medicalorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- minalvo
Newsletter Centered Card
Carte centrée mise en valeur sur section plein largeur avec eyebrow, titre éditorial, bullets de bénéfices et formulaire email. Plus engageant que l'inline-form : positionne la newsletter comme canal prioritaire. Idéal pour blogs, médias, content-marketing.
- mood
- editorial · minimal · luxe · cozy
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- culture-evenementieleducation-formationservice-procommerce-specialisegeneric
- presets
- editorialminimal-swissartisan-craftorganic-naturalpastel-cozy
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Newsletter Split Visual
Section 2 colonnes : image éditoriale plein format à gauche, promesse + formulaire + compteur d'abonnés à droite. Plus premium que centered-card, ancrage visuel fort. Idéal pour média, magazine, boutique éditoriale ou créateur qui veut une newsletter comme signature.
- mood
- editorial · luxe · minimal · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- culture-evenementielcommerce-modecommerce-specialisealimentaire-artisanservice-pro
- presets
- editorialartisan-craftdark-luxeminimal-swissorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Team Cards Portraits
Grille de cartes portraits circulaires avec nom, rôle accentué, bio courte et petits boutons socials ronds. Distinct de `about.team-grid` : ici, page équipe dédiée plus exhaustive (6-12 personnes), pas une section about.
- mood
- minimal · editorial · clinical · organic
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- service-prosante-medicalsante-paramedicaleducation-formationculture-evenementielgeneric
- presets
- minimal-swisseditorialclinical-medicalorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- 21st.dev/inspired
Team Minimal Roster
Liste compacte de l'équipe en format annuaire : micro-avatar circulaire, nom, rôle, lien LinkedIn optionnel. Une ligne par personne, séparateurs fins. Pour grandes équipes (15+) ou pages 'Qui sommes-nous' où les portraits détaillés seraient trop bruyants.
- mood
- minimal · editorial · clinical · cozy
- density
- dense · simple
- animation
- none · contrast low
- sectors
- service-proeducation-formationsante-medicalsante-paramedicalculture-evenementielgeneric
- presets
- minimal-swisseditorialclinical-medicalbrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Menu Cards Tabs
Menu restaurant avec onglets catégories (entrées/plats/desserts/boissons) en haut et grille de plats avec nom, description, prix en accent couleur terre. Structure classique de carte de restaurant, typographie serif pour le nom, tags allergènes/régimes optionnels.
- mood
- editorial · luxe · minimal · organic
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- alimentaire-restaurantalimentaire-artisanalimentaire-cave
- presets
- artisan-crafteditorialorganic-naturaldark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Menu Lookbook Grid
Grille visuelle de photos carrées des plats avec overlay nom + prix + catégorie au survol, zoom subtil. Pour restaurants gastronomiques et bistrots d'auteur qui veulent mettre en avant la belle présentation plutôt qu'une carte texte classique.
- mood
- editorial · luxe · maximalist · organic
- density
- dense · simple
- animation
- subtle · contrast medium
- sectors
- alimentaire-restaurantalimentaire-artisan
- presets
- dark-luxeeditorialartisan-craftorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Booking Calendar Slots
Formulaire de prise de RDV en 3 étapes : prestation (radio cards avec durée + prix), jour (7 prochains jours en boutons), créneau horaire disponible. Pas de calendrier complet pour rester simple. Adapté coiffeurs, médecins, bien-être, consultants, toute prestation au créneau.
- mood
- clinical · minimal · editorial · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- sante-medicalsante-paramedicalbien-etreservice-proximiteservice-pro
- presets
- clinical-medicalminimal-swisspastel-cozyorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Booking Split Calendar
Layout 2 colonnes : mini-calendrier mensuel à gauche avec jours disponibles cliquables et surlignés, récapitulatif du RDV (durée / tarif / prestataire) + créneaux du jour à droite. Plus riche et professionnel que le layout linéaire calendar-slots.
- mood
- clinical · minimal · editorial · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- sante-medicalsante-paramedicalbien-etreservice-proximiteservice-pro
- presets
- clinical-medicalminimal-swisspastel-cozyorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Products Grid Cards
Grille 3-4 colonnes responsive de produits avec image carrée zoom au hover, nom, prix actuel + prix barré si promo, badge optionnel (nouveau/promo/soldé), CTA 'Ajouter' qui prend la couleur accent au survol. Pattern classique ecommerce mode/déco/spécialisé.
- mood
- editorial · minimal · maximalist · cozy
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- commerce-modecommerce-decocommerce-specialisealimentaire-cave
- presets
- editorialminimal-swissartisan-craftpastel-cozy
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Products Masonry Editorial
Masonry éditorial 3 colonnes avec images à hauteurs variables (sm/md/lg), tagline sous-titre, nom et prix en typo serif discrète. Style 'lookbook magazine', pas de badges criards. Pour boutiques de mode, déco, artisanat qui revendiquent un univers éditorial fort.
- mood
- editorial · luxe · minimal · organic
- density
- dense · moderate
- animation
- subtle · contrast medium
- sectors
- commerce-modecommerce-decoartisanat-craftcommerce-specialise
- presets
- editorialartisan-craftpastel-cozyorganic-natural
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Timeline Vertical Milestones
Frise verticale narrative avec points reliés par une ligne et, pour chaque étape, l'année en accent, un titre, un paragraphe explicatif et optionnellement une citation ou une image. Distinct de `stats.timeline` (horizontal, chiffres bruts) : ici c'est du storytelling. Idéal page À propos longue, histoire d'entreprise, parcours artisan.
- mood
- editorial · luxe · minimal · organic
- density
- balanced · moderate
- animation
- subtle · contrast medium
- sectors
- alimentaire-artisanalimentaire-restaurantartisanat-batimentartisanat-craftculture-evenementielservice-progeneric
- presets
- editorialartisan-craftorganic-naturaldark-luxe
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Timeline Horizontal Decades
Timeline horizontale avec 3-5 grandes époques (décennies, phases clés). Chaque ère affiche période en grand chiffre d'accent, titre d'époque et description synthétique. Plus condensé que vertical-milestones (narration longue). Idéal sagas, maisons séculaires, institutions culturelles.
- mood
- editorial · luxe · minimal · organic
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- alimentaire-artisanartisanat-batimentartisanat-craftculture-evenementieleducation-formationgeneric
- presets
- editorialartisan-craftdark-luxeminimal-swiss
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Blog Grid Cards
Grille d'articles récents sur 3 colonnes avec image 16:9 zoom subtle au hover, tag catégorie flottant, métadonnées (date / durée de lecture / auteur), titre éditorial et excerpt clamp 3 lignes. Pattern classique pour section blog ou page d'accueil média/créateur.
- mood
- editorial · minimal · luxe · cozy
- density
- balanced · simple
- animation
- subtle · contrast medium
- sectors
- culture-evenementieleducation-formationservice-procommerce-specialisegeneric
- presets
- editorialminimal-swissartisan-craftpastel-cozy
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown
Blog Minimal List
Liste verticale épurée d'articles, sans image : date / catégorie / reading time + titre + excerpt 2 lignes. Séparateurs fins entre articles, hover léger sur le titre. Parfait pour blogs éditoriaux à forte volumétrie, essayistes, journalisme long-form, archives.
- mood
- editorial · minimal · organic
- density
- dense · simple
- animation
- none · contrast low
- sectors
- culture-evenementieleducation-formationservice-progeneric
- presets
- editorialminimal-swissartisan-craftbrutalist
- a11y
- WCAG AA · kbd ✓ · reduced-motion
✓
- auteur
- unknown