Cards for Javascript

Updated on May 17, 2021

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

Javascript Cards Swipe away Swipe away

Theme

iOS

Material

Mobiscroll

Windows

Auto

Swipe left/right to clear cards.

Netflix

Sherlock Series 3 is now avalable on Netflix
Angry birds

Don't forget your daily Arena entry.
Candycam

A new update is available!
Today is Jenifer's birthday

Don't forget she is turning 25!!!
Subway Surf

Is it your lucky day? 24-Hour Mega Jackpint Event happening right now!
Mobiscroll

The new Mobiscroll 4.0.0 is out!
15 minutes to work
Open Camera

A new update is available!

Preview in fullscreen

Cards - Basic

Change demo

Basic

Javascript Cards demo with header, content, footer blocks, basic typography and card actions. With source code. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Images

Change demo

Images

Display images inside cards in a couple of different ways. Place it as a cover, make it full-width, inset images or use them as thumbnails.

You can use the it as an alternative to the ion-card component, with advanced features and capabilities.

Place the cards in a grid system, make them scrollable horizontally or create a tinder-like swipe away layout.

jQuery Javascript Angular Angular JS React

Cards - Video

Change demo

Video

Javascript Cards demo showing off how to include videos with and without description. Content can be shown around media cards. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Lists

Change demo

Lists

Javascript Cards demo that contains gesture enabled checklist and hierarchical listview. Add or remove elements from the list. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

Cards - Social cards

Change demo

Social cards

Javascript social cards demo with avatar, name, timestamp, photos, text and various actions. Build custom templates. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Forms

Change demo

Forms

Javascript Cards demo with various form elements. Add text fields, selects, checkboxes, sliders, switch, radio, buttons & more. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Swipe away

Change demo

Swipe away

Javascript Notification card demo. Use it like notification center or google now. Swipe away to clear. With source code. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

                            
                                    JS
                            
                        

                        
                                HTML
                        
                    

                        CSS
                    
Copy code

                            mobiscroll.settings = {
    lang: ' '
    theme: 'ios',
    themeVariant: 'light'
}

mobiscroll.listview('.mbsc-card-list', {
    actionable: false,
    stages: [{
        percent: -20,
        action: function (event, inst) {
            inst.remove(event.target);
            return false;
        }
    }, {
        percent: 20,
        action: function (event, inst) {
            inst.remove(event.target);
            return false;
        }
    }]
});
                    

                            <div class="mbsc-note mbsc-note-primary mbsc-align-center">
    Swipe left/right to clear cards.
</div>

<ul class="mbsc-card-list mbsc-cloak md-card-swipe-list">
    <li mbsc-card>
        <div class="mbsc-card-content">
            <img src="https://img.mobiscroll.com/demos/netflix.png" draggable="false" class="mbsc-avatar">
            <div class="mbsc-card-title mbsc-bold">Netflix</div>
            <div class="mbsc-card-subtitle">Sherlock Series 3 is now avalable on Netflix</div>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-content">
            <img src="https://img.mobiscroll.com/demos/angrybirds.png" draggable="false" class="mbsc-avatar">
            <div class="mbsc-card-title mbsc-bold">Angry birds</div>
            <div class="mbsc-card-subtitle">Don't forget your daily Arena entry.</div>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-content">
            <img src="https://img.mobiscroll.com/demos/candycam.png" draggable="false" class="mbsc-avatar">
            <div class="mbsc-card-title mbsc-bold">Candycam</div>
            <div class="mbsc-card-subtitle">A new update is available!</div>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-header">
            <div class="mbsc-card-title">Today is Jenifer's birthday</div>
        </div>
        <div class="mbsc-card-content">
            Don't forget she is turning 25!!!
        </div>
        <div class="mbsc-card-footer">
            <button class="mbsc-btn-flat" data-icon="phone">Call</button>
            <button class="mbsc-btn-flat" data-icon="bubble">Message</button>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-content">
            <img src="https://img.mobiscroll.com/demos/subwaysurf.png" draggable="false" class="mbsc-avatar">
            <div class="mbsc-card-title mbsc-bold">Subway Surf</div>
            <div class="mbsc-card-subtitle">Is it your lucky day? 24-Hour Mega Jackpint Event happening right now!</div>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-content">
            <img src="https://img.mobiscroll.com/demos/mbsc-logo.png" draggable="false" class="mbsc-avatar">
            <div class="mbsc-card-title mbsc-bold">Mobiscroll</div>
            <div class="mbsc-card-subtitle">The new Mobiscroll 4.0.0 is out!</div>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-header">
            <h2 class="mbsc-card-title">15 minutes to work</h2>
        </div>
        <img src="https://img.mobiscroll.com/demos/route.png" draggable="false">
        <div class="mbsc-btn-group-block">
            <button class="mbsc-btn-flat mbsc-align-left" data-icon="ion-navigate">Navigate / 15 min. via Shotwell St</button>
            <button class="mbsc-btn-flat mbsc-align-left" data-icon="fa-rotate-left">Alternative route / 18 mins</button>
        </div>
    </li>

    <li mbsc-card>
        <div class="mbsc-card-content">
            <img src="https://img.mobiscroll.com/demos/opencam.png" draggable="false" class="mbsc-avatar">
            <div class="mbsc-card-title mbsc-bold">Open Camera</div>
            <div class="mbsc-card-subtitle">A new update is available!</div>
        </div>
    </li>

