Components

Card

Group related content on a contained surface.

Import

import { Card } from "@dr-max/ui/card"

The entry carries its own precompiled CSS — no extra style imports needed.

Usage

Fast delivery to your pharmacy of choice.

<script setup lang="ts">
import { Card } from "@dr-max/ui/card"
import { Text } from "@dr-max/ui/text"
</script>

<template>
  <Card>
    <Text>Fast delivery to your pharmacy of choice.</Text>
  </Card>
</template>

Colors

Light card

Dark card

<template>
  <Card color="light">
    <Text>Light card</Text>
  </Card>
  <Card color="dark">
    <Text>Dark card</Text>
  </Card>
</template>

Shadow

There is no drop shadow unless shadow is set:

Extra small shadow

Small shadow

<template>
  <Card shadow="xs">
    <Text>Extra small shadow</Text>
  </Card>
  <Card shadow="sm">
    <Text>Small shadow</Text>
  </Card>
</template>

Playground

Fast delivery to your pharmacy of choice.

slot

color

shadow

class

<script setup lang="ts">
import { Card } from '@dr-max/ui/card'
</script>

<template>
  <Card color="light" class="w-72">Fast delivery to your pharmacy of choice.</Card>
</template>