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
React Cards demo with header, content, footer blocks, basic typography and card actions. With source code. For React and Ionic React.
Cards - Images
Cards - Video
React Cards demo showing off how to include videos with and without description. Content can be shown around media cards. For React and Ionic React.
Cards - Lists
React Cards demo that contains gesture enabled checklist and hierarchical listview. Add or remove elements from the list. For React and Ionic React.
Cards - Forms
React Cards demo with various form elements. Add text fields, selects, checkboxes, sliders, switch, radio, buttons & more. For React and Ionic React.
Cards - Swipe away
React Notification card demo. Use it like notification center or google now. Swipe away to clear. With source code. For React and Ionic React.
Cards - Stacked cards
React Stacked and rotated cards with tinder-like swipe away interaction. Use cards with listview gestures and custom CSS. For React and Ionic React.
Cards - Content
React Image card demo with description. Use it between content blocks or virtually anywhere for clean rendering. For React and Ionic React.
React Cards demo with tabbed view. Use it to break up content logically and provide bite-sized information. For React and Ionic React.
Cards - Collapsible
React Collapsible card list with summary in the header and additional content visible when the card is expanded. For React and Ionic React.
Cards - Accordion
React Accordion cards with one card expanded at a time. Use it let users focus on a single piece of content. For React and Ionic React.
Cards - Masonry layout
React Image cards with variable height in masonry layout. Four column layout similar to how Pinterest renders content. For React and Ionic React.
Cards - Grid layout
React image card grid with title and description. Use it in horizontally scrollable lists or responsive grid layout. For React and Ionic React.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.