BeeCard

Un conteneur pour regrouper un contenu : coins arrondis, bordure discrète, fond de surface, et une élévation optionnelle.

import { BeeCard } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Utilisation

Placez n'importe quel contenu dans le slot par défaut. Le padding par défaut est md.

Atelier d'écriture

Un jeudi sur deux, de 18h à 20h, à la médiathèque.

<script setup lang="ts">
import { BeeCard } from "@thaisrr/beedesign";
</script>

<template>
  <BeeCard>
    <strong>Atelier d'écriture</strong>
    <p class="text">Un jeudi sur deux, de 18h à 20h, à la médiathèque.</p>
  </BeeCard>
</template>

<style scoped>
.text {
  margin: 0.5rem 0 0;
  color: var(--bd-color-text-muted);
}
</style>

Élévation

La prop elevation ajoute une ombre, de 0 (aucune, par défaut) à 3. En mode sombre, les ombres sont plus profondes pour rester visibles.

Avec un nombre, utilisez la syntaxe :elevation="2" (avec les deux-points), sinon la valeur est lue comme du texte.

Élévation 0

Élévation 1

Élévation 2

Élévation 3

<script setup lang="ts">
import { BeeCard } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeCard :elevation="0">Élévation 0</BeeCard>
    <BeeCard :elevation="1">Élévation 1</BeeCard>
    <BeeCard :elevation="2">Élévation 2</BeeCard>
    <BeeCard :elevation="3">Élévation 3</BeeCard>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
</style>

Padding

La prop padding règle l'espace intérieur. Utilisez none quand le contenu doit toucher les bords, par exemple une image.

none

sm

md (défaut)

lg

<script setup lang="ts">
import { BeeCard } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeCard padding="none">none</BeeCard>
    <BeeCard padding="sm">sm</BeeCard>
    <BeeCard padding="md">md (défaut)</BeeCard>
    <BeeCard padding="lg">lg</BeeCard>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}
</style>

Avec des actions

Une carte se combine avec les autres composants de la librairie.

Supprimer ce brouillon ?

Le texte sera définitivement perdu. Cette action est irréversible.

<script setup lang="ts">
import { BeeButton, BeeCard } from "@thaisrr/beedesign";
</script>

<template>
  <BeeCard :elevation="2" class="card">
    <h3 class="title">Supprimer ce brouillon ?</h3>
    <p class="text">Le texte sera définitivement perdu. Cette action est irréversible.</p>
    <div class="actions">
      <BeeButton variant="ghost">Annuler</BeeButton>
      <BeeButton>Supprimer</BeeButton>
    </div>
  </BeeCard>
</template>

<style scoped>
.card {
  max-width: 24rem;
}

.title {
  margin: 0;
  font-size: 1.125rem;
}

.text {
  margin: 0.5rem 0 1.25rem;
  color: var(--bd-color-text-muted);
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
</style>

API

Props

Nom	Type	Défaut	Description
elevation	0 | 1 | 2 | 3	0	Niveau d'ombre portée.
padding	"none" | "sm" | "md" | "lg"	"md"	Espace intérieur.

Slots

Nom	Description
default	Contenu de la carte.

Variables CSS utilisées

--bd-color-surface, --bd-color-border, --bd-color-text, --bd-font-main, --bd-radius-md, --bd-space-md, --bd-space-lg, --bd-shadow-1, --bd-shadow-2, --bd-shadow-3, --bd-border-width.