@synapse-ui/card

Angular card container with four visual variants, configurable padding, hover lift, and accent border support.

Installation

npm install @synapse-ui/card

Usage

import { Card } from '@synapse-ui/card';

@Component({
  imports: [Card],
  template: `
    <synapse-card variant="elevated" padding="lg" [hoverable]="true">
      <h3>Card title</h3>
      <p>Card content goes here.</p>
    </synapse-card>
  `,
})
export class MyComponent {}

Inputs

| Input | Type | Default | Description | | ----------- | -------------------------------------------------- | ----------- | ------------------------------------------ | | variant | 'default' \| 'elevated' \| 'outlined' \| 'ghost' | 'default' | Visual style | | padding | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' | Inner padding | | hoverable | boolean | false | Adds lift + shadow on hover | | accent | boolean | false | Adds a highlighted left-edge accent border |

Running unit tests

Run nx test card to execute the unit tests.