Polarity Integration Component Library

Card Component

A collapsible content container with an optional title bar, prefix/suffix icons, and expand/collapse functionality.

Installation

npm install @polarityio/pi-card

Peer Dependencies

• lit ^3.0.0

Usage

import '@polarityio/pi-card';

Basic Card

<pi-card card-title="Summary">
  <p>Card content goes here.</p>
</pi-card>

Collapsible Card with Icons

import { html } from 'lit';
import { faShieldHalved } from '@fortawesome/free-solid-svg-icons';

html`
  <pi-card card-title="Details" collapsible .prefixIcon=${faShieldHalved}>
    <p>This content can be expanded or collapsed.</p>
  </pi-card>
`;

Custom Title Slot

<pi-card collapsible>
  <span slot="title"> <strong>Custom</strong> title content </span>
  <p>Card body content.</p>
</pi-card>

API Reference

Properties

| Property | Type | Default | Description | | ------------- | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------- | | cardTitle | string | '' | Plain string title displayed in the title bar. Set via card-title attribute. | | prefixIcon | IconDefinition \| undefined | undefined | FontAwesome icon displayed before the title text. | | suffixIcon | IconDefinition \| undefined | undefined | FontAwesome icon displayed after the title text. | | collapsible | boolean | false | Whether the card can be expanded/collapsed by clicking the title bar. | | expanded | boolean | true | Whether the card content is visible. Only meaningful when collapsible is true. Reflected to attribute. |

Events

| Event Name | Detail | Description | | ---------------- | ----------------------- | ------------------------------------------------------------------------------------------ | | pi-card-toggle | { expanded: boolean } | Fired when the card is expanded or collapsed by user interaction. Bubbles and is composed. |

Slots

| Slot Name | Description | | ----------- | ------------------------------------------------------------------- | | (default) | Card body content. | | title | Custom title content. Takes priority over the cardTitle property. |

CSS Custom Properties

| Property | Default | Description | | ----------------------------- | ----------------------------------------------------- | ---------------------- | | --pi-card-background | var(--pi-color-background-container-base, #2c3240) | Card background color. | | --pi-card-border-radius | var(--pi-size-radius-lg, 8px) | Card border radius. | | --pi-card-title-padding | var(--pi-size-spacing-sm) var(--pi-size-spacing-md) | Title bar padding. | | --pi-card-title-line-height | 1rem | Title bar line height. | | --pi-card-icon-size | 0.85em | Title icon size. | | --pi-card-icon-color | currentColor | Title icon color. |

Accessibility

• Title bar has role="button" when collapsible.
• Supports tabindex="0" for keyboard focus when collapsible.
• aria-expanded reflects the expanded state.
• Responds to Enter and Space key presses.

Theming

Customize the appearance using CSS custom properties. This component uses design tokens from @polarityio/pi-shared for consistent theming across the component library.

License

MIT