Cards | Pear

PCard

PCard is a small wrapper around Pico's article pattern. Add header and footer slots when the card needs clear sections.

Basic Card

Cards render Pico article markup and inherit Pico spacing, border, background, and typography.

vue

<p-card>
  <p>
    Cards render Pico article markup and inherit Pico spacing, border,
    background, and typography.
  </p>
</p-card>

Header & Footer

Project status

Everything is ready for review.

vue

<p-card>
  <template #header>
    Project status
  </template>

  <p>Everything is ready for review.</p>

  <template #footer>
    <p-button>Review</p-button>
    <p-button variant="secondary">Archive</p-button>
  </template>
</p-card>

API

PCard has no props or custom events.

Slots

Name	Type	Default	Description
`header`	`slot`	-	Optional content rendered in the article header.
`default`	`slot`	-	Main article content.
`footer`	`slot`	-	Optional content rendered in the article footer.