Aller au contenu principal
5.1

Composants UI fondamentaux

Boutons, cartes, badges

Cette section documente les composants d’interface qui composent l’expression digitale Gradly. Ils sont implémentés en Tailwind v4 dans le repo du site, directement dans les .astro des pages.

Boutons

Bouton d’action principale (CTA)

Télécharger gratuitement

<a href="/telecharger" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700
  text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-lg shadow-blue-500/25">
  Télécharger gratuitement
</a>

Règles :

  • Fond bg-blue-600 (Primary 600), hover bg-blue-700
  • Texte blanc, font-semibold, taille text-lg
  • Padding px-8 py-4 (large), rayon rounded-xl (12 px)
  • Ombre teintée shadow-lg shadow-blue-500/25 pour relief
  • Icône optionnelle à droite, taille w-5 h-5
  • Un seul CTA principal par section maximum

Bouton secondaire

Voir la démo

Documentation

<!-- Outline -->
<a class="inline-flex items-center gap-2 border-2 border-blue-600 text-blue-700
  bg-white hover:bg-blue-50 px-6 py-3 rounded-xl font-semibold">
  Voir la démo
</a>

<!-- Ghost -->
<a class="inline-flex items-center gap-2 text-gray-700 bg-gray-100 hover:bg-gray-200
  px-6 py-3 rounded-xl font-medium">
  Documentation
</a>

Cartes

Carte de fonctionnalité

Suivi des compétences

Référentiels RNCP, blocs, évaluations par acquis.

Bulletins PDF

Génération en un clic, conforme RNCP.

Qualiopi ready

Indicateurs 11 et 12 couverts nativement.

Règles :

  • Fond blanc, bordure border-gray-200, rayon rounded-2xl
  • Padding p-6
  • Icône en haut, w-10 h-10 avec fond bg-blue-100 + texte text-blue-600
  • Titre font-semibold text-gray-900 text-base
  • Description text-sm text-gray-600

Carte de tarif

Pattern identique mais avec p-8 (padding plus large) et parfois un badge « Populaire » en haut.

Badges

Badge statut

DisponibleEn coursNon acquisNouveauDéfaut
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5
  text-xs font-medium text-green-800">Disponible</span>

Règles :

  • Toujours la paire bg-{color}-100 + text-{color}-800 pour garder un contraste AA
  • Taille text-xs, poids font-medium, jamais font-bold
  • Padding px-2.5 py-0.5
  • rounded-full
  • Attention CVD-safe : pour un binaire succès/échec, toujours ajouter une icône ou un texte distinctif en plus de la couleur (voir 4.4 Palette règles).

Composition

Pour assembler ces composants dans une page, voir 5.2 Patterns de page.