Card

A Base UI (Angular) card is a bordered content shell: header, body, and footer projected as child elements. Install card with the CLI and compose layouts without a CSS framework card class. Horizontal and user-card demos live on this page; you own the markup after copy-in.

When to use

Grouping a heading, body, and actions (settings panels, pricing tiles).
Dashboards that repeat the same chrome around different content.

When not to use

A full application chrome — use shell or a page layout.
Unrelated sections that should be separate landmarks — prefer headings plus spacing.

Install with npx base-ui-cli add card.

free

A card composes three optional sections: <base-card-header> for a title and actions, <base-card-body> for the main content, and <base-card-footer> for trailing actions. The examples below project whichever of the three they need.

Default Card

Default card example below

Card header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Purus sit amet volutpat consequat mauris nunc congue nisi vitae.

HTML

<base-card>
  <base-card-header>Card header</base-card-header>
  <base-card-body>
    <p>Card content goes here...</p>
  </base-card-body>
  <base-card-footer>
    <button base-button color="primary">Action</button>
  </base-card-footer>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

Card with image

It is really easy to design <base-card> with Tailwindcss classes. Card with image on top, example below.

Article Title

HTML

<base-card>
  <img src="path/to/image.jpg" alt="" />
  <base-card-body>
    <h4>Article Title</h4>
    <p>Article description...</p>
  </base-card-body>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

Horizontal Card with image

Horizontal Card with image, example below.

Article Title

HTML

<base-card>
  <div class="flex">
    <img src="path/to/image.jpg" class="w-70 object-cover" />
    <base-card-body class="flex-1">
      <h4>Horizontal Title</h4>
      <p>Horizontal description...</p>
    </base-card-body>
  </div>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

Login Panel

Login

HTML

<base-card class="w-90">
  <base-card-body class="p-8">
    <h4>Login</h4>
    <form>
      <base-input-group>
        <base-label>Username</base-label>
        <input base-input />
      </base-input-group>
      <!-- form content -->
      <button base-button color="primary" class="w-full">Login</button>
    </form>
  </base-card-body>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

User Card

User card with <base-card>, example below.

Clara Scott

Manager

HTML

<base-card class="w-70 p-10">
  <base-avatar size="full" shape="circle" avatarUrl="..."></base-avatar>
  <h4 class="text-center">Clara Scott</h4>
  <p class="text-center">Manager</p>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

Users List Card

Users list card with <base-card>, example below.

Users list

Clara Scott

[email protected]

HTML

<base-card class="w-90">
  <base-card-header>Users list</base-card-header>
  <base-card-body class="py-0">
    <div class="flex justify-between items-center py-4 border-b">
      <div class="flex items-center">
        <base-avatar size="md" shape="circle" avatarUrl="..."></base-avatar>
        <div class="px-4">
          <h4>User Name</h4>
          <p>[email protected]</p>
        </div>
      </div>
    </div>
  </base-card-body>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

Card with Tabs

Tabs used <base-card>, example below.

First Tab Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida. Aenean et tortor at risus viverra adipiscing. Quam pellentesque nec nam aliquam sem et tortor consequat. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus.

HTML

<base-card>
  <base-tabs type="folder">
    <base-tab>
      <base-tab-label>Tab Label</base-tab-label>
      <base-tab-body>Tab content...</base-tab-body>
    </base-tab>
    <!-- More tabs -->
  </base-tabs>
</base-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-card-example',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class CardExampleComponent {}

Install

bash

npx base-ui-cli add card

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add card

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-ng-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add card
// Paths are relative to aliases.components (default: src/app/components)
import { CardBodyComponent } from './card/card-body/card-body.component';
import { CardFooterComponent } from './card/card-footer/card-footer.component';
import { CardHeaderComponent } from './card/card-header/card-header.component';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-your-component',
  imports: [
    CardBodyComponent,
    CardComponent,
    CardFooterComponent,
    CardHeaderComponent
  ],
  template: `...`
})
export class YourComponent {}

API for card — generated from JSDoc in the library source.

API reference for card
API	Member	Type	Default	Description
`base-card`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-card`	`horizontal`	`boolean`	`false`	If true, the card lays out its children horizontally instead of vertically.
`base-card-body`	`—`	`—`	—	The main content container of a base-card. Provides correct padding and spacing.
`base-card-body`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-card-footer`	`—`	`—`	—	The footer section of a base-card. Usually contains action buttons (Save, Cancel, etc).
`base-card-footer`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-card-header`	`—`	`—`	—	The header section of a base-card. Usually contains the title and optional actions.
`base-card-header`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).