Layout

Card

Displays a card with header, content, and footer. Perfect for displaying grouped information, forms, or media.

Preview

A preview of the Card component with interactive controls.

Preview Code

Interactive

Installation

Add the Card component to your project.

Bash

ng g @ng-cn/core:c card

Usage

Import and use the Card component in your Angular application.

Template TypeScript

template.html

<Card class="w-[350px]">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Explore different variations and use cases for the Card component.

Basic

A simple card with all sections.

Preview Code

Interactive

With Form

Card containing a form for user input.

Preview Code

Interactive

With Action Button

Card header with an action button.

Preview Code

Interactive

Interactive Card

Card that acts as a clickable element.

Preview Code

Interactive

With Image

Card with featured image at the top.

Preview Code

Interactive

Card Grid Layout

Multiple cards in a responsive grid.

Preview Code

Interactive

API Reference

Card

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.

CardContent

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.

CardDescription

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.

CardFooter

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.

CardHeader

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.

CardTitle

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.