Card

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

Examples

Shadow

Add or remove shadow using shadow property

Code

<script setup lang="ts">
import { BaseCard } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseCard" :shadow="true">
    <template #header>With Shadow</template>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </component>

  <component :is="BaseCard">
    <template #header>Without Shadow</template>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </component>
</template>

Shape

The Card Component can have 2 kind of shape rounded or sharp

Code

<script setup lang="ts">
import { BaseCard } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseCard" shape="rounded">
    <template #header>Rounded</template>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </component>

  <component :is="BaseCard">
    <template #header>Sharp</template>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </component>
</template>

Color

Modify default background or text color

Code

<script setup lang="ts">
import { BaseCard } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseCard" bg-color="#0000FF" title-color="white" body-color="white">
    <template #header>Blue</template>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </component>

  <component :is="BaseCard" bg-color="red" title-color="white" body-color="white">
    <template #header>Red</template>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </component>
</template>

Card API

Props

Name	Type	Default	Description
shadow	boolean	false	Card Shadow.
shape	rounded sharp	sharp	Card Shape.
bgColor	string		Card Background Color.
titleColor	string		Card Title Text Color.
bodyColor	string		Card Body Text Color.

Slot

#header slot for rendering card header

#default slot for rendering card body