Card

A flexible container for grouping related content and actions.

Interactive Configurator

Dynamic Card

Interactive Demo

This card is interactive. Use the controls below to update its state. Prism cards are built with flexibility in mind.

<prism-card 
  header="Dynamic Card" 
  subheader="Interactive Demo"
  class="">
  
  <!-- Image content here -->
  <img src="..." alt="..."/>

  <p>Content...</p>
  
  <!-- Footer content here -->
  <div class="actions">...</div>
</prism-card>

Simple Card

This is a simple card with just a header and some text content. It uses the default styling.

<prism-card header="Simple Card">
  <p>This is a simple card with just a header and some text content.</p>
</prism-card>

Rich Media

Destination: Mars

Explore the red planet like never before. Book your ticket to the stars today.

$499

<prism-card>
  <!-- Custom Image Slot -->
  <div class="rounded-t-xl overflow-hidden -mx-6 -mt-6 mb-4">
      <img src="..." alt="Cover" class="w-full h-48 object-cover">
  </div>
  
  <h3 class="text-lg font-bold mb-1">Destination: Mars</h3>
  <p class="text-sm text-muted mb-4">Explore the red planet like never before.</p>

  <div class="flex items-center justify-between mt-4 main-content">
    <span class="text-2xl font-bold">$499</span>
    <prism-button label="Book Now" icon="rocket-line"></prism-button>
  </div>
</prism-card>

PrismCardComponent APINameTypeDefaultDescription
headerstringundefinedTitle text to display in the card header.
subheaderstringundefinedSubtitle text to display below the header.
borderedbooleantrueWhether to show the card border.
hoverablebooleanfalseWhether to apply hover lift effect (simplified input).

Name	Type	Default	Description
`header`	`string`	`undefined`	Title text to display in the card header.
`subheader`	`string`	`undefined`	Subtitle text to display below the header.
`bordered`	`boolean`	`true`	Whether to show the card border.
`hoverable`	`boolean`	`false`	Whether to apply hover lift effect (simplified input).