Example

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

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

Blogger special

For users of the Blogger platform, there is an additional script you might want to include: krcg-blogger.js, before the standard script:

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

This script will let you include icons and cards in your posts by using the Courier font. Then you get the following conversions:

Yes, both "disc" and "discipline" work the same, the short one is for your convenience. For a better result, you can add a small styling section in your theme so that the cards are displayed with a fitting color:

.krcg-card{
  color:$(body.link.hover.color);
}
.krcg-decklist .krcg-card{
  color: $(body.text.color);
}
.krcg-decklist .krcg-card:hover,
.krcg-decklist .krcg-card:focus {
  color: $(body.link.hover.color);
}
.krcg-decklist {
  background-color: background-color:rgba(
    $(heropost.main.background.color.red),
    $(heropost.main.background.color.green),
    $(heropost.main.background.color.blue),
    .15
  );
}

To learn how to modify your theme HTML, check this documentation. Note you can also decide not to include the blogger-specific script, and use spans and classes like all other websites, see below.

Discipline icon

Fortitude <span class="krcg-icon">f</span> → Fortitude f

Note you can use this class on any item to change its font. You can also use font-family: "Ankha VTES" instead as a style attribute anywhere you like.

Mapping

Here is the full characters map for the disciplines font ankha2.otf. Note the 5 last of the table are deprecated and kept for compatibility with the previous version of the font. Also note, that to use &, < and > in HTML code, you will need to use the escape character &amp, &lt and &gt respectively.

aaAA00''
bbBB11""
ccCC22;;
ddDD33::
eeEE44..
ffFF55//
ggGG66,,
hhHH77\\
iiII88]]
jjJJ99``
kkKK++--
llLL==__
mmMM<<¦¦
nnNN>>
ooOO^^
ppPP||
qqQQ{{
rrRR~~
ssSS§§
ttTT((
uuUU))
vvVV%%
wwWW&&
xxXX##µµ
yyYY**àà
zzZZ@@áá
??!!¤¤ââ
$$££}}ãã

Clan icon from SVG image

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

Clan icon from font

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

Note you can use this class on any item to change its font. You can also simple use font-family: "VTES Clans" instead as a style attribute anywhere you like.

Mapping

Here is the full characters map for the clans font vtes-clans.otf.

aaAA
bbBB11
ccCC22
ddDD33
eeEE44
ffFF55
ggGG66
hhHH77
iiII
jjJJ
kkKK
llLL
mmMM
nnNN
ooOO
ppPP
qqQQ
rrRR
ssSS
ttTT
uuUU
vvVV
wwWW
xxXX
YY
ZZ

Note that when using this font, the newest clan icons should be preferred over their legacy variants. Here is the correspondance map between legacy and modern symbols.

LegacyModern
DDnn
GGoo
KKrr
LLpp
TTww
UUqq
XXss
fftt
hhuu
llvv

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>

GtU

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.