View on GitHub

Cards JS

Scalable and 3D playing cards

Download this project as a .zip file Download this project as a tar.gz file

Welcome to Cards JS

This project allows you to create beautiful pages containing the standard playing cards. It is as simple as adding the HTML tag <img class='card' src='cards/KS.svg'> to display the king of spades.

The playing cards are designed by Chris Aguilar in his Vectorized Playing Cards project. Each card is a SVG image; this allows scaling and rotation of the card image without the aliasing issues of a bitmap image.

Hand Layout

We've crafted some standard hand layouts for you to use. Visit the layouts demo for all the details and fiddle for an interactive demo.

The hand layouts can be defined in javascript or in html with the data-hand attibute. If you are using knockout the `fan` and `hand` bindings are availble. See Controlling the hand and the fan for more details.

<p class="hand" data-hand="flow: horizontal; cards: AH,KH,QH,3H,2H"></p>

Need Help?

Having trouble with Card JS? Check out the documentation at the wiki or raise an issue.

Credits

Chris Aguilar for his beautiful Vectorized Playing Cards.
David Gouvei for his card fan algorithm.
GitHub and GitHub Pages for making cloud development easy.