Bibliothèque assets

Assets telechargeables et snippets prêts à integrer

Previsualisez les composants directement dans la page, copiez chaque bloc de code separement (HTML, CSS, JavaScript ou PHP), puis telechargez 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 dejà calcule (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 metriques de completion dans un dashboard

Fichier CSS

Loader anime (spinner + texte)

Animation CSS legè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 etat 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">Reinitialiser</button>
</section>

Cas d'usage

Tester rapidement l'exécution JavaScript dans un snippet
Montrer une interaction UI simple pendant une demo 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 telechargement du fichier.

<?php
/*
Plugin Name: NextGen CTA Block
Description: Ajoute le shortcode [nextgen_cta] pour inserer 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

Inserer 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 temoignages

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

JavaScriptUINo dépendency

Aperçu interactif

<section class="slider" aria-label="Temoignages 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
Reduire la hauteur d'une section preuves sociales
Mettre en avant des cas clients sans carrousel lourd