Home Styleguide
Phone frame

Styleguide Faber.ia

Composants UI réutilisables avec Tailwind CSS

Buttons

Niveaux de boutons

<button class="btn-niv-0">Bouton NIV 0</button>
<button class="btn-niv-1">Bouton NIV 1</button>
<button class="btn-niv-2">Bouton NIV 2</button>
<button class="btn-niv-3">Bouton NIV 3</button>

Boutons avec icônes

<button class="btn-niv-1">
  Bouton NIV 1
  <svg class="icon-plus">...</svg>
</button>

Tailles de boutons

Extra Small (XS) - Pour badges, tags, actions inline

Small (SM) - Pour toolbars, formulaires compacts

Medium (MD) - Taille par défaut (standard)

Large (LG) - Pour actions primaires importantes

Extra Large (XL) - Pour Hero sections, CTAs majeurs

<button class="btn-niv-0 btn-xs">Extra Small</button>
<button class="btn-niv-0 btn-sm">Small</button>
<button class="btn-niv-0">Medium (défaut)</button>
<button class="btn-niv-0 btn-lg">Large</button>
<button class="btn-niv-0 btn-xl">Extra Large</button>

Labels

Technique Technique Technique Technique 
<span class="label-ghost">Technique</span>
<span class="label-outline">Technique</span>
<span class="label-filled-black">Technique</span>
<span class="label-filled-lime">Technique</span>

Input Fields

États standards

<input type="text" class="input-default" placeholder="Default">
<input type="text" class="input-active" placeholder="Active">
<input type="text" class="input-disabled" placeholder="Disabled" disabled>

État erreur

Le titre doit contenir au moins 5 caractères 

<input type="text" class="input-default input-error" placeholder="...">
<p class="error-message">
  <i class="ri-error-warning-line"></i>
  Le titre est obligatoire
</p>

Avec icônes

<div class="input-with-icon input-with-icon-left">
  <svg class="input-icon-left w-5 h-5">...</svg>
  <input type="text" class="input-default" placeholder="...">
</div>

<div class="input-with-icon input-with-icon-right">
  <input type="text" class="input-default" placeholder="...">
  <svg class="input-icon-right w-5 h-5">...</svg>
</div>

Tailles d'inputs

Extra Small (XS) - Formulaires très compacts, tableaux

Small (SM) - Formulaires compacts, listes

Medium (MD) - Taille par défaut (standard)

Large (LG) - Formulaires spacieux

Extra Large (XL) - Champs très visibles

Textarea Small

<input type="text" class="input-default input-xs" placeholder="...">
<input type="text" class="input-default input-sm" placeholder="...">
<input type="text" class="input-default" placeholder="..." /> <!-- MD par défaut -->
<textarea class="input-default input-sm" rows="3"></textarea>

Dropdowns

États standards

Dropdown / Close
Dropdown / Open
Dropdown / Disable 
<div class="dropdown-close">
  <span>Dropdown / Close</span>
  <svg class="icon-chevron">...</svg>
</div>

<div class="dropdown-open">
  <span>Dropdown / Open</span>
  <svg class="icon-chevron open">...</svg>
</div>

Select avec erreur

La catégorie est obligatoire 

<select class="dropdown-close select-error">
  <option>Sélectionner une catégorie</option>
</select>
<p class="error-message">
  <i class="ri-error-warning-line"></i>
  La catégorie est obligatoire
</p>

Categories

Pills individuels

Modèle Technique Outil Matériau Réparation Sécurité 
<span class="category-active">Modèle</span>
<span class="category-inactive">Technique</span>

Système complet de filtres

Modèle Technique Outil Matériau Réparation Sécurité
Aucune
Modèle Technique Outil Matériau Réparation Sécurité

Messages d'erreur

Bannière d'erreur globale

2 erreurs empêchent la création de la ressource

  • Le titre est obligatoire
  • La catégorie est obligatoire
<div class="error-banner">
  <div class="flex items-start gap-3">
    <i class="ri-error-warning-line text-xl flex-shrink-0"></i>
    <div class="flex-1">
      <p class="font-semibold text-sm mb-1">2 erreurs empêchent...</p>
      <ul class="text-sm space-y-1">
        <li>Le titre est obligatoire</li>
        <li>La catégorie est obligatoire</li>
      </ul>
    </div>
  </div>
