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