basic-card-image-banner.html

<div class="card">
	<div class="card-image">
		<img alt="home" src="./images/image.png" />
		<div class="banner"></div>
		<h2>Card Title</h2>
	</div>
	<p>Lorem ipsum...</p>
</div>

basic-card-image-title.html

<div class="card">
	<div class="card-image">
		<img alt="home" src="./images/image.png" />
		<h2>Card Title</h2>
	</div>
	<h1>Text Title</h1>
	<p>Lorem ipsum...</p>
</div>

basic-card-image.html

<div class="card">
	<div class="card-image">
		<img alt="home" src="./images/image.png" />
		<h2>Card Title</h2>
	</div>
	<p>Lorem ipsum...</p>
</div>

basic-card.html

<div class="card">
	<h2>Card Title</h2>
	<p>Lorem ipsum...</p>
</div>

basic-grid-with-id.html

<div class="ui-grid-b ui-responsive">
 <div class="ui-block-a" id="exampleBlockA"></div>
 <div class="ui-block-b" id="exampleBlockB"></div>
 <div class="ui-block-c" id="exampleBlockC"></div>
</div>

basic-grid.html

<div class="ui-grid-b ui-responsive">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div>

card-css.css

.card {
  background: #FFF;
  border: 1px solid #AAA;
  box-shadow: 0px 2px 3px 0px #AAA;
  padding: 0px;
  margin-top: 15px;
  margin-right: 7.5px;
  margin-bottom: 15px;
  margin-left: 7.5px;
  overflow: hidden;
  border-radius: 3px;
}
.card h1 {
  margin: 0px;
  padding: 10px;
  padding-bottom: 0px;
}
.card p {
  margin: 0px;
  padding: 10px;
}
.card-image {
  width: 100%;
  height: 200px;
  padding: 0px;
  margin: 0px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.card-image .banner {
  height: 50px;
  width: 50px;
  top: 0px;
  right: 0px;
  background-position: top right;
  background-repeat: no-repeat;
  background-image: url('../images/new.png');
  position: absolute;
}
.card-image h1, 
.card-image h2, 
.card-image h3, 
.card-image h4, 
.card-image h5, 
.card-image h6 {
  position: absolute;
  bottom: 0px;
  width: 100%;
  color: white;
  background: rgba(0,0,0,0.65);
  margin: 0px;
  padding: 6px;
  border: none;
}
div.holoPressEffectDiv {
	background-color: #CCCCCC;
}

dynamic-cards.js

// function to create the cards
function createCards() {
	// declaring some variables
	var exampleBlockA = $('#exampleBlockA'), // cache the selector of the element, increases performance
		exampleBlockB = $('#exampleBlockB'), // cache the selector of the element, increases performance
		exampleBlockC = $('#exampleBlockC'), // cache the selector of the element, increases performance
		i,
		j = 1,
		tag,
		
		// the cards, in this example in an array
		imagename = ["Image1", "Image2", "Image3"],
		imagesource = ["./images/image1.jpg", "./images/image2.jpg", "./images/image3.jpg"],
		title = ["Title", "Title", "Title"],
		text = ["Lorem ipsum part 1...", "Lorem ipsum part 2...", "Lorem ipsum part 3..."];

	// emptying the current grid
	exampleBlockA.empty();
	exampleBlockB.empty();
	exampleBlockC.empty();

	// the loop to get the values from the arrays
	for (i = 0; i < 3; i = i + 1) {
		tag = '<div class="card" id="card' + i + '">' +
				'<div class="card-image"><img alt="' + imagename[i] + '" src="' + imagesource[i] + '" />' +
				'<h2>' + title[i] + '</h2></div>' +
				'<p>' +  text[i] + '</p>' +
				'</div>';
		
		/*	You will need to create cards in a special order.
			The first 1/3 of the cards are placed in block A.
			The second 1/3 of the cards are placed in block B.
			The last 1/3 of the cards are placed in block C.
			
			This will make sure that the cards will fill white spots
			when the screen is changing orientation and/or size.
			
			When you create new block for every card you would get
			an interface that is lined like a table.
		*/
		if (i < (result.rows.length / 3)) {
			exampleBlockA.append(tag);
		} else if (i < ((result.rows.length / 3) * 2)) {
			exampleBlockB.append(tag);
		} else if (i <= ((result.rows.length / 3) * 3)) {
			exampleBlockC.append(tag);
		}
		
		// add a press effect to the card
		pressEffectCard('card' + i);
	}
}

// press effect card ui
function pressEffectCard(x) {
	var id = $("#" + x); // cache the selector of the element, increases performance
	id.off('touchstart').on('touchstart', function () {
		id.addClass("holoPressEffectDiv");
	});
	id.off('touchend').on('touchend', function () {
		id.removeClass("holoPressEffectDiv");
	});
	id.off('touchmove').on('touchmove', function () {
		id.removeClass("holoPressEffectDiv"); // to remove the press effect when there is a scroll detected in stead of a tap
	});
}