Anki Card Template/CSS

Over the years, I’ve settled on a nice Anki template + CSS that abides by the principles of good typography and works on both desktop and mobile.

I’m providing it here in case you want something similar. feel free to use/modify, and reach out to me on https://x.com/iantay_ if you have any feedback or are you’re into any of the things I talk about on this site.

To use this, you will need to create / edit a note type as follows:

Front Template:

<div class="{{Tags}} overlaybg"></div>
<div id="kard" class="{{Tags}}">
  <div id="tags">{{Tags}}</div>
  {{cloze:Text}}
  {{cloze:Text2}}
</div>

Back Template:

<div class="{{Tags}} overlaybg"></div>
<div id="kard" class="{{Tags}}">
  <div id="tags">{{Tags}}</div>
  {{cloze:Text}}
  {{cloze:Text2}}
  <div>&nbsp;</div>
  <div id='extra'>{{Extra}}</div>
</div>

Styling:

@import url("_anki.css");
@import url("_styles_for_syntax_highlighting.css");

Then, in Anki’s collection.media folder (located at ~/Application Support/Anki2/ProfileName on mac), include the following css file.