Need help with CSS-Playing-Cards?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.


CSS Playing Cards help you to create simple and semantic playing cards in (X)HTML

146 Stars 69 Forks 21 Commits 7 Opened issues

Services available

Need anything else?

CSS Playing Cards

CSS Playing Cards help you to create simple and semantic playing cards in (X)HTML.

  • @author Anika Henke [email protected]
  • @license CC BY-SA []
  • @version 2011-06-14
  • @link


  • cards.css is the main part and provides the styles for the cards
  • cards-ie.css is a tiny fix for IE < 9 to make a simple version work
  • cards-ie9.css is a fix for IE9
  • examples.html provides some example HTML
  • is this file
  • faces/ contains images for the faces

How to use it

Surrounding container


There needs to be a surrounding container with the class "playingCards" around all the cards. That container can also have other classes which serve as configuration options:

  • fourColours: Switches the default two colour deck with a four colour deck. (The colours of the German four colour deck will be different.)
  • faceImages: Switches the default dingbat symbols for faces with images. Note: Depending on the size of the card, you might need to adjust the image positioning of the faces in cards.css and the font-size in cards-ie9.css (search for "@change").
  • simpleCards: Switches the default multiple suits to one simple single big suit in the middle.
  • inText: Switches the size to something small enough to fit into normal text and also removes the inner bits.
  • rotateHand: Switches the hand to rotate and fan in a semi circle.

The back of a card


To make the cards smaller or bigger, just change the font-size in the main "card" class in cards.css (search for "@change").

The front of a card


Depending on the context, the main card element should either be an a (for selecting single cards), a label (for selecting multiple cards), an abbr (for making a card more accessible with a title), a div or a span (for pure representation or played cards), e.g.


A joker


Different hands

  • [] ... card ... []
  • ...
  • table places the whole cards side by side.
  • hand places them side by side, but lets them overlap, so you will only see a part of each card. If the "rotateHand" option is enabled, you'll see the cards rotated in a semi circle.
  • deck places the cards on top of each other, so that you cannot see single cards but a pack.


The CSS is only intended to work in modern browsers (Firefox 3.6+, Opera 10+, Chrome, Safari, IE9). To make a basic version work in IE8, you need the provided cards-ie.css. And IE9 also needs a little fix, as provided in cards-ie9.css.


  • The faces' images are taken from svg-cards
  • One of the cards back images was taken from

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.