</div>

Message d'erreur de champ

Le titre est obligatoire 

<p class="error-message">
  <i class="ri-error-warning-line"></i>
  Le titre est obligatoire
</p>

Matériaux & Outils

Items matériaux

Tubes de borosilicate Plaques graphites Baguettes de verre 
<span class="material-item">
  <i class="ri-links-line"></i>
  Tubes de borosilicate
</span>

Pills outils

Chalumeau à main Lunettes de protection Pinces à bec rond Marbre 
<span class="tool-pill">Chalumeau à main</span>

Exemple complet

MATÉRIAUX
Tubes de borosilicate Plaques graphites
OUTILS
Chalumeau à main Lunettes protection Pinces 
<div>
  <span class="label-outline mb-3 inline-block">MATÉRIAUX</span>
  <div class="flex flex-wrap gap-2">
    <span class="material-item">
      <i class="ri-links-line"></i>
      Tubes de borosilicate
    </span>
  </div>
</div>

Formulaires dynamiques

Champs avec suppression

<div class="flex gap-2">
  <input type="text" class="input-default input-sm flex-1" placeholder="...">
  <button type="button" class="w-10 h-10 ... text-brand-rust hover:bg-brand-blush">
    <i class="ri-close-line text-xl"></i>
  </button>
</div>

Groupe de champs - Étape

Étape 1

En secondes (ex: 83 pour 1min 23sec)

<div class="bg-white rounded-lg p-4 border border-brand-silver">
  <div class="flex items-start justify-between mb-3">
    <h3 class="text-sm font-bold">Étape 1</h3>
    <button type="button" class="text-brand-rust">
      <i class="ri-delete-bin-line text-xl"></i>
    </button>
  </div>
  <div class="space-y-3">
    <div>
      <label class="block text-xs font-medium mb-1.5">Titre</label>
      <input type="text" class="input-default input-sm w-full">
    </div>
    ...
  </div>
</div>

Groupe de champs - Point de vigilance

Point de vigilance

En secondes (ex: 83 pour 1min 23sec)

<div class="bg-white rounded-lg p-4 border border-brand-butter">
  <!-- Bordure jaune pour les points de vigilance -->
  ...
</div>

Boutons d'ajout

<button type="button" class="btn-niv-3 btn-sm">
  <i class="ri-add-line text-lg"></i>
  Ajouter un matériau
</button>

Édition inline

Bouton d'édition

DURÉE

2h30

<div class="flex items-start justify-between">
  <div>...contenu...</div>
  <button class="w-8 h-8 ... hover:bg-brand-ash">
    <i class="ri-pencil-line text-lg"></i>
  </button>
</div>

Affichage étape avec timecode

Préparation du verre

1:23

Nettoyer et préparer le tube de verre avant de commencer le travail. 

<div class="border-l-2 border-brand-silver pl-4">
  <div class="flex items-start justify-between mb-2">
    <div class="flex items-center gap-2">
      <i class="ri-arrow-down-line"></i>
      <h3>Préparation du verre</h3>
    </div>
    <div class="flex items-center gap-2">
      <span>1:23</span>
      <button class="w-6 h-6 bg-brand-lime rounded-full">
        <i class="ri-play-fill"></i>
      </button>
    </div>
  </div>
  <p>Description de l'étape...</p>
</div>

Affichage point de vigilance

Porter des lunettes de protection

0:45

Protection essentielle contre les UV et les projections de verre. 

<div class="bg-brand-cream rounded-lg p-4">
  <div class="flex items-start justify-between gap-3">
    <h3>Porter des lunettes de protection</h3>
    <div class="flex items-center gap-2">
      <span>0:45</span>
      <button class="w-6 h-6 bg-brand-lime rounded-full">
        <i class="ri-play-fill"></i>
      </button>
    </div>
  </div>
  <p>Description...</p>
</div>

Palette de couleurs

Neutres

Black
brand-black
Charcoal
brand-charcoal
Gray
brand-gray
Silver
brand-silver
Ash
brand-ash
White
brand-white

Primaires

Olive
brand-olive
Lime
brand-lime
Butter
brand-butter
Cream
brand-cream

Accents

Rust
brand-rust
Blush
brand-blush