Free
Pro

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

<base-card-header>

<base-card-body>

<base-card-footer>

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

Card with image

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

Article Title

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

Horizontal Card with image

Horizontal Card with image, example below.

Article Title

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

Login Panel

Login panel with <base-card>, example below.

Login

Forgot Password?

Not registered? Create Account


HTML

User Card

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

Clara Scott

Manager


HTML

Users List Card

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

Users list

Clara Scott

[email protected]


HTML

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

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-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
APIMemberTypeDefaultDescription
base-cardclassstring''Additional host CSS classes (merged via cn()).
base-cardhorizontalbooleanfalseIf 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-bodyclassstring''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-footerclassstring''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-headerclassstring''Additional host CSS classes (merged via cn()).