Bibliothèque assets

Assets téléchargeables et snippets prêts à intégrer

Prévisualisez les composants directement dans la page, copiez chaque bloc de code séparément (HTML, CSS, JavaScript ou PHP), puis téléchargez tous les fichiers sources de chaque asset en un clic.

Demander un asset sur mesure

Fichier CSS

Barres de progression UI (statiques)

Composant visuel HTML/CSS pour afficher un pourcentage déjà calculé (ex: progression d'étapes), sans logique de chargement fichier.

HTMLCSSUI

Aperçu interactif

<section class="gauge-wrapper" aria-label="Progression projet">
  <h3>Progression du projet</h3>

  <div class="loading-gauge" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
    <span style="--progress: 35%"></span>
  </div>

  <div class="loading-gauge" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
    <span style="--progress: 68%"></span>
  </div>

  <div class="loading-gauge" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100">
    <span style="--progress: 92%"></span>
  </div>
</section>

Cas d'usage

Visualiser l'avancement d'un formulaire multi-étapes
Montrer une progression de parcours onboarding
Afficher des métriques de complétion dans un dashboard

Fichier CSS

Loader animé (spinner + texte)

Animation CSS légère pour signaler un traitement en cours avec rendu fluide et sans dépendance.

HTMLCSSAnimation

Aperçu interactif

<div class="loader-card" role="status" aria-live="polite">
  <span class="spinner" aria-hidden="true"></span>
  <p>Chargement en cours...</p>
</div>

Cas d'usage

Indiquer un traitement API en cours
Afficher un état d'attente dans un formulaire
Remplacer un loader GIF par une animation CSS performante

Script JS

Compteur de clics interactif

Mini composant JavaScript pour tester une interaction utilisateur (clic) avec mise à jour temps réel.

JavaScriptHTMLCSS

Aperçu interactif

<section class="counter-card" aria-label="Compteur de clics">
  <p class="counter-label">Nombre de clics</p>
  <p class="counter-value" id="counter-value">0</p>
  <button type="button" id="counter-button">Cliquer</button>
  <button type="button" id="counter-reset" class="counter-reset">Réinitialiser</button>
</section>

Cas d'usage

Tester rapidement l'exécution JavaScript dans un snippet
Montrer une interaction UI simple pendant une démo client
Servir de base pour un composant de vote ou de likes

Plugin PHP

Plugin WordPress (bloc CTA)

Plugin prêt à activer qui ajoute un shortcode [nextgen_cta] avec bouton et texte personnalisables.

WordPressPHPShortcode

Aperçu interactif

Le plugin WordPress n'a pas d'aperçu navigateur. Utilisez les snippets et le téléchargement du fichier.

<?php
/*
Plugin Name: NextGen CTA Block
Description: Ajoute le shortcode [nextgen_cta] pour insérer un bloc call-to-action.
*/
add_shortcode('nextgen_cta', function($atts) {
  $atts = shortcode_atts(['title' => 'Besoin d'un site performant ?', 'url' => '/contact'], $atts);
  return '<a class="nextgen-cta" href="'.esc_url($atts['url']).'">'.esc_html($atts['title']).'</a>';
});

Cas d'usage

Insérer un CTA dans un article sans plugin page builder
Standardiser les appels à l'action sur plusieurs pages
Tester rapidement plusieurs messages marketing

Script JS

Slider témoignages

Slider vanilla JavaScript sans dépendance, idéal pour afficher des avis clients.

JavaScriptUINo dependency

Aperçu interactif

<section class="slider" aria-label="Témoignages clients">
  <article class="slide" data-slide>
    <p>“Excellent accompagnement, +35% de leads en 6 semaines.”</p>
  </article>
  <article class="slide hidden" data-slide>
    <p>“Stack moderne et SEO au top, publication ultra rapide.”</p>
  </article>
  <article class="slide hidden" data-slide>
    <p>“Mise en place simple, sans librairie externe.”</p>
  </article>
</section>

Cas d'usage

Afficher des avis clients en rotation automatique
Réduire la hauteur d'une section preuves sociales
Mettre en avant des cas clients sans carrousel lourd