Corresponding Filename: jquery-flip-simple

jQuery Flip - Simple example

This page shows two card sets. The first is a grid layout. The second is a block grid layout. The height of the cards is set in css (which is not good for dynamic content.)

#1 - Grid Layout

上午
Shàngwǔ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptate qui omnis perferendis ipsum rem natus voluptatum nam, odit nemo ut harum id eaque vitae maiores laborum cum labore. Odio.

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, Odio.

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptate qui omnis perferendis ipsum rem natus voluptatum nam.

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, consectetur adipisicing elit..

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptate qui omnis perferendis ipsum rem natus voluptatum nam, odit nemo ut harum id eaque vitae maiores laborum cum labore. Odio.

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, Odio.

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptate qui omnis perferendis ipsum rem natus voluptatum nam.

Outside flip card
上午
Shàngwǔ

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Outside flip card

#2 - Block Grid Layout

Because the height of the cards is set in css, there is not much difference in the grid layout and the block grid layout. Although the block grid layout results in cleaner mark-up.

上午 Shàngwǔ

Lorem

Outside flip card
上午 Shàngwǔ

Morning

Outside flip card
上午 Shàngwǔ

Morning

Outside flip card
上午 Shàngwǔ

Morning

Outside flip card
上午 Shàngwǔ

Morning

Outside flip card