</ul>
                    

                            .md-card-swipe-list .mbsc-card-title {
    font-size: 15px;
}


                    
Show more code

Cards - Stacked cards

Change demo

Stacked cards

Javascript Stacked and rotated cards with tinder-like swipe away interaction. Use cards with listview gestures and custom CSS. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

Cards - Content

Change demo

Content

Javascript Image card demo with description. Use it between content blocks or virtually anywhere for clean rendering. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Tabs

Change demo

Tabs

Javascript Cards demo with tabbed view. Use it to break up content logically and provide bite-sized information. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

Cards - Collapsible

Change demo

Collapsible

Javascript Collapsible card list with summary in the header and additional content visible when the card is expanded. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Accordion

Change demo

Accordion

Javascript Accordion cards with one card expanded at a time. Use it let users focus on a single piece of content. Plain JS api for usage everywhere.

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Masonry layout

Change demo

Masonry layout

Javascript Image cards with variable height in masonry layout. Four column layout similar to how Pinterest renders content. Plain JS api for usage everywhere.

Preview in fullscreen

jQuery Javascript Angular Angular JS React

JS
HTML

Cards - Grid layout

Change demo

Grid layout

Javascript image card grid with title and description. Use it in horizontally scrollable lists or responsive grid layout. Plain JS api for usage everywhere.

Preview in fullscreen

jQuery Javascript Angular Angular JS React

JS
HTML

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Customize & try demos locally

What framework are you using?

Javascript

jQuery

AngularJS

Angular

React

Other

Ionic Angular

Already have an account? Sign in here.

Install demo in your app

Follow this quick, two minute install guide

Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command

$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command

$ mobiscroll config ionic --version=4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app.

Component
Template
CSS
Module
What to copy from Component

Copy TS

Copy HTML

Copy CSS

Copy Module

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command

$ ionic serve

And voilà, everything should be running smoothly.

Install demo in your app

Follow this quick, two minute install guide

Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command

$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command

$ mobiscroll config ionic --version=4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app.

Copy TSX

Copy CSS

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command

$ ionic serve

And voilà, everything should be running smoothly.

Customize & try demos locally

How would you like to do it?

Install demo in your app

Follow this quick, two minute install guide

Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command

$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Angular project

Copy command

$ mobiscroll config angular --version=4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app. HTML goes into the markup, TS into Typescript.

Copy TS

Copy HTML

Copy CSS

Copy Module

Step 4.Run ng serve in the root folder of your app 🎉

Copy command

$ ng serve

And voilà, everything should be running smoothly.

Thanks for downloading

Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder

$ npm install

Step 2. Start the app

$ ionic serve

Let us know if we can help and enjoy!

Thanks for downloading

Customize demos locally

We have set up a trial so that you can try the demos locally.

Extract the zip file and open the demo in your favorite browser. To install Mobiscroll in your project follow instructions from this page.

Let us know if we can help and enjoy! 👍

Thanks for downloading

Customize demos locally

Please extract the zip file and run the project like any Angular CLI app. Make sure to have the Angular CLI installed.

For installation and usage, extract the zip file and open a terminal window and follow these steps.

Step 1. Run in root folder

$ npm install

Step 2. Start the app

$ ng serve --open

Let us know if we can help and enjoy! 👍

Thanks for downloading

Customize demos locally

We have set up a trial so that you can try the demos locally.

The easiest way to get started is to follow the installation steps and by grabbing the code directly from the demo page. Let us know if we can help and enjoy! 👍

You'll find a fully functional Kitchen-sink Ionic app in the zip file.

Thanks for downloading

Customize demos locally

We have set up a trial so that you can try the demos locally.

The demos are using Babel's in-browser ES6 and JSX transformer.
Extract the zip file and open the demo in your browser. To install Mobiscroll in your project follow instructions from this page.

Let us know if we can help and enjoy! 👍

Customize & try this demo locally

We have to set you up with a trial for this to run 👍

Already have an account? Sign in here.

Enter a new password and hit the button below to change it!

You are setting a password for the account

Event calendar

Scheduler

Timeline

Agenda

Mobile UI Patterns

Docs

Community Forum

Knowledge base

Customers

Blog

Cards for Javascript

Netflix

Angry birds

Candycam

Subway Surf

Mobiscroll

15 minutes to work

Open Camera

Cards - Basic

Cards - Images

Cards - Video

Cards - Lists

Cards - Forms

Cards - Swipe away

Cards - Stacked cards

Cards - Content

Cards - Tabs

Cards - Collapsible

Cards - Accordion

Cards - Masonry layout

Cards - Grid layout