Démo des composants

Présentation de tous les composants de carte de campagne inspirés du design de l'affiche "VOTE AVI". Caractéristiques : typographie audacieuse, couleurs plates et ombres géométriques.

Démonstration bilingue interactive

Cette démonstration montre comment nos composants s'adaptent automatiquement au contexte linguistique. Testez le commutateur de langue pour voir le contenu changer instantanément.

Composant de commutation de langue

Le composant LanguageToggle fournit un moyen propre et accessible de basculer entre l'anglais et le français. Construit avec Astro Islands pour des performances optimales utilisant l'hydratation client:idle.

Variantes de taille

Petit

Moyen (par défaut)

Grand

Fonctionnalités de performance

  • client:idle - JavaScript se charge quand le navigateur est inactif
  • Amélioration progressive - Fonctionne sans JS
  • Accessible - Étiquettes ARIA et navigation au clavier
  • Léger - Bundle JavaScript minimal
  • Système d'événements - Diffuse des événements languageChange
  • Prêt pour l'analytique - Support de suivi intégré

Exemple d'utilisation :

import LanguageToggle from '../components/LanguageToggle.astro'

<LanguageToggle 
  currentLang="fr" 
  size="medium" 
  variant="default"
  client:idle
/>

Exemples de contenu français

Transition vers la propriété démocratique pour 50% des entreprises canadiennes d'ici 2040.

CONSTRUIRE LE POUVOIR COOPÉRATIF

Rejoignez les coopératives ouvrières et les initiatives de propriété communautaire à travers le Canada.