Getting Started
Forms
Components
78
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
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
Digit Roller
Divider
Drawer
Emoji Picker
Empty State
Events
Expand
Expansion Panel
File Type
Filter Builder
Gauge
Grid
Guided Tour
Headless Stepper
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
Sort
Split Pane
Step Tracker
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Libraries
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.
Card API
| Prop | Type | Default |
|---|---|---|
appearance The visual appearance of the card. | 'raised' | 'outlined' | 'filled' | 'outlined' |
Card Actions API
| Prop | Type | Default |
|---|---|---|
align The horizontal alignment of the actions. | 'start' | 'center' | 'end' | 'between' | 'start' |
Directives
| Selector | Description |
|---|---|
| ngs-card-header | Header section of the card. |
| ngs-card-title | Title within the card header. |
| ngs-card-subtitle | Subtitle within the card header. |
| ngs-card-content | Main content section of the card. |
| ngs-card-footer | Footer section of the card. |
| ngs-card-image | Image section of the card. |
| ngs-card-avatar | Avatar section within the card header. |
| ngs-card-aside | Aside section for side-by-side card layout. |
Using this component in production?
Source code, templates, and commercial support
NgStarter includes source code, admin dashboard templates, and commercial support.