Usage
Default
Use the default slot to set the text of the component.
vue
Colors
Use the color prop to customize the component's color.
vue
Variants
Use the variant prop to customize the component's appearance.
vue
Sizes
Use the type prop to customize the component's size.
vue
Rounded
Use the border-radius prop to customize the border radius.
vue
States
Active
The active state can be set via the active prop.
vue
<script setup lang="ts">
import CLCard from '@codeandfunction/callaloo/CLCard';
import { 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.
vue
<script setup lang="ts">
import CLCard from '@codeandfunction/callaloo/CLCard';
import { 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>