Card ​

The VCard component is a container for displaying content in a card-like format.

Usage ​

Basic Usage ​

To use the VCard component, simply wrap your content in the VCard element:

With Title ​

To add a title to your VCard, use the title prop:

Header and Footer ​

You can add a header and footer to your VCard by using the title prop for the header and the footer slot for the footer:

Hide Header and Footer ​

To hide the header or footer of your VCard, use the hide-header or hide-footer props, respectively:

Colors ​

• prop: color
• type: string
• default: default
• required: false

You can apply different colors to your VCard using the color prop. It can take one of the following values: default, primary, secondary, info, warning, success, or error. The default value is default.

Bordered ​

You can add a border style to your VCard by using the bordered prop and use border-position prop to change the border position.

Shadow ​

• prop: shadow
• type: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none'
• default: none
• required: false

You can add a shadow to your VCard by using the shadow prop. It can take one of the following values: sm, md, lg, xl, 2xl, inner, none. The default value is none.

Bodyless ​

Bodyless card allows you to create declarative card with sub components like VCardHeader, VCardBody and VCardFooter.

Props ​

Events ​

None

Slots ​

Default ​

The default slot is the main content area of the VCard. It is where you can place your card body content.

<template>
  <VCard>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

<template>
  <VCard>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

Header ​

The header slot is used to add a header to the VCard. It can contain any content you want to display in the header.

<template>
  <VCard>
    <!-- header slot -->
    <template #header>
      <h2>Card Header</h2>
    </template>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

<template>
  <VCard>
    <!-- header slot -->
    <template #header>
      <h2>Card Header</h2>
    </template>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

header.append ​

The header.append slot is used to add content to the end of the header slot. It can be used to add buttons or other elements to the header.

<template>
  <VCard title="Header">
    <!-- header.append slot -->
    <template #header.append>
      <VBtn>Action</VBtn>
    </template>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

<template>
  <VCard title="Header">
    <!-- header.append slot -->
    <template #header.append>
      <VBtn>Action</VBtn>
    </template>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

header.prepend ​

The header.prepend slot is used to add content to the beginning of the header slot. It can be used to add icons or other elements to the header.

<template>
  <VCard title="Header">
    <!-- header.prepend slot -->
    <template #header.prepend>
      <VBtn>Action</VBtn>
    </template>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

<template>
  <VCard title="Header">
    <!-- header.prepend slot -->
    <template #header.prepend>
      <VBtn>Action</VBtn>
    </template>
    <!-- default slot -->
    <p>Hello World</p>
  </VCard>
</template>

Footer ​

The footer slot is used to add a footer to the VCard. It can contain any content you want to display in the footer.

<template>
  <VCard>
    <!-- default slot -->
    <p>Hello World</p>
    <!-- footer slot -->
    <template #footer>
      <h4>Card Footer</h4>
    </template>
  </VCard>
</template>

<template>
  <VCard>
    <!-- default slot -->
    <p>Hello World</p>
    <!-- footer slot -->
    <template #footer>
      <h4>Card Footer</h4>
    </template>
  </VCard>
</template>

CSS Variables ​

:root {
  --card-bg-color: var(--color-white);
  --card-color: var(--color-gray-700);
  --card-border-style: solid;
  --card-border-width: 1px;
  --card-border-color: var(--color-gray-200);
  --card-border-radius: var(--border-radius-lg);
  --card-padding-x: var(--size-spacing-4);
  --card-padding-y: var(--size-spacing-3);
  --card-box-shadow: var(--effect-shadow-sm);
  --card-font-size: var(--size-font-sm);
}

:root {
  --card-bg-color: var(--color-white);
  --card-color: var(--color-gray-700);
  --card-border-style: solid;
  --card-border-width: 1px;
  --card-border-color: var(--color-gray-200);
  --card-border-radius: var(--border-radius-lg);
  --card-padding-x: var(--size-spacing-4);
  --card-padding-y: var(--size-spacing-3);
  --card-box-shadow: var(--effect-shadow-sm);
  --card-font-size: var(--size-font-sm);
}

Customization ​

The VCard component can be customized using CSS variables and the theme function provided by Tailwind CSS. This allows you to create your own custom card styles.

To customize the VCard, you can define your own CSS class and set the desired CSS variables in it. For example, to create an indigo colored card with white text, you can do the following:

<template>
  <VCard color="indigo"> Indigo Colored Card </VCard>
</template>

<style>
.card-indigo {
  --card-bg-color: theme('colors.indigo.500');
  --card-color: theme('colors.white');
}
</style>

<template>
  <VCard color="indigo"> Indigo Colored Card </VCard>
</template>

<style>
.card-indigo {
  --card-bg-color: theme('colors.indigo.500');
  --card-color: theme('colors.white');
}
</style>

Standalone Installation ​

You can also install the Card component individually via @morpheme/card package:

yarn install @morpheme/card

yarn install @morpheme/card

<script setup lang="ts">
import VCard from "@morpheme/card";
</script>

<template>
  <VCard> Hello World </VCard>
</template>

<script setup lang="ts">
import VCard from "@morpheme/card";
</script>

<template>
  <VCard> Hello World </VCard>
</template>

Tailwind Plugin ​

This package comes with custom tailwind plugin for styling. If you are installing this package separately from @morpheme/ui package, you need to include the plugin in plugins section in your Tailwind config file.

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/card')],
};

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/card')],
};

Storybook ​

View Storybook documentation here.