Card

A container component for displaying structured content with pixel-art borders.

?

Name	Category	Description	Type	Default
type	? Style	Card type	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
color	? Style	Custom color (hex)	string	—
shadow	? Style	When to show shadow	boolean | 'always' | 'hover' | 'never'	'always'
size	? Style	Card size	'small' | 'large'	—
outline	? Style	Outline style (solid border, transparent background)	boolean	false
dash	? Style	Dashed style (dashed border)	boolean	false
ghost	? Style	Ghost style (no border, no background)	boolean	false
hoverable	? Behavior	Whether to show hover elevation effect	boolean	false
default	? Slot	Card body content		—
header	? Slot	Card header content		—
footer	? Slot	Card footer content		—

Basic Usage

A basic card with header, body, and footer sections.

<template>
  <div class="demo-card">
    <px-card>
      <template #header>Card Header</template>
      A simple card with header, body, and footer sections.
      <template #footer>Card Footer</template>
    </px-card>

    <px-card>
      This is a card with only body content.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.demo-card .px-card {
  width: 280px;
}
</style>

Types

Use type to set the card's color theme. Available types: primary, success, info, warning, danger.

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" style="width: 180px">
      <template #header>{{ t }}</template>
      A {{ t }} card with pixel-art border and tinted background.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

Size

Use size property to set the card size. Accepts 'small' or 'large'.

<template>
  <div class="demo-card">
    <px-card size="small">
      <template #header>Small</template>
      A compact card for secondary content or dense layouts.
    </px-card>

    <px-card>
      <template #header>Default</template>
      A standard card with the default size.
    </px-card>

    <px-card size="large">
      <template #header>Large</template>
      A spacious card for featured or prominent content.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.demo-card .px-card {
  width: 260px;
}
</style>

Shadow

Use shadow property to control when the shadow is displayed. Accepts 'always', 'hover', or 'never'.

<template>
  <div class="demo-card">
    <px-card shadow="hover">
      <template #header>Hover</template>
      Shadow appears on hover.
    </px-card>

    <px-card shadow="never">
      <template #header>Never</template>
      No shadow is displayed.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.demo-card .px-card {
  width: 220px;
}
</style>

Hoverable

Use hoverable property to add an elevation effect on hover.

<template>
  <div class="demo-card">
    <px-card hoverable>
      <template #header>Hoverable Card</template>
      Hover over this card to see the elevation effect.
    </px-card>

    <px-card hoverable>
      <template #header>Another Hoverable</template>
      Click and release to see the active state.
    </px-card>
  </div>
</template>

<style scoped>
.demo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.demo-card .px-card {
  width: 280px;
}
</style>

Outline

Use outline for a solid-border style with transparent background.

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" outline style="width: 180px">
      <template #header>{{ t }}</template>
      Outline style with colored border and transparent background.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

Dash

Use dash for a dashed-border style.

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" dash style="width: 180px">
      <template #header>{{ t }}</template>
      Dashed border with tinted background.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

Ghost

Use ghost to remove borders and background, showing only colored text.

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card v-for="t in types" :key="t" :type="t" ghost style="width: 180px">
      <template #header>{{ t }}</template>
      Ghost style — no border, no background, just colored text.
    </px-card>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

Custom Color

Use the color prop with a hex value to create custom-colored cards in any variant.

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <px-card color="#8B5CF6" style="width: 180px">
      <template #header>Default</template>
      Custom purple color with filled background.
    </px-card>
    <px-card color="#8B5CF6" outline style="width: 180px">
      <template #header>Outline</template>
      Custom purple with outline style.
    </px-card>
    <px-card color="#8B5CF6" dash style="width: 180px">
      <template #header>Dash</template>
      Custom purple with dashed border.
    </px-card>
    <px-card color="#8B5CF6" ghost style="width: 180px">
      <template #header>Ghost</template>
      Custom purple ghost style.
    </px-card>
  </div>
</template>