Getting Started
Forms
Components
69
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
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
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.
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.
Card Appearance
Choose filled, outlined, or raised appearance based on how much separation the card needs from the page.
Card Actions
Use card actions for commands that apply to the card content, such as share, edit, save, or open.
Card Multiple Sections
Combine header, avatar, image, content, and actions when the card needs a richer structured layout.
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.
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.
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.
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.
Using this component in production?
Source code, templates, and commercial support
NgStarter includes source code, admin dashboard templates, and commercial support.