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