Getting Started
Overview
Installation
Theme
Colors
Customize Theme
Playground
Theme Generator
Typography
Forms
Basic Inputs
Button Toggle
Buttons
Checkbox
Input
Radio
Segmented
Slide Toggle
Select
Autocomplete
Country Select
Currency Select
Date Format Select
Select
Timezone
Custom Inputs
Form Renderer
Inline Text Edit
Input Mask
Number Input
Password Strength
Phone Input
Pin Input
Components
Navigation
Breadcrumbs
Navigation
Rail Navigation
Side Panel
Sidebar
Tab Panel
Components
68
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Content Fade
Cookie Popup
Crop
Datepicker
Dialog
Divider
Drawer
Emoji Picker
Empty State
Expand
Expansion Panel
Filter Builder
Gauge
Grid
Guided Tour
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Panel
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Split Pane
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Micro Charts
Bar Chart
Line Chart
Pie Chart
Libraries
Kanban Board
Basic Example
Overview
Image Designer
Basic Example
Overview
Video Player
Basic Example
Carousel Example
Minimal Example
Overview
Visual Builder
Basic Example
Overview
Content Editor
Content Builder
Overview
Data View
Basic
Column pinning
Column settings
Custom cell renderers
Custom empty state
Embedded
Filter data
Loading state
Overview
Pinning and pagination
Refresh
Resizable columns
Server side
Server side (empty state)
Sticky columns
With action bar
With pagination
With selection
With sorting
 Purchase

Card

A card groups related content and actions into one meaningful block. Use it for dashboard widgets, KPI panels, previews, summaries, settings sections, media content, or form sections where the content belongs together.

Use it for:
  • Content groups: Keep related text, data, media, and controls together.
  • Dashboard panels: Build widgets, metrics, summaries, and compact admin panels.
  • Structured sections: Add headers, titles, subtitles, avatars, images, actions, and footers.
  • Local actions: Place actions that apply only to the card content.

Do not use Card as a generic page layout wrapper, a decorative border, a modal, a drawer, or a nested card inside another card. Use Tailwind layout utilities for page structure and card tokens for component styling.

The NgStarter Angular Card component lets you group related content, controls, media, and actions in a bordered or elevated container. Use for repeated dashboard widgets, previews, summaries, or compact content modules. It includes examples for Basic Card, Card Appearance, Card Actions, and Card Multiple Sections.

Basic Card

Use a basic card when a small piece of related content needs its own visual container.

Simple cardSimple card

Card Appearance

Choose filled, outlined, or raised appearance based on how much separation the card needs from the page.

Filled CardDefault appearance
 This is a filled card. It has a background color and no shadow or border.
Outlined CardSimple border
 This is an outlined card. It has a border and no shadow.
Raised CardShadow
 This is a raised card. It has a shadow to make it stand out from the background.

Card Actions

Use card actions for commands that apply to the card content, such as share, edit, save, or open.

Actions ButtonsStart
Actions ButtonsEnd
Actions ButtonsStart
Actions ButtonsCenter
Actions ButtonsEnd

Card Multiple Sections

Combine header, avatar, image, content, and actions when the card needs a richer structured layout.

Shiba InuDog Breed
Photo of a Shiba Inu

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.

Shiba InuDog Breed
Photo of a Shiba Inu

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.

Card Footer Loading

Use the footer for status, progress, or loading indicators that belong to the whole card.

Shiba InuDog Breed

This card has divider and indeterminate progress as footer

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.

Shiba InuDog Breed

This card has divider and indeterminate progress as footer

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.