BeeCard

A container to group content: rounded corners, a subtle border, a surface background, and an optional elevation.

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

Usage

Put any content in the default slot. The default padding is md.

Writing workshop

Every other Thursday, 6 to 8 pm, at the library.

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

<template>
  <BeeCard>
    <strong>Writing workshop</strong>
    <p class="text">Every other Thursday, 6 to 8 pm, at the library.</p>
  </BeeCard>
</template>

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

Elevation

The elevation prop adds a shadow, from 0 (none, the default) to 3. In dark mode, shadows are deeper so they stay visible.

With a number, use the :elevation="2" syntax (with the colon), otherwise the value is read as text.

Elevation 0

Elevation 1

Elevation 2

Elevation 3

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

<template>
  <div class="row">
    <BeeCard :elevation="0">Elevation 0</BeeCard>
    <BeeCard :elevation="1">Elevation 1</BeeCard>
    <BeeCard :elevation="2">Elevation 2</BeeCard>
    <BeeCard :elevation="3">Elevation 3</BeeCard>
  </div>
</template>

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

Padding

The padding prop sets the inner spacing. Use none when the content must touch the edges, for example an image.

none

sm

md (default)

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 (default)</BeeCard>
    <BeeCard padding="lg">lg</BeeCard>
  </div>
</template>

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

With actions

A card combines well with the other components of the library.

Delete this draft?

The text will be permanently lost. This action cannot be undone.

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

<template>
  <BeeCard :elevation="2" class="card">
    <h3 class="title">Delete this draft?</h3>
    <p class="text">The text will be permanently lost. This action cannot be undone.</p>
    <div class="actions">
      <BeeButton variant="ghost">Cancel</BeeButton>
      <BeeButton>Delete</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

Name	Type	Default	Description
elevation	0 | 1 | 2 | 3	0	Drop shadow level.
padding	"none" | "sm" | "md" | "lg"	"md"	Inner spacing.

Slots

Name	Description
default	Content of the card.

CSS variables used

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