Hand Layouts

Cards can be grouped into a hand. A hand is a <div class='hand'> containing the cards (<img class='card' src='cards/..'>). When the mouse is over an active hand's card, the card is moved veritically or horizontally to indicate that it will be selected. Use class="active-hand" to make a hand active.

Horizontal Hand

A simple horizontal layout of a hand. Every card is completely visible. Hovering over the card will make it jump up.

<div class="hand hhand">
  <img class='card' src='cards/AS.svg'>
  <img class='card' src='cards/KS.svg'>
  <img class='card' src='cards/QS.svg'>
  <img class='card' src='cards/JS.svg'>
  <img class='card' src='cards/10S.svg'>
  <img class='card' src='cards/9H.svg'>
  <img class='card' src='cards/3H.svg'>
</div>

Horizontal Hand - Compact

A horizontal layout where cards are overlapped. Hovering over the card will make it jump up.

<div class="hand hhand-compact">
  <img class='card' src='cards/AS.svg'>
  <img class='card' src='cards/KS.svg'>
  <img class='card' src='cards/QS.svg'>
  <img class='card' src='cards/JS.svg'>
  <img class='card' src='cards/10S.svg'>
  <img class='card' src='cards/9H.svg'>
  <img class='card' src='cards/3H.svg'>
</div>

Vertical hand

A vertical layout with overlapping cards. Each is column contains all the cards for the suit. This can be used to display a dummy hand in bridge. Hovering over the card will make it jump to the right.

<div>
 <div class="hand vhand-compact">
   <img class='card' src='cards/AS.svg'>
   <img class='card' src='cards/KS.svg'>
   <img class='card' src='cards/QS.svg'>
   <img class='card' src='cards/JS.svg'>
   <img class='card' src='cards/10S.svg'>
 </div>
 <div class="hand vhand-compact">
   <img class='card' src='cards/9H.svg'>
   <img class='card' src='cards/3H.svg'>
 </div>
 <div class="hand vhand-compact">
   <img class='card' src='cards/10D.svg'>
   <img class='card' src='cards/4D.svg'>
   <img class='card' src='cards/2D.svg'>
 </div>
 <div class="hand vhand-compact">
   <img class='card' src='cards/8C.svg'>
   <img class='card' src='cards/7C.svg'>
   <img class='card' src='cards/6C.svg'>
 </div>
</div>

Fan hand

A 3D look and feel to hand. Each card is rotated and overlapped. Suitable for displaying the player's hand. Hovering over the card will make it jump up.

Requires javascript for positioning and rotation.

 <div class="hand fan">
   <img class='card' src='cards/AS.svg'>
   <img class='card' src='cards/KS.svg'>
   <img class='card' src='cards/QS.svg'>
   <img class='card' src='cards/JS.svg'>
   <img class='card' src='cards/10S.svg'>
   <img class='card' src='cards/9H.svg'>
   <img class='card' src='cards/3H.svg'>
   <img class='card' src='cards/10D.svg'>
   <img class='card' src='cards/4D.svg'>
   <img class='card' src='cards/2D.svg'>
   <img class='card' src='cards/8C.svg'>
   <img class='card' src='cards/7C.svg'>
   <img class='card' src='cards/6C.svg'>
 </div>