Démonstration des éléments

Tous les éléments HTML stylisés selon le design system sélectionné

Primary

Actions principales

Boutons primaires

Lien CTA

Navigation principale

Secondary

Éléments de support

Boutons secondaires

Aside

Details / Summary

Afficher plus d'options
Contenu additionnel révélé au clic. Utile pour les FAQ ou les options avancées.

Fieldset

Options de livraison

Contenu du groupe de champs...

Fil d'Ariane

Small

Texte normal avec texte secondaire plus petit intégré.

Accent

Mise en valeur

Emphase textuelle

Texte avec surlignage pour la pertinence.

Texte avec forte importance accentuée.

Texte avec emphase italique subtile.

Alerte

Badges et Tags

Notification 3

Design CSS HTML

Progress

Progression: 70%

70%

Focus state

Output

Total: 42,00 €

Text

Contenu textuel

Titres

Titre H1

Titre H2

Titre H3

Titre H4

Paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Citation

Le design n'est pas seulement ce à quoi ça ressemble. Le design, c'est comment ça fonctionne. — Steve Jobs

Listes

  • Premier élément
  • Deuxième élément
  • Troisième élément
  1. Étape un
  2. Étape deux
  3. Étape trois

Liste de définitions

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Formulaire

Code

Utilisez var(--color-primary) pour la couleur primaire.

:root {
  --color-primary: #0066cc;
  --color-accent: #ff6b35;
}

Raccourcis clavier

Appuyez sur Ctrl + S pour sauvegarder.

Tableau

Nom Rôle
Alice Designer
Bob Développeur

Abréviations

HTML et CSS sont essentiels.

Lien

Visitez notre page d'accueil pour plus d'informations.

Contact: contact@example.com
Background

Surfaces et conteneurs

Article

Titre de l'article

Contenu principal de l'article avec texte descriptif.

Publié le 15 janvier 2024

Card

Titre de la carte

Description courte du contenu de cette carte.

Figure

Image 16:9
Figure 1: Légende de l'image

Dialog / Modal

Confirmer l'action

Êtes-vous sûr de vouloir continuer?

Formulaire complet

Options
Préférence