Cartes CSSeducteur

Les cartes sont des éléments essentiels dans la création d'interfaces utilisateur modernes. Avec CSSeducteur, vous pouvez créer des cartes élégantes, fonctionnelles et faciles à personnaliser pour organiser votre contenu. Découvrez ci-dessous les différents types de cartes disponibles et comment les utiliser.

Carte de base

La carte de base de CSSeducteur est idéale pour présenter des informations succinctes avec une apparence épurée. Voici un exemple :

<div class="cs-card cs-bg-white cs-p-6 cs-rounded-lg cs-shadow-md">
  <h3 class="cs-text-xl cs-font-semibold">Titre de la carte</h3>
  <p class="cs-mt-2">Le contenu de la carte va ici.</p>
</div>

<div class="cs-card cs-bg-white cs-rounded-lg cs-shadow-md cs-overflow-hidden">
  <img
    src="image-url.jpg"
    alt="Carte avec une image"
    class="cs-w-full cs-h-48 cs-object-cover"
  />
  <div class="cs-p-6">
    <h3 class="cs-text-xl cs-font-semibold">Carte avec une image</h3>
    <p class="cs-mt-2">En-tête image incluse.</p>
  </div>
</div>

Carte avec actions

Ajoutez des boutons ou des actions interactives à vos cartes grâce à CSSeducteur. Cela permet de rendre vos composants plus dynamiques et engageants.

<div class="cs-card cs-bg-white cs-rounded-lg cs-shadow-md">
  <div class="cs-p-6">
    <h3 class="cs-text-xl cs-font-semibold">Carte interactive</h3>
    <p class="cs-mt-2">Inclut des actions comme des boutons.</p>
    <div class="cs-mt-4">
      <button class="cs-btn cs-btn-primary">Action 1</button>
      <button class="cs-btn cs-btn-secondary">Action 2</button>
    </div>
  </div>
</div>

Carte avec Padding avec Csseducteur

Csseducteur est un framework qui te permet de gerer l'espacement interne des cartes avec les classes de padding avec une simplicité jamais connue viens decouvrir le framework qui changera ta vision sur le dev Csseducteur:

Utilisez les classes utilitaires de csseducteur pour ajouter un espace interne aux cartes :

<div class="cs-card cs-p-4 cs-bg-white cs-shadow-lg">
  <h3 class="cs-text-xl cs-font-bold">Titre de la Carte</h3>
  <p>Contenu de la carte avec un padding interne de 1rem.</p>
</div>

Carte avec Margin

Gérez l'espacement externe des cartes avec csseducteur avec les classes de margin :

<div class="cs-card cs-mb-6 cs-p-4 cs-bg-white cs-shadow-lg">
  <h3 class="cs-text-xl cs-font-bold">csseducteur</h3>
  <p>Carte avec une marge inférieure de 1.5rem.</p>
</div>

Carte avec Effet au Survol

Ajoutez des interactions visuelles pour rendre vos cartes plus dynamiques :

<div class="cs-card cs-p-4 cs-bg-white cs-shadow-lg cs-transition cs-hover:cs-shadow-xl cs-hover:cs-bg-gray-100">
  <h3 class="cs-text-xl cs-font-bold">Titre de la Carte</h3>
  <p>Carte avec effet d'ombre et de changement de couleur au survol.</p>
</div>

Disposition en Grille csseducteur

Organisez plusieurs cartes dans une grille réactive :

<div class="cs-grid cs-grid-cols-1 sm:cs-grid-cols-2 lg:cs-grid-cols-3 cs-gap-4">
  <div class="cs-card cs-p-4 cs-bg-white cs-shadow-lg">
    <h3 class="cs-text-xl cs-font-bold">Carte 1</h3>
    <p>Contenu de la carte 1.</p>
  </div>
  <div class="cs-card cs-p-4 cs-bg-white cs-shadow-lg csseducteur">
    <h3 class="cs-text-xl cs-font-bold">Carte 2</h3>
    <p>Contenu de la carte 2.</p>
  </div>
  <div class="cs-card cs-p-4 cs-bg-white cs-shadow-lg">
    <h3 class="cs-text-xl cs-font-bold">Carte 3</h3>
    <p>Contenu de la carte 3.</p>
  </div>
</div>

Cartes avec Flexbox

CSSeducteur facilite la mise en page des cartes grâce à ses classes utilitaires de Flexbox. Ces classes vous permettent d'organiser facilement le contenu des cartes, que ce soit pour aligner des éléments horizontalement, centrer des icônes ou ajuster la disposition pour différentes tailles d'écran.

<div class="cs-flex cs-flex-col cs-items-center cs-p-6 cs-m-4 cs-border cs-border-gray-300">
  <h3 class="cs-text-lg cs-font-bold cs-mb-2">Titre de la Carte</h3>
  <p class="cs-text-sm cs-text-gray-700 cs-mb-4">Description de la carte avec un contenu aligné au centre grâce à Flexbox et CSSeducteur.</p>
  <button class="cs-bg-blue-500 cs-text-white cs-px-4 cs-py-2 cs-rounded">Action</button>
</div>

Cartes en Mode Sombre

Avec CSSeducteur, vous pouvez créer des cartes qui s'adaptent automatiquement au mode sombre. Les classes utilitaires permettent de personnaliser les couleurs en fonction du thème actif. Cela améliore l'expérience utilisateur, surtout pour les interfaces modernes.

<div class="cs-p-6 cs-m-4 cs-border cs-rounded cs-bg-gray-800 cs-text-white">
  <h3 class="cs-text-lg cs-font-bold cs-mb-2">Titre en Mode Sombre</h3>
  <p class="cs-text-sm cs-text-gray-300 cs-mb-4">Description optimisée pour le mode sombre grâce à CSSeducteur. Ces cartes offrent un excellent contraste visuel.</p>
  <button class="cs-bg-gray-700 cs-text-white cs-px-4 cs-py-2 cs-rounded hover:cs-bg-gray-600">Action</button>
</div>

<div class="cs-card cs-bg-white cs-rounded-lg cs-shadow-md cs-flex cs-items-center cs-p-6">
  <span class="cs-bg-indigo-100 cs-p-4 cs-rounded-full">
    <svg xmlns="http://www.w3.org/2000/svg" class="cs-h-6 cs-w-6 cs-text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="csseducteur-round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M12 18c4.418 0 8-1.79 8-4s-3.582-4-8-4-8 1.79-8 4 3.582 4 8 4z" />
    </svg>
  </span>
  <div class="cs-ml-4">
    <h3 class="cs-text-xl cs-font-semibold">Carte avec icône</h3>
    <p class="cs-mt-2">Description ici.</p>
  </div>
</div>