Skip to content
On this page

Card

Base card container

Usage

Basic Usage

While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
preview
vue
<template>
  <p-card>
    While here you will see the content of cards, everything goes here.
    If you need custom cards, take the component which more represent to
    what you need and detach it.
  </p-card>
</template>

Card with Header

Any Title Should Here
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
Any Title Should Here
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
preview
vue
<template>
  <p-card
    title="Any Title Should Here">
    While here you will see the content of cards, everything goes here.
    If you need custom cards, take the component which more represent to
    what you need and detach it.
  </p-card>
  <p-card
    title="Any Title Should Here">
    <template #action>
      <p-button color="info" variant="link">Button Text</p-button>
    </template>
    While here you will see the content of cards, everything goes here.
    If you need custom cards, take the component which more represent to
    what you need and detach it.
  </p-card>
</template>
Any Title Should Here
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
preview
vue
<template>
  <p-card
    title="Any Title Should Here">
    While here you will see the content of cards, everything goes here.
    If you need custom cards, take the component which more represent to
    what you need and detach it.
    <template #footer>
      <p-button variant="outline" color="info">Enable Sample Button</p-button>
      <p-button variant="link" color="info">Button Text</p-button>
    </template>
  </p-card>
</template>

Sectioned

Card with Section
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
Subtitle supposedly here
Edit
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
Card with Sub-Section
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
Subtitle supposedly here
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
While here you will see the content of cards, everything goes here. If you need custom cards, take the component which more represent to what you need and detach it.
preview
vue
<template>
  <p-card
    title="Card Section"
    sectioned>
    <p-card-section>
      While here you will see the content of cards, everything goes here.
      If you need custom cards, take the component which more represent to
      what you need and detach it.
    </p-card-section>
    <p-card-section
      title="Subtitle supposedly here">
      <template #action>
        <a href="#" class="underline text-link dark:text-dark-link">Edit</a>
      </template>
      While here you will see the content of cards, everything goes here.
      If you need custom cards, take the component which more represent to
      what you need and detach it.
    </p-card-section>
  </p-card>

  <p-card
    title="Card Sub-Section"
    sectioned>
    <template #action>
      <p-button variant="link" color="info">Button Text</p-button>
    </template>
    <p-card-section>
      While here you will see the content of cards, everything goes here.
      If you need custom cards, take the component which more represent to
      what you need and detach it.
    </p-card-section>
    <p-card-section
      title="Subtitle supposedly here">
      While here you will see the content of cards, everything goes here.
      If you need custom cards, take the component which more represent to
      what you need and detach it.
      <p-card-section>
        While here you will see the content of cards, everything goes here.
        If you need custom cards, take the component which more represent to
        what you need and detach it.
      </p-card-section>
    </p-card-section>
  </p-card>
</template>

Callout

Hello and Happy New Year!
What amazing growth you achieved this year, Tarjono! You deserve every bit of it and we’re sure you’ll do even better next year. There’s a 30% membership renewal discount waiting for you when you come back.
preview
vue
<template>
  <p-card
    title="Hello and Happy New Year!"
    element="div"
    callout>
    <div class="flex items-start space-x-8">
      <div class="w-3/4">
        What amazing growth you achieved this year, Tarjono! You deserve
        every bit of it and we’re sure you’ll do even better next year.
        There’s a 30% membership renewal discount waiting for you when you come back.
        <div class="pt-8">
          <p-button variant="outline" color="secondary">Collect Discount</p-button>
          <p-button variant="link" color="info">Learn More</p-button>
        </div>
      </div>
      <div class="w-1/4">
        <img src="/assets/images/img-card-callout-01.svg">
      </div>
    </div>
  </p-card>
</template>

Variables

Card use local CSS variables on .card for enhanced real-time customization.

sass
--p-card-padding-x: theme(spacing.6);
--p-card-padding-y: theme(spacing.6);
--p-card-bg: theme(backgroundColor.default.DEFAULT);
--p-card-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
--p-card-border: theme(borderColor.default.DEFAULT);
--p-card-border-dark: theme(borderColor.default.DEFAULT);
--p-card-color: theme(textColor.default);
--p-card-color-dark: theme(textColor.dark.default);

API

Props

PropsTypeDefaultDescription
elementStringsectionCard element, valid value is div, section, and article
titleString-Card Header Title
sectionedBooleanfalseEnable Card Section
disabledBooleanfalseDisable (look-like) Card
calloutBooleanfalseEnable Callout
dismissableBooleantrueShow / Hide dismiss button

Slots

NameDescription
action Action (permalink or button) to place in Card/Card-Section Header just if header slot inactive
header Content (in the form of— permalink or button) to place in Card/Card-Section Header
footer Content (in the form of— permalink or button) to place in Card/Card-Section Footer

Events

NameArgumentsDescription
dismissed-Event when close button clicked

Released under the MIT License.