⭕ Système de Bordures Orochi
Utilisez notre système de bordures complet pour ajouter du style, de la structure et de la clarté à vos interfaces. Le système inclut des bordures de différentes couleurs, épaisseurs, styles et rayons pour tous vos besoins de design.
Bordures standards
La classe de base .o-border ajoute une bordure fine autour de l'élément. Vous
pouvez la combiner avec d'autres classes pour personnaliser l'apparence.
<div class="o-border">Bordure complète</div>
<div class="o-border-top">Bordure supérieure</div>
<div class="o-border-bottom">Bordure inférieure</div>
<div class="o-border-start">Bordure gauche</div>
<div class="o-border-end">Bordure droite</div>Couleurs de bordure
Le système de bordures Orochi inclut des classes pour toutes les couleurs du thème. Utilisez
.o-border-{color} pour appliquer une couleur spécifique.
<div class="o-border o-border-primary">...</div>
<div class="o-border o-border-secondary">...</div>
<div class="o-border o-border-success">...</div>
<div class="o-border o-border-danger">...</div>
<div class="o-border o-border-warning">...</div>
<div class="o-border o-border-info">...</div>
<div class="o-border o-border-dark">...</div>
<div class="o-border o-border-light">...</div>Rayons de bordure
Contrôlez l'arrondi des coins avec les classes de rayon de bordure. Vous pouvez appliquer différents niveaux d'arrondi selon l'effet souhaité.
<div class="o-border o-rounded-phone">Petit rayon</div>
<div class="o-border o-rounded">Rayon standard</div>
<div class="o-border o-rounded-tablet">Rayon moyen</div>
<div class="o-border o-rounded-laptop">Grand rayon</div>
<div class="o-border o-rounded-desktop">Très grand rayon</div>
<div class="o-border o-rounded-pill">Pilule/ellipse</div>
<div class="o-border o-rounded-0">Aucun rayon</div>Épaisseurs de bordure
Contrôlez l'épaisseur de vos bordures avec les classes d'épaisseur. Par défaut, la bordure est fine (1px), mais vous pouvez l'augmenter selon vos besoins.
<div class="o-border o-border-1">Épaisseur 1px</div>
<div class="o-border o-border-2">Épaisseur 2px</div>
<div class="o-border o-border-4">Épaisseur 4px</div>
<div class="o-border o-border-8">Épaisseur 8px</div>Styles de bordure
Choisissez parmi différents styles de bordure pour varier l'apparence de vos éléments. Chaque style peut être combiné avec les autres classes de bordure.
<div class="o-border o-border-solid">Plein</div>
<div class="o-border o-border-dashed">Tiretés</div>
<div class="o-border o-border-dotted">Pointillés</div>
<div class="o-border o-border-double">Double</div>Utilitaires pratiques
Découvrez quelques combinaisons utiles de classes de bordure pour créer des effets visuels intéressants.
Cartes avec bordures accentuées
Carte primaire
Contenu de la carte avec bordure accentuée.
Carte succès
Contenu de la carte avec bordure accentuée.
<div class="o-border o-border-4 o-border-primary o-rounded-laptop o-p-3">
<h4 class="o-text-primary">Carte primaire</h4>
<p>Contenu de la carte avec bordure accentuée.</p>
</div>
<div class="o-border o-border-4 o-border-success o-rounded-laptop o-p-3">
<h4 class="o-text-success">Carte succès</h4>
<p>Contenu de la carte avec bordure accentuée.</p>
</div>Badges avec bordures
<span class="o-border o-border-primary o-rounded-pill o-px-3 o-py-1 o-text-primary">
Badge Primaire
</span>
<span class="o-border o-border-success o-rounded-pill o-px-3 o-py-1 o-text-success">
Badge Succès
</span>
<span class="o-border o-border-danger o-rounded-pill o-px-3 o-py-1 o-text-danger">
Badge Danger
</span>
<span class="o-border o-border-warning o-rounded-pill o-px-3 o-py-1 o-text-warning">
Badge Avertissement
</span>💡 Astuce
Combine .o-border avec .o-border-{color} et .o-rounded
pour créer des éléments visuellement distincts. N'oubliez pas que vous pouvez également utiliser les classes
d'épaisseur et de style pour personnaliser davantage l'apparence de vos bordures.