@kit-ng-ui/card

Generic content container with header, cover, body, and actions for Kit UI. Mirrors ant-design's Card.

Install

pnpm add @kit-ng-ui/card @kit-ng-ui/core

Styles

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/card/styles' as card;

Use

import { Component } from '@angular/core';
import { KitCardComponent, KitCardMetaComponent, KitCardGridComponent } from '@kit-ng-ui/card';

@Component({
  standalone: true,
  imports: [KitCardComponent, KitCardMetaComponent, KitCardGridComponent],
  template: `
    <!-- Basic -->
    <kit-card title="Card title">
      <p>Card content</p>
    </kit-card>

    <!-- With slots -->
    <kit-card
      [titleTpl]="titleRef"
      [extraTpl]="extraRef"
      [coverTpl]="coverRef"
      [footerTpl]="footerRef"
      [actionsTpl]="actionsRef"
      hoverable
    >
      <kit-card-meta title="Europe Street beat" description="www.instagram.com" />
    </kit-card>

    <!-- Collapsible: click the title bar to toggle the body -->
    <kit-card title="Show details" collapsible [(collapsed)]="collapsed">
      <p>Hidden until expanded.</p>
    </kit-card>

    <ng-template #coverRef><img src="/cover.png" alt="" /></ng-template>
    <ng-template #titleRef>Custom <b>title</b></ng-template>
    <ng-template #extraRef><a href="#">More</a></ng-template>
    <ng-template #footerRef>
      <details><summary>Show code</summary><pre><code>…</code></pre></details>
    </ng-template>
    <ng-template #actionsRef>
      <li><button>Edit</button></li>
      <li><button>Delete</button></li>
    </ng-template>

    <!-- Grid mode -->
    <kit-card title="Grid card">
      <kit-card-grid>Item 1</kit-card-grid>
      <kit-card-grid>Item 2</kit-card-grid>
      <kit-card-grid>Item 3</kit-card-grid>
    </kit-card>
  `,
})
export class Demo {}

API

<kit-card>

| Input | Type | Default | Description | | ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------------------------------ | | actionsTpl | TemplateRef \| null | null | Footer action row. Project one <li> per action inside the template. | | bordered | boolean | true | When variant='outlined', controls the outline border. | | collapsed | boolean (model) | false | Two-way bindable collapse state. Hides body / footer / actions when true. | | collapsible | boolean | false | Turns the title bar into a button that toggles [collapsed] on click. | | coverTpl | TemplateRef \| null | null | Media rendered above the body, edge-to-edge. | | extraTpl | TemplateRef \| null | null | Right-aligned slot in the header. | | footerTpl | TemplateRef \| null | null | Footer slot rendered below the body and above [actionsTpl]. | | grid | boolean | false | Opt-in: lay out direct <kit-card-grid> children as a uniform sub-grid. | | hoverable | boolean | false | Adds a hover-lift state (shadow + cursor). | | loading | boolean | false | Replaces the body with a shimmer skeleton and sets aria-busy. | | size | 'default' \| 'small' | 'default' | Tightens header / body padding when 'small'. | | skeletonTpl | TemplateRef \| null | null | Custom skeleton template used when loading is true. | | title | string \| null | null | Title text. Ignored when [titleTpl] is set. | | titleTpl | TemplateRef \| null | null | Title template. Overrides [title]. | | variant | 'outlined' \| 'borderless' | 'outlined' | 'borderless' swaps the border for a soft elevation shadow. |

<kit-card-meta>

| Input | Type | Default | Description | | ---------------- | --------------------- | ------- | ------------------------------------------------------------------------------------ | | avatarTpl | TemplateRef \| null | null | Avatar template. Takes precedence over the projected [avatar] slot. | | description | string \| null | null | Description text. Ignored when [descriptionTpl] is set. | | descriptionTpl | TemplateRef \| null | null | Description template. | | title | string \| null | null | Title text. Ignored when [titleTpl] is set. | | titleTpl | TemplateRef \| null | null | Title template. |

Project an avatar by attribute selector: <kit-avatar avatar /> or <span avatar>A</span>. Use [avatarTpl] instead when you want to generate the avatar markup outside the meta tag.

<kit-card-grid>

No inputs. Cells distribute equally across --kit-card-grid-columns (default 4). Override via CSS on the card body when needed.

Behavior notes

• Header collapses when empty. If [title], [titleTpl], [extraTpl], and [collapsible] are all unset/false, the header is not rendered.
• Collapsible cards render the title as a <button> with aria-expanded / aria-controls. Only the title button is clickable — the extra slot stays independently interactive, so links/buttons there don't toggle the body. The cover (if any) remains visible while collapsed.
• Footer vs. actions. [footerTpl] is a freeform slot for body-adjacent content (summary stats, "Show code" reveals, etc.). [actionsTpl] is the equal-width row of icon actions at the bottom. Both hide when collapsed.
• Cover is edge-to-edge. Images inside [coverTpl] get width: 100%; height: auto. Wrap in a fixed-aspect-ratio container if you need a uniform card grid.
• Grid mode is opt-in: the body switches to a CSS grid only when <kit-card-grid> children are detected via :has(). If you target browsers that lack :has() (Firefox < 121), declare the grid manually with a wrapper.
• Hoverable cards are visual only — they do not receive focus or keyboard activation. Wrap the card in an <a> or <button> if you need it to be interactive.