Démo Composants HTML

Boutons

Déclinaisons gris et bleu

Boutons d'action rapide - Version grise

Boutons d'action rapide - Version bleue

Cartes

Titre de la carte

Contenu de la carte avec du texte d'exemple pour démontrer le style.

Carte Élevée

Cette carte a une ombre plus prononcée.

Cartes Pliables

Informations Générales

Ceci est le contenu de la carte pliable. Vous pouvez y mettre toutes sortes d'informations.

Le contenu se déplie et se replie avec une animation fluide.

Détails Techniques

Spécifications techniques détaillées.

Configuration système et paramètres avancés.

Historique

Journal des modifications et des événements.

Suivi des versions et des mises à jour.

Paramètres

Options de configuration personnalisables.

Préférences utilisateur et paramètres avancés.

Formulaires

📅
Lun
Mar
Mer
Jeu
Ven
Sam
Dim

Floating Labels

Variantes de taille

États de validation

👤

Radio Buttons

Navigation

Alertes

ℹ️ Information importante
Opération réussie
⚠️ Attention requise
Erreur détectée

Badges

Par défaut Principal Succès Attention Danger

Modales

Indicateurs de chargement

Listes d'Objets avec Édition

Liste de Sujets

Liste de Tâches

Liste de Projets

Sélection de Personnes

Sélectionner l'équipe...

Listes simples

Liste serrée

LCR
DC
PD
NVO
TA
TBA

Avec compteur

LCR
DC
PD
+3

Sans séparateur

LCR
DC
PD
NVO
TA
TBA

Juste les acronymes

Acronymes normaux

LCR
Laurent Crelier
laurent.crelier@example.com
Chef de projet
DC
David Cabero
dcabero@hotela.ch
Développeur
PD
Guiseppe Di Pietro
gdipietro@hotela.ch
Designer
NVO
Nicolas Voelin
pierre.durand@example.com
Analyste

Acronymes compacts

LCR DC PD NVO TA

Avec couleurs

LCR DC PD NVO

Avec statuts

LCR DC PD NVO

Variantes d'affichage

Affichage complet

LCR
Laurent Crelier
laurent.crelier@example.com
Chef de projet
Laurent Crelier
DC
David Cabero
dcabero@hotela.ch
Développeur
David Cabero
PD
Guiseppe Di Pietro
gdipietro@hotela.ch
Designer
Guiseppe Di Pietro

Avatars seulement

LCR
Laurent Crelier
laurent.crelier@example.com
Chef de projet
DC
David Cabero
dcabero@hotela.ch
Développeur
PD
Guiseppe Di Pietro
gdipietro@hotela.ch
Designer
NVO
Nicolas Voelin
pierre.durand@example.com
Analyste
TA
Thomas Attenon
tatteno@hotela.ch
Testeur
TBA
Tarik Bacha
tbacha@hotela.ch
DevOps

Pastilles sélectionnées

LCR
Laurent Crelier
DC
David Cabero
PD
Guiseppe Di Pietro