Cards component for rendering any type of content: photos, text, video and forms in a consistent way.
Use it for organizing content and provide entry points with optional actions.
Shipping with useful features for creating effective layouts:
- Built from three blocks: header, content & footer
- Fully supports typograpy elements & classes
- Thumbnail, avatar, inline & cover image support
- Integrates with horizontal scroll view and list view
- Multiple theme support
- Lightweight footprint
- RTL Support
- Supports card collections
As part of Gesture enabled listview it can be picked up with the Framework and Complete licenses or with the component license.
Cards demos available for other frameworks.
Viewing demos & code for
Cards - Basic
Angular Cards demo with header, content, footer blocks, basic typography and card actions. With source code. For Angular 10 and Ionic 5.
Cards - Images
Cards - Video
Angular Cards demo showing off how to include videos with and without description. Content can be shown around media cards. For Angular 10 and Ionic 5.
Cards - Lists
Angular Cards demo that contains gesture enabled checklist and hierarchical listview. Add or remove elements from the list. For Angular 10 and Ionic 5.
Cards - Forms
Angular Cards demo with various form elements. Add text fields, selects, checkboxes, sliders, switch, radio, buttons & more. For Angular 10 and Ionic 5.
Cards - Swipe away
Angular Notification card demo. Use it like notification center or google now. Swipe away to clear. With source code. For Angular 10 and Ionic 5.
Cards - Stacked cards
Angular Stacked and rotated cards with tinder-like swipe away interaction. Use cards with listview gestures and custom CSS. For Angular 10 and Ionic 5.
Cards - Content
Angular Image card demo with description. Use it between content blocks or virtually anywhere for clean rendering. For Angular 10 and Ionic 5.
Angular Cards demo with tabbed view. Use it to break up content logically and provide bite-sized information. For Angular 10 and Ionic 5.
Cards - Collapsible
Angular Collapsible card list with summary in the header and additional content visible when the card is expanded. For Angular 10 and Ionic 5.
Cards - Accordion
Angular Accordion cards with one card expanded at a time. Use it let users focus on a single piece of content. For Angular 10 and Ionic 5.
Cards - Masonry layout
Angular Image cards with variable height in masonry layout. Four column layout similar to how Pinterest renders content. For Angular 10 and Ionic 5.
Cards - Grid layout
Angular image card grid with title and description. Use it in horizontally scrollable lists or responsive grid layout. For Angular 10 and Ionic 5.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.