🃏 Cartes Orochi

Corps

L'élément de base d'une carte est le .o-card-body. Utilisez-le chaque fois que vous avez besoin d'une section rembourrée dans une carte.

<div class="o-card">
  <div class="o-card-body">
    Il s'agit d'un texte dans le corps d'une carte.
  </div>
</div>

Titres, textes et liens

Les titres de carte s’ajoutent en appliquant .o-card-title à une balise <h*>. Les sous-titres utilisent .o-card-subtitle sur une balise <h*> également. Placez titres et sous-titres dans un .o-card-body pour garantir un alignement optimal.
Les liens sont ajoutés avec .o-card-link sur une balise <a> ; ils s’affichent côte à côte dans la carte.

<div class="o-card" style="width: 18rem;">
  <div class="o-card-body">
    <h5 class="o-card-title">Titre de la carte</h5>
    <h6 class="o-card-subtitle">Sous-titre de la carte</h6>
    <p class="o-card-text">Voici un exemple de texte concis pour illustrer le contenu principal de la carte et compléter son titre.</p>
    <a class="o-card-link">Lien de la carte </a>
    <a class="o-card-link">Un autre lien </a>
  </div>
</div>

Carte avec image en haut

La classe .o-card-img-top permet d’insérer une image en haut de la carte, avec les coins supérieurs arrondis automatiquement.

Titre

Texte descriptif

<div class="o-card" style="width: 18rem;">
  <img src="..." class="o-card-img-top" alt="...">
  <div class="o-card-body">
    <h4 class="o-card-title">Titre</h4>
    <p class="o-card-text">Texte descriptif</p>
  </div>
</div>

Carte avec image en bas

La classe .o-card-img-bottom permet d’ajouter une image en bas de la carte, sous le contenu principal. Placez simplement la balise <img> après le .o-card-body : l’image occupera toute la largeur et les coins inférieurs seront arrondis automatiquement.

Titre

Texte descriptif

<div class="o-card" style="width: 18rem;">
  <div class="o-card-body">
    <h4 class="o-card-title">Titre</h4>
    <p class="o-card-text">Texte descriptif</p>
  </div>
    <img src="..." class="o-card-img-bottom" alt="...">
</div>

List group dans carte

Créez des listes de contenu dans une carte en utilisant un groupe de listes avec .o-list-group et .o-list-group-item. Ajoutez .o-list-group-flush pour supprimer les bordures extérieures et aligner la liste avec les bords de la carte.

<div class="o-card" style="width: 18rem;">
  <ul class="o-list-group o-list-group-flush">
    <li class="o-list-group-item">Élément 1</li>
    <li class="o-list-group-item">Élément 2</li>
    <li class="o-list-group-item">Élément 3</li>
  </ul>
</div>

<div class="o-card" style="width: 18rem;">
  <div class="o-card-header">En vedette</div>
  <ul class="o-list-group o-list-group-flush">
    <li class="o-list-group-item">Élément 1</li>
    <li class="o-list-group-item">Élément 2</li>
    <li class="o-list-group-item">Élément 3</li>
  </ul>
</div>

<div class="o-card" style="width: 18rem;">
  <ul class="o-list-group o-list-group-flush">
    <li class="o-list-group-item">Élément 1</li>
    <li class="o-list-group-item">Élément 2</li>
    <li class="o-list-group-item">Élément 3</li>
  </ul>
  <div class="o-card-footer">Pied de page de la carte</div>
</div>

Évier de cuisine

Combinez plusieurs types de contenu pour créer la carte dont vous avez besoin, ou intégrez-y tout. Vous trouverez ci-dessous des styles d'image, des blocs, des styles de texte et un groupe de listes, le tout dans une carte à largeur fixe.

Titre

Texte descriptif

• Élément 1
• Élément 2
• Élément 3

Lien de la carte Un autre lien

<div class="o-card" style="width: 18rem;">
<img src="..." class="o-card-img-top" alt="...">
<div class="o-card-body">
  <h4 class="o-card-title">Titre</h4>
  <p class="o-card-text">Texte descriptif</p>
</div>
<ul class="o-list-group o-list-group-flush">
  <li class="o-list-group-item">Élément 1</li>
  <li class="o-list-group-item">Élément 2</li>
  <li class="o-list-group-item">Élément 3</li>
