Card

Content containers using content projection for header, body, and footer.

Component	Selector	Description
`NgOatCard`	`ng-oat-card`	Card container
`NgOatCardHeader`	`ng-oat-card-header`	Optional card header
`NgOatCardFooter`	`ng-oat-card-footer`	Optional card footer

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatCard, NgOatCardHeader, NgOatCardFooter } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatCard, NgOatCardHeader, NgOatCardFooter],
  template: `
    <ng-oat-card>
      <ng-oat-card-header>
        <h4>Card Title</h4>
      </ng-oat-card-header>
      <p>Card body content.</p>
      <ng-oat-card-footer>
        <button>Save</button>
      </ng-oat-card-footer>
    </ng-oat-card>
  `,
})
export class ExampleComponent {}

Basic Card

Card Title

A short description of this card.

Card body content. Any HTML can go here.

html

<ng-oat-card>
  <ng-oat-card-header>
    <h4>Card Title</h4>
    <p>A short description of this card.</p>
  </ng-oat-card-header>
  <p>Card body content.</p>
  <ng-oat-card-footer>
    <button class="outline">Cancel</button>
    <button>Save</button>
  </ng-oat-card-footer>
</ng-oat-card>

Card without Footer

Article Preview

Cards work with any combination of header, body, and footer. Just omit what you don't need.

html

<ng-oat-card>
  <ng-oat-card-header>
    <h4>Article Preview</h4>
  </ng-oat-card-header>
  <p>Cards work with any combination of sections.</p>
</ng-oat-card>

Card Grid

Auth Service Active

Handles user authentication and token refresh.

File Storage Degraded

S3-compatible object storage for uploads.

Email Queue Down

Transactional email processing pipeline.

File Storage Degraded

S3-compatible object storage for uploads.

Email Queue Down

Transactional email processing pipeline.

File Storage Degraded

S3-compatible object storage for uploads.

Email Queue Down

Transactional email processing pipeline.

html

<div class="grid">
  <div class="col-4">
    <ng-oat-card>
      <ng-oat-card-header>
        <h4>Service <ng-oat-badge variant="success">Active</ng-oat-badge></h4>
      </ng-oat-card-header>
      <p>Service description here.</p>
    </ng-oat-card>
  </div>
  <!-- repeat for each card -->
</div>