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