Back to the corresponding blog post
Surrounding Container:
<div class="playingCards">...</div>
With different options (default is the respective opposite):
<div class="playingCards fourColours faceImages rotateHand">...</div>
Note: ".simpleCards" doesn't work with ".faceImages" and ".playfulSuits".
<div class="card back">*</div>
<div class="card rank-7 spades"> <span class="rank">7</span> <span class="suit">♠</span> </div>
<strong> <span class="card rank-a clubs"> <span class="rank">A</span> <span class="suit">♣</span> </span> </strong>
<a class="card rank-q hearts" href="#"> <span class="rank">Q</span> <span class="suit">♥</span> </a>
<label for="c-2D" class="card rank-2 diams"> <span class="rank">2</span> <span class="suit">♦</span> <input type="checkbox" name="c-2D" id="c-2D" value="select" /> </label>
<ul class="table"> <li>...card...</li> ... </ul>
<ul class="hand"> <li>...card...</li> ... </ul>
<ul class="deck"> <li>...card...</li> ... </ul>