Card

Flexible card container with injectable standard rendering. The <smart-card> wrapper renders CardStandardComponent by default (a neutral Tailwind placeholder with dark mode). Consumers can replace the standard with a custom variant via CARD_STANDARD_COMPONENT_TOKEN.

Usage

<smart-card [options]="options" [hasHeader]="true" [hasFooter]="true">
  <p>{{ seatsUsed }} of {{ seatsTotal }} seats used</p>
  <div cardFooter>
    <button type="button">Invite member</button>
  </div>
</smart-card>

Public API

Wrapper: smart-card

InputTypeDefaultDescription
optionsICardOptionsundefinedCard configuration
hasHeaderbooleanfalseShow header section
hasFooterbooleanfalseShow footer section
classstring''Extra container class

ICardOptions

buttons is deprecated: no card variant (standard or preset) has ever rendered it. Put actions in the header or footer instead, by projecting them into the [cardHeader] / [cardFooter] slots (with hasHeader / hasFooter set); the wrapper hands those to the variant as headerTpl / footerTpl.

Content Projection

SelectorDescription
[cardHeader]Header content
defaultBody content
[cardFooter]Footer content

Architecture

Three-layer pattern mirroring <smart-button>:

  1. CardBaseComponent (@Directive()) — shared signals/inputs (options, hasHeader, hasFooter, class, headerTpl, bodyTpl, footerTpl) and computed classes (sharedContainerClasses, headerClasses, bodyClasses, footerClasses). Handles divider, gray body/footer, and padding rules.
  2. CardStandardComponent (selector: smart-card-standard) — default concrete implementation extending the base. Neutral Tailwind style with dark mode (rounded-lg, bg-white, shadow-sm, dark:bg-gray-800/50, dark:outline-white/10).
  3. CardComponent (selector: smart-card) — wrapper. Uses inject(CARD_STANDARD_COMPONENT_TOKEN, { optional: true }) + *ngComponentOutlet to render the injected component, falling back to <smart-card-standard>. Content projection ([cardHeader], default, [cardFooter]) is wrapped in local <ng-template> refs and passed as inputs (headerTpl/bodyTpl/footerTpl) to the active component.

CardPresetComponent (smart-card-preset)

Fully-styled, drop-in concrete implementation extending CardBaseComponent — a faithful translation of Preline's card (rounded-xl surface, shadow-2xs, bordered surface header/footer) into smart:-prefixed vanilla Tailwind with explicit dark: variants. Honours options.title, options.grayBody, and options.grayFooter, and renders the same headerTpl / bodyTpl / footerTpl slots as the base.

Use it directly via <smart-card-preset>, or register it through CARD_STANDARD_COMPONENT_TOKEN to restyle every <smart-card>:

Note: when rendered through the token, CardComponent uses *ngComponentOutlet, which passes inputs by canonical name. The preset therefore overrides the inherited cssClass to drop the class alias (override cssClass = input<string>('')) so extra classes bind correctly. Class recipes live in preset/preset-classes.util.ts (getCardContainerClasses, getCardHeaderClasses, getCardBodyClasses, getCardFooterClasses).

Tailwind Classes

All classes use smart: prefix. CardStandardComponent container: smart:overflow-hidden smart:rounded-lg smart:bg-white smart:shadow-sm. Dark mode: smart:dark:bg-gray-800/50 smart:dark:shadow-none smart:dark:outline smart:dark:-outline-offset-1 smart:dark:outline-white/10. Divider when header/footer present: smart:divide-y smart:divide-gray-200 smart:dark:divide-white/10. Gray body/footer: smart:bg-gray-50 smart:dark:bg-gray-800/50.

Source

The component lives in packages/shared/angular/src/lib/components/card and is documented for Claude Code by the angular-components-card skill.