hello.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="cards.css" />
    <title>Hello CardsJS</title>
</head>
<body>
    <p>
        The king of spades is rendered as
        <img class='card' src='cards/KS.svg'>.
    </p>

    <p>
        The ace and king of spades stacked horizontally
        <div class='hand' data-hand='flow: horizontal; spacing: 0.2; width: 80; cards: AS,KS'>
        </div>
    </p>

    <p>
        The ace and king of spades stacked vertically
        <div class='hand' data-hand='flow: vertical; spacing: 0.2; width: 90; cards: AS,KS'>
        </div>
    </p>

    <p>
        A great hand in most games
        <div class='fan' data-fan='spacing: 0.1; width: 80; radius: 80; cards: AS,KS,QS,JS,10S'>
        </div>
    </p>

    <p>
        The backs of the cards stacked horizontally
        <div class='hand' data-hand='flow: horizontal; spacing: 0.2; width: 80; cards: BLUE_BACK,RED_BACK'>
        </div>
    </p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
    <script src="cards.js" type="text/javascript"></script>
</body>
</html>