Usage

Default

Use the default slot to set the text of the component.

Colors

Use the color prop to customize the component's color.

Variants

Use the variant prop to customize the component's appearance.

Sizes

Use the type prop to customize the component's size.

Rounded

Use the border-radius prop to customize the border radius.

States

Active

The active state can be set via the active prop.

<script setup lang="ts">
import { CLCard, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLCard :color="CLColors.Neutral" title="This card is active" width='250px' active>It has a drop shadow to indicate it is active.</CLCard>
</template>

Busy

The busy state can be set via the busy prop.

<script setup lang="ts">
import { CLCard, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLCard :color="CLColors.Neutral" title="This is the card title" width='250px' busy>The card's content</CLCard>
</template>

Props