Card Component

A flexible container for content with header, content, and footer sections. Supports collapsible state.

Basic Usage

<uCard>
  <uCardHeader>
    <uCardTitle>Card Title</uCardTitle>
    <uCardDescription>Card Description</uCardDescription>
  </uCardHeader>
  <uCardContent>
    <p>Card content goes here.</p>
  </uCardContent>
  <uCardFooter>
    <uButton variant="outline">Action</uButton>
  </uCardFooter>
</uCard>

Collapsible Card

Cards can be made toggleable, allowing users to collapse and expand them.

<uCard [toggleable]="true" [(collapsed)]="isCollapsed">
  <uCardHeader>
    <uCardTitle>Toggleable Card</uCardTitle>
  </uCardHeader>
  <uCardContent>
    This content can be hidden.
  </uCardContent>
</uCard>

API Reference

uCard

Property	Type	Default	Description
`toggleable`	`boolean`	`false`	Whether the card can be collapsed
`collapsed`	`boolean`	`false`	The current collapse state

uCardContent

Property	Type	Default	Description
`maxHeight`	`string`	`undefined`	Optional height constraint for scrollable content

Sub-components

uCardHeader: Container for title, description and actions
uCardTitle: Main heading for the card
uCardDescription: Supporting text for the title
uCardContent: Main body of the card
uCardFooter: Bottom section for actions or meta info