Card

The Card component provides a flexible container for grouping related content and actions.

Import

<script>
  import { Card } from 'svelte-fluentui';
</script>
svelte

Basic Usage

<Card>
  <h3>Card Title</h3>
  <p>Card content goes here...</p>
</Card>
svelte

With Header and Footer

<Card>
  <div slot="header">
    <h3>Product Details</h3>
  </div>

  <p>Product description and information.</p>

  <div slot="footer">
    <Button>Add to Cart</Button>
  </div>
</Card>
svelte

Elevated Card

<Card elevated>
  <p>This card has elevation shadow.</p>
</Card>
svelte

Properties

PropertyTypeDefaultDescription
elevatedbooleanfalseAdd elevation shadow
clickablebooleanfalseMake the card clickable

Slots

SlotDescription
defaultMain card content
headerCard header content
footerCard footer content

Events

EventDescription
on:clickFired when clickable card is clicked
Last update at: Invalid Date