jQuery Card

jQuery plugin for displaying information in a card style container.

Features

• Defaults, all settings are optional
• Can easily set images, colors, and text

Compatibility

Tested to work with the latest versions of Firefox, Chrome, Safari, Opera, and Edge.

Setup

CSS

Include the CSS stylesheet.

<link href="dist/jquery.card.css" rel="stylesheet">

JavaScript

Include jQuery 1.7.1 or higher and the script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="dist/jquery.card.js"></script>

Usage

Add the jquery-card class to an empty div or span with any of the following options setup. You can use data-* attributes to customize.

Default Settings

image: '' // link to image title: '' // title text raised: 0 // money raised percent: 0 // money goal percent color: '#333' // button color button: 'Give' // button text link: '' // button link

Examples

Easily setup custom global defaults.

<script> $.fn.card.defaults = {   color: '#777',   button: 'Donate' }; </script>

Setup using CSS class.

<div class="jquery-card"   data-image="http://placehold.it/300x200"   data-title="Example"   data-raised="0.00"   data-percent="0"   data-color="#333"   data-button="Give"   data-link="#"></div>

Setup without using CSS class.

<div id="example"></div> <script>$("#example").card({raised: 1000, percent: 10})</script>