AngularLynx

    Card

    A bordered surface that groups related content, with optional header, title, description, content and footer parts.

    ui-cardsrc/app/app.ts

    Installation

    npx @blotch/dolan add card
    import {
  UiCard,
  UiCardContent,
  UiCardDescription,
  UiCardFooter,
  UiCardHeader,
  UiCardTitle,
} from '../components/ui/card';

    Usage

    src/app/app.ts
    import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import {
  UiCard,
  UiCardContent,
  UiCardDescription,
  UiCardFooter,
  UiCardHeader,
  UiCardTitle,
} from '../components/ui/card';

@Component({
  selector: 'app-root',
  imports: [
    LYNX_ELEMENTS,
    UiCard,
    UiCardHeader,
    UiCardTitle,
    UiCardDescription,
    UiCardContent,
    UiCardFooter,
  ],
  template: `
    <ui-card>
      <ui-card-header>
        <ui-card-title>Notifications</ui-card-title>
        <ui-card-description>You have 3 unread messages.</ui-card-description>
      </ui-card-header>
      <ui-card-content>
        <text class="text-sm text-foreground">New deployment started</text>
      </ui-card-content>
      <ui-card-footer>
        <text class="text-sm text-muted-foreground">View all</text>
      </ui-card-footer>
    </ui-card>
  `,
})
export class App {}
    • Every part is optional. Header, content and footer share the same side padding, so they line up.
    • Title and description wrap their content in <text>. Content and footer don't, so use your own <text> elements there.

    Content only

    <ui-card>
  <ui-card-content class="pt-6">
    <text class="text-sm text-foreground">A simple card.</text>
  </ui-card-content>
</ui-card>

    Content has no top padding, because it usually follows a header. Add pt-6 when it stands alone.

    Pressable

    <ui-card [pressable]="true" (bindtap)="openOrder()">
  <ui-card-content class="pt-6">
    <text class="text-sm text-foreground">Order #1024</text>
  </ui-card-content>
</ui-card>

    pressable makes the card shrink slightly while a finger is down. It adds no event, so handle the tap yourself with (bindtap).

    API

    UiCard

    InputTypeDefaultDescription
    pressablebooleanfalseShrinks the card slightly while pressed.
    classstring''Extra Tailwind classes for the card.

    No outputs.

    All sub-components (UiCardHeader, UiCardTitle, UiCardDescription, UiCardContent, UiCardFooter) accept class.