Card

Simple container for grouping content with optional title, header, and trailing slots.

<script setup lang="ts">
import RyderCard from "@opeolluwa/ryder/components/primitives/Card.vue"
</script>

<template>
  <RyderCard title="Title">
    Content here
  </RyderCard>
</template>

Examples

<script setup lang="ts">
import Card from "../../../src/components/primitives/Card.vue";
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <Card title="Simple Card">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        This is the card content.
      </p>
    </Card>
    <Card>
      <template #header>
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold">Custom Header</span>
        </div>
      </template>
      <p class="text-sm text-gray-600 dark:text-gray-400">
        With custom header slot.
      </p>
      <template #trailing>
        <span class="text-xs text-gray-500">v1.0.0</span>
      </template>
    </Card>
  </div>
</template>

Props

Prop	Type	Default	Description
title	string	undefined	Optional card title displayed in header.

Emits

None.

Slots

Slot	Props	Content
header	—	Overrides default header (title area).
trailing	—	Content placed on right side of header.
default	—	Main card content.

Notes

• Header is only rendered if title or header/trailing slots are present.
• Uses Tailwind classes for borders, background and dark mode.