First include the krcg.css and krcg.js files to your webpage:

<link rel="stylesheet" type="text/css" href="https://static.krcg.org/web/krcg.css">
<script src="https://static.krcg.org/web/krcg.js"></script>

Discipline icon

Fortitude <i>f</i>

Fortitude f

Clan icon from SVG image

Ventrue <img src="https://static.krcg.org/clan/ventrue.svg>


Clan icon from font

Nosferatu <span class="krcg-clan">s</span>

Nosferatu s

Card image on click / hover

<span class="krcg-card">Govern the Unaligned</span>

Govern the Unaligned

You can also use custom display name by providing the card name as the data-name attribute:
<span class="krcg-card" data-name="Govern the Unaligned">GtU</span>


You can also disable the "hover" display feature using the data-nohover attribute:
<span class="krcg-card" data-nohover=true>Govern the Unaligned</span>

Govern the Unaligned

This example uses a very basic CSS file for styling in addition to the krcg.css file used to display cards and icons. Feel free to use it too, or use your own styles.