Catalogue // Blaig Nova
73 composant(s). Cliquez une vignette pour voir le composant en taille réelle et récupérer son code.
Catégorie
Une SEULE carte qui change de mise en page selon la largeur de son conteneur (container queries CSS), pas selon la taille de l'écran. Colle-la n'importe où, elle s'adapte toute seule.
Carte verticale image en haut, idéale pour un article de blog ou une réflexion : kicker, titre, métadonnées, extrait, lien.
Carte qui révèle une description complète et un bouton de fermeture au survol. Passez la souris dessus pour voir la transition.
Grande carte avec image plein cadre et contenu en surimpression. Pour mettre en avant UN projet phare, pas une liste.
Carte tout-texte avec un petit anneau décoratif en fond. Utile pour une collection, une catégorie ou un lien sans besoin d'illustration.
Image à gauche, contenu à droite. Le format le plus courant pour lister des projets ou des articles.
Catégorie
Bandeaux d'alerte inline (information et avertissement), avec bouton de fermeture fonctionnel.
Indicateurs d'état (en ligne / dégradé / hors ligne) et compteurs circulaires pour afficher des chiffres clés en un coup d'œil.
Message à afficher quand une liste, une recherche ou un tableau n'a rien à montrer, avec une action pour aider à en sortir.
3 styles de chargement : spinner rotatif, barre de progression avec pourcentage, points indéterminés. 100% CSS (animations @keyframes), aucun JavaScript.
Grand panneau d'erreur, pour une page entière (ex: échec de paiement, action qui n'a pas abouti).
Grand panneau de confirmation, pour une page entière (ex: après validation d'une commande ou d'un formulaire).
Page d'erreur complète pour une URL introuvable, avec image de fond et bouton de retour.
Silhouettes animées à afficher pendant le chargement d'un vrai contenu (cartes, texte). Effet de scintillement en CSS pur.
Pile de notifications flottantes (succès, info, avertissement, erreur), chacune avec un bouton de fermeture fonctionnel.
Catégorie
Champ avec icône loupe et bouton d'effacement qui apparaît dès que tu tapes du texte. Léger JavaScript pour ce comportement.
Case à cocher personnalisée (le carré natif est masqué, redessiné en CSS), avec ses états normal / désactivé.
Les 4 états visuels d'un champ de texte : normal, focus, erreur (avec message), succès. À combiner avec ta logique de validation JS/backend.
Champ email + bouton d'inscription inline, avec une note de confidentialité en dessous. Uniquement le visuel : à connecter à ton service d'emailing (Mailchimp, Brevo, etc.).
Encadré de confirmation à afficher après l'envoi réussi d'un formulaire.
Boutons radio personnalisés (le rond natif est masqué, redessiné en CSS) pour un choix unique parmi plusieurs options.
Menu déroulant natif restylé (flèche personnalisée, couleurs Blaig Nova). Reste un vrai <select> HTML, donc compatible avec n'importe quel formulaire backend.
Interrupteur à bascule pour un réglage on/off (préférences, paramètres). États activé / désactivé / désactivé-verrouillé.
Zone de dépôt de fichier (glisser-déposer ou clic pour parcourir), qui affiche le nom et le poids du fichier une fois choisi. Nécessite du JavaScript.
Catégorie
Argumentaire de téléchargement d'app avec mockups de téléphones stylisés en CSS pur (aucune image nécessaire) et badges de stores.
Grande image à gauche, titre percutant et CTA à droite. Bon équilibre entre impact visuel et message clair.
Grande image éditoriale avec titre et CTA en surimpression, plus une bande latérale. Pour une page d'accueil magazine/média.
Catégorie
Chaque bloc apparaît en fondu + léger glissement quand il entre dans l'écran pendant le scroll. Utilise IntersectionObserver.
Fine barre qui se remplit au fur et à mesure de la lecture. Ici démontrée dans un cadre autonome (scrollez DANS le cadre) — sur un vrai site, remplace 'position: sticky' par 'position: fixed' pour qu'elle reste collée en haut de l'écran pendant tout le scroll de la page.
4 cartes en 3D qui se retournent une par une pendant que tu scrolles (pas au survol, pas en boucle automatique). Contenu provisoire, à remplacer selon ta charte finale.
Remplace le curseur natif par un cercle qui suit la souris et change d'aspect selon l'élément survolé (lien, zone de drag...). Nécessite du JavaScript.
Vignette qui assombrit l'image et fait apparaître une icône au survol, pour signaler qu'elle est cliquable.
Petite jauge verticale qui affiche le pourcentage de défilement de la page. Même mécanisme que le parallax : écoute le scroll de la vraie page.
Petit menu d'actions qui s'ouvre au clic sur un bouton '⋮', se ferme au clic extérieur ou avec Échap. Nécessite du JavaScript.
Fenêtre modale plein écran, ouverte/fermée en CSS pur (technique :target). Un lien standard suffit à l'ouvrir.
Menu plein écran avec grands liens centrés et réseaux sociaux, ouvert/fermé en CSS pur (checkbox hack).
Infobulle qui apparaît au survol ou au focus clavier (accessible), sans JavaScript.
Catégorie
Image 1 en dessous, image 2 au-dessus : le curseur découpe la couche du dessus pour révéler celle du dessous. Version format carte — voir 'Slider avant/après' pour la version plein écran.
Grille d'images en hauteurs variées façon mur de photos, sans JavaScript (technique des colonnes CSS).
Une image en plein cadre, sans texte ni carte autour. Pour une respiration visuelle entre deux sections.
Grille de vignettes qui s'ouvrent en plein écran au clic, avec navigation précédent/suivant qui boucle. 100% CSS, aucun JavaScript.
Curseur à glisser pour révéler progressivement l'image 'après' par-dessus l'image 'avant'. Utilise un <input type="range"> natif (accessible au clavier), avec un tout petit script pour synchroniser l'affichage.
Lecteur vidéo avec image de couverture et gros bouton play centré, qui disparaît une fois la lecture lancée. Nécessite un peu de JavaScript.
Catégorie
Processus en 3 étapes numérotées, reliées par une ligne pointillée. Variante plus visuelle de '3 étapes simples'.
Citation en surimpression d'une image de fond qui se décale légèrement au scroll. Variante 'photo' de la citation parallax (voir aussi la version texte géant).
4 témoignages courts côte à côte avec avatar, citation et rôle. Renforce la preuve sociale en un coup d'œil.
Photos d'équipe, nom, rôle et liens réseaux sociaux sous chaque membre. Variante plus formelle de 'Grille équipe'.
Noms de clients en typographie pure, sans image logo. Pratique tant que tu n'as pas encore les fichiers logos de chaque client.
3 articles en cartes côte à côte avec date, titre, extrait et lien. Variante en grille du module actualités en liste.
3 offres tarifaires en cartes, dont une mise en avant, qui apparaissent en fondu au scroll. Même mécanisme que 'Pricing avec fondu au scroll' (liste), en version cartes.
3 cartes avec icône, titre et texte, sur fond en dégradé. Couleurs pilotées par 2 variables CSS — facile à recolorer entièrement.
4 valeurs avec icône, titre et texte en colonnes. Pour une page 'À propos' ou une section manifeste.
Catégorie
Paragraphe d'introduction en plus gros caractère, avec les premiers mots mis en avant. Sert à accrocher avant le corps de texte.
Plusieurs paragraphes de texte courant, avec un interligne et une largeur de lecture confortables.
Les 6 niveaux de titres (H1 à H6) avec leur usage recommandé en légende. Base à copier en tout début de projet pour poser le système de titres.
Image accompagnée d'une légende discrète en dessous. Pour crédits photo, contexte ou description.
Liens intégrés à du texte courant, avec démonstration des 4 états (par défaut, survol, focus clavier, visité).
Trois styles de listes : à puces, numérotée, et avec icônes flèche. Couleur des puces/numéros/icônes personnalisable.
Ligne d'informations contextuelles pour un article ou une réflexion : date, catégorie, durée de lecture, auteur.
Plusieurs styles de séparateurs (ligne simple, pointillés, avec cercle) et un exemple d'intertitre numéroté pour découper un long contenu.
Catégorie
Questions numérotées, dépliables une à une avec <details> natif — accessible et sans JavaScript.
Petites étiquettes pour catégoriser du contenu (statut, tag, catégorie). Couleur d'accent personnalisable.
Bouton principal, secondaire et texte, avec leurs états (survol, désactivé, focus). Couleurs et effets personnalisables.
Défilement de slides avec flèches et puces de navigation. Utilise le scroll-snap natif du navigateur (fluide, tactile sur mobile), piloté par un peu de JavaScript pour les flèches/puces.
Grille d'images bien rangée (contrairement à la masonry), avec onglets de filtre par catégorie. Léger JavaScript pour le filtrage.