Partie 16 — Composants UI : boutons, cartes, navbar, sections propres

Un site web moderne n’est pas une simple suite de pages. Il est composé de composants UI réutilisables : boutons, cartes, menus, sections, blocs d’information.

Penser en composants permet :

• d’avoir un design cohérent
• de gagner du temps
• de faciliter la maintenance
• d’évoluer vers des frameworks plus tard (React, Vue…)

👉 Un bon composant est simple, clair et réutilisable.

1) Boutons : actions claires et visibles

Les boutons déclenchent des actions : envoyer un formulaire, télécharger, naviguer, confirmer.

Structure HTML de base :

<button class="btn">Valider</button>
<a href="#" class="btn btn-primary">Télécharger</a>
  

Style CSS simple et propre :

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: #2563eb;
  color: #ffffff;
}
  

Bonnes pratiques :

• une action principale = une couleur forte
• éviter trop de styles différents
• texte clair et court

2) Cartes : structurer le contenu

Les cartes sont utilisées partout : articles, produits, profils, tutoriels.

Structure HTML :

<article class="card">
  <h3>Titre de la carte</h3>
  <p>Description courte du contenu.</p>
  <a href="#" class="btn">Lire plus</a>
</article>
  

Style CSS :

.card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  background-color: #ffffff;
}
  

Astuce UX : chaque carte doit être compréhensible sans cliquer.

3) Navbar : navigation claire

La navbar permet à l’utilisateur de se repérer rapidement.

Structure HTML :

<header class="navbar">
  <div class="logo">MonSite</div>
  <nav class="nav-links">
    <a href="#">Accueil</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
</header>
  

Style CSS (Flexbox) :

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
.nav-links {
  display: flex;
  gap: 16px;
}
  

Bonnes pratiques :

• peu de liens (5 max)
• logo visible
• navigation cohérente sur toutes les pages

4) Sections propres : structurer la page

Une page bien lisible est découpée en sections claires.

Structure HTML :

<section class="section">
  <h2>Titre de section</h2>
  <p>Contenu de la section.</p>
</section>
  

Style CSS :

.section {
  padding: 48px 16px;
  max-width: 1100px;
  margin: 0 auto;
}
  

Résultat : contenu aéré, lisible et cohérent.

5) Cohérence visuelle et réutilisation

Tous les composants doivent partager :

• les mêmes couleurs
• les mêmes espacements
• les mêmes arrondis
• les mêmes polices

Astuce pro : définissez des classes génériques (.btn, .card, .section) au lieu de styles uniques partout.

6) Erreurs fréquentes avec les composants UI

• composants trop complexes
• styles dupliqués
• manque de cohérence
• trop de couleurs ou d’animations

Vous savez maintenant créer des composants UI propres : boutons, cartes, navbar et sections bien structurées.

Dans la Partie 17, nous verrons les bases de l’accessibilité et du SEO HTML : balises sémantiques, textes alternatifs et bonnes pratiques.

✅ Un bon design commence par de bons composants.