🃏 Cartes Orochi

Les cartes Orochi sont des conteneurs flexibles pour organiser et présenter du contenu, avec de nombreuses variantes et options adaptées au framework Orochi.

À propos

Conçues pour une présentation élégante et responsive, les cartes Orochi facilitent l’organisation de textes, images, actions et informations. Leurs nombreuses variantes permettent d’adapter facilement leur apparence et leur structure à vos besoins, tout en assurant une cohérence visuelle avec votre interface.

Type de contenu

Les cartes servent à afficher du contenu de manière structurée : images, titres, textes, boutons, listes, etc. Elles s’utilisent pour mettre en valeur des informations de façon claire et esthétique.

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.

Il s'agit d'un texte dans le corps d'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.

Titre de la carte
Sous-titre de la carte

Voici un exemple de texte concis pour illustrer le contenu principal de la carte et compléter son titre.

Lien de la carte Un autre lien 
<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-title">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.

Image en haut

Titre

Texte descriptif

<div class="o-card" style="width: 18rem;">
  <div class="o-card-body">
    <img src="..." class="o-card-img-top" alt="...">
    <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

Image en bas 
<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.

  • Élément 1
  • Élément 2
  • Élément 3
<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>
En vedette
  • Élément 1
  • Élément 2
  • Élément 3
<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>
  • Élément 1
  • Élément 2
  • Élément 3
Pied de page 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 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.

Image en haut

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 overlay

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

Overlay

Texte sur 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-sm et .o-card-lg adaptent padding et typographie pour obtenir des cartes plus compactes ou plus généreuses.

Petite

Compacte.

Standard
Grande

Spacieuse.

<div class="o-card o-card-sm">…</div>
<div class="o-card">…</div>
<div class="o-card o-card-lg">…</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.

En-tête
Titre de la carte principale

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte secondaire

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte de réussite

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte Danger

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte d'avertissement

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte d'information

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte lumineuse

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

En-tête
Titre de la carte sombre

Quelques exemples de textes concis pour enrichir le titre de la carte et fournir le contenu principal..

<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.

Outline Primaire
Outline Succès
Outline Danger
<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.

Standard
Coloré
<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é.

Carte 1
Carte 2
Carte 3
<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.

Deck 1
Deck 2
Deck 3
<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 ?

<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).

Carte désactivée

Carte en chargement…

Carte 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>