</ul>
<div class="o-card-body">
  <a class="o-card-link">Lien de la carte</a>
  <a class="o-card-link">Un autre lien</a>
</div>
</div>

Carte avec en-tête et pied

Ajoutez un en-tête et/ou un pied de page facultatif dans une carte.

<div class="o-card">
  <div class="o-card-header">En-tête</div>
  <div class="o-card-body">Contenu</div>
  <div class="o-card-footer">Pied</div>
</div>

Carte avec overlay

Combinez .o-card-bg-image (fond image) et .o-card-img-overlay pour superposer du texte ou des boutons sur l’image.

<div class="o-card o-card-bg-image" style="background-image:url('...')">
  <div class="o-card-img-overlay">Overlay</div>
</div>

Tailles de carte

Les classes .o-card-phone et .o-card-laptop adaptent padding et typographie pour obtenir des cartes plus compactes ou plus généreuses.

<div class="o-card o-card-phone">…</div>
<div class="o-card">…</div>
<div class="o-card o-card-laptop">…</div>

Variantes colorées

Changez le fond et la couleur du texte avec .o-card-primary, .o-card-success, .o-card-warning, .o-card-danger, .o-card-info, etc.

<div class="o-card o-text-bg-primary">…</div>
<div class="o-card o-text-bg-success">…</div>
<div class="o-card o-text-bg-danger">…</div>

Variantes outline

Utilisez .o-card-outline-primary, .o-card-outline-secondary, etc. pour un look épuré avec bordure colorée et fond transparent.

<div class="o-card o-card-outline-primary">…</div>
<div class="o-card o-card-outline-success">…</div>
<div class="o-card o-card-outline-danger">…</div>

Effets au survol

Ajoutez .o-card-hover pour une légère élévation au survol, ou .o-card-hover-primary pour une ombre colorée.

<div class="o-card o-card-hover">…</div>
<div class="o-card o-card-hover-primary">…</div>

Layout horizontal

Avec .o-card-horizontal, image et corps s’affichent côte à côte, idéal pour vues en ligne.

Horizontal

Ceci est une carte horizontale avec une image à gauche et du contenu textuel à droite. Vous pouvez y placer une description plus longue, des informations détaillées ou même des boutons d’action selon vos besoins. Ce layout est idéal pour présenter des profils, des articles ou des produits de façon compacte et élégante.

<div class="o-card o-card-horizontal">
  <img src="..." class="o-card-img-top">
  <div class="o-card-body">…</div>
</div>

Groupe de cartes

La classe .o-card-group aligne plusieurs cartes sans espace entre elles pour un rendu de bloc unifié.

<div class="o-card-group">
  <div class="o-card">…</div>
  <div class="o-card">…</div>
</div>

Deck de cartes

.o-card-deck répartit les cartes sur toute la largeur, avec marges automatiques et alignement uniforme.

<div class="o-card-deck">
  <div class="o-card">…</div>
  <div class="o-card">…</div>
</div>

Badge sur carte

Placez un .o-card-badge dans une carte pour indiquer une étiquette (nouveau, promo…) positionnée en haut à droite.

Nouveau

Carte Badge

Description de la carte avec badge.

<div class="o-card" style="width: 18rem;">
  <span class="o-card-badge">Nouveau</span>
  <div class="o-card-body">
    <h4 class="o-card-title">Titre</h4>
    <p class="o-card-text">Texte descriptif</p>
  </div>
</div>

Actions

Utilisez .o-card-actions pour aligner plusieurs boutons ou liens dans le pied de carte.

Nouveau

Actions de carte

Voulez-vous continuer ?

Oui Non

<div class="o-card" style="width: 18rem;">
  <span class="o-card-badge">Nouveau</span>
  <div class="o-card-body">
    <h4 class="o-card-title">Titre</h4>
    <p class="o-card-text">Texte descriptif</p>
  </div>
  <div class="o-card-actions">
    <button class="o-btn o-btn-primary">Oui</button>
    <button class="o-btn o-btn-secondary">Non</button>
  </div>
</div>

États & utilitaires

Gérez l’état de la carte avec : .o-card-disabled (opacité, pointeur désactivé), .o-card-loading (animation de chargement), .o-card-no-shadow (sans ombre).

<div class="o-card o-card-disabled">…</div>
<div class="o-card o-card-loading">…</div>
<div class="o-card o-card-no-shadow">…